Overview
Next.js, a react framework recently released its RC(release candidate) 15th version; this release candidate version introduces new features that will change how you build high-quality and performance web applications.
These new features touch on:
As a developer, it is important to understand the key features, and how they can enhance your web development projects. In this article, I will be explaining what is new in Next15 so that you can start implementing them.
Please note that these Nextjs features are still being tested rigorously and extensively before its final release.
Prerequisite
A Working Knowledge of React
Next.js
Next.js also known as next is a framework that is built on top of React and offers additional features like Server-Side Rendering (SSR), allowing you to create high-quality and performant web applications with the power of React components. It also offers powerful features like Built-in Optimizations, Dynamic HTML Streaming, React Server Components, and many more!
A Sneak Peek at the Latest Features
React:
Since Nextjs was built on top of the React canary channel, developers had to use and give feedback on the React APIs before the release of React 19 RC. The Release played a huge part in the Next Support for the React 19 Rc version, including new features for both the client and server-like actions.
React Compiler:
With this newly built-in feature, developers can now save the time of manually memoizing values with the use of useCallback and useMemo to solve re-rendering issues.
Also with Nextjs support for the react compiler, developers can now focus on creating and maintaining code that is easier to maintain, and less error-prone.
To use the compiler, it is done by just installing babel-plugin-react-compiler with the command as shown below.
npm install babel-plugin-react-compiler
Then, add the experimental.reactCompiler option in your next.config.js file:
const nextConfig = {
experimental: {
reactCompiler: true,
},
};
module.exports = nextConfig;
However, If you are looking to configure your compiler further to run in “opt-in” mode, add this option as shown below:
const nextConfig = {
experimental: {
reactCompiler: {
compilationMode: 'annotation',
},
},
};
module.exports = nextConfig;
With this, you now have your compiler set up and you don't have to worry about re-rendering issues because the compiler is handling that for you.
Hydration error improvements
A Hydration error is a common error in next that stems from the mismatch of the server and client’s component states and generated markup. However, Next15 made massive improvements to the hydration errors, by providing the source code of the error and also ways to solve the error. isn’t that great?
It has now greatly improved from what we have above 👆to this 👇:
Caching Updates
Before now, next js used to have opinionated default caching defaults. These defaults were implemented to provide a performant approach for the next application; However, this approach didn't suit the needs of projects like Partial Prerendering (PPR) and third-party libraries like fetch. However, after careful consideration and revaluation of the caching heuristics, the defaulting default is now uncached by default in the Next15 version.
It is important to note the team is still making improvements to caching in Next in the coming months
Fetch Requests are no longer cached by default
Nextjs allows us to configure how our server-side requests interact with the framework’s persistent HTTP cache. However, we are provided with options like the force-cache and no-store method, which determine the behavior of the resource fetched from the server that gets updated in the cache or not:
fetch('https://...', { cache: 'force-cache' | 'no-store' });
Force-cache: This option defaults in next14; it involves fetching the resource from the cache (if it exists) or a remote server and updating the cache.
No-store: When a request is made, the web fetch API retrieves the resource from a remote server based on that request and does not update the cache. This option now comes by default in Next 15.
Get Route Handlers
In Next 15, get route handlers will no longer be cached as well. So, you only decide to opt into caching by using a static route config option such as export dynamic = ‘force
Client Route Cache
Also, on the client route updates, it will also not be cached by default. Therefore, as you navigate back and forth in your app, the active page components will continue to get the latest data from the server and not from the cache. This is because the staleTimes flag that allows custom configuration of the router cache is now 0 for page segments as shown in the config below.
//next.config.js file
const nextConfig = {
experimental: {
staleTimes: {
dynamic: 0,
},
},
};
module.exports = nextConfig;
Incremental adoption of Partial Prerendering
Partial prerendering is a way of storing some static portions of the pages of a website in a cache with dynamic holes streamed in so that when the user requests for it, it gets served to the user at a faster rate. The dynamic holes in question can be the latest news or personal information that needs to be updated, meaning they still have to run in the background while the page has loaded.
Next 14 introduced PPR which was a way of optimizing pages with static and dynamic rendering. The dynamic pages get wrapped in a Suspense boundary; therefore, allowing it to be streamed when a request is made. However, in the same HTTP Request, the static pages get served as a static HTML shell.
In Next 15, PPR can now be set for specific pages and layouts by simply adding an experimental_ppr route config option
import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
//
export const experimental_ppr = true
export default function Page() {
return {
<>
<StaticComponent />
<Suspense fallback={...}>
<DynamicComponent />
</Suspense>
</>
};
}
To enable the option used in the page above, you are expected to set the experimental.ppr config in your next.config.js file to 'incremental':
const nextConfig = {
experimental: {
ppr: 'incremental',
},
};
module.exports = nextConfig;
Executing Code after a response with next/after
In Next 15, there is now a way to perform tasks after a response has been served to the user. These tasks can include logging, analytics, and other external system synchronization. Although, performing this type of task can be very challenging. Using after() as an experimental API solves the problem; allowing you to schedule work to be processed after streaming your response.
To enable it in your project, add this to your config file:
const nextConfig = {
experimental: {
after: true,
},
};
module.exports = nextConfig;
After that, import the function in your server component as shown below:
import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
export default function Layout({ children }) {
// Secondary task
after(() => {
log();
});
// Primary task
return <>{children}</>;
}
Create-next-app updates
Some major updates have also been made to the design of the create-next-app homepage. When you open create-next-app on your localhost, you get to see the new design as shown below:
Running create-next-app
Also while running create-next-app, there is a new prompt that now asks for the enabling of Turbopack for local development which defaults to no.
You can enable Turbopack using the –turbo flag
npx create-next-app@rc --turbo
Optimizing bundling of external packages
In Next 14, packages are only bundled in the App router and not on the page router by default.
So to bundle external packages in the Page router, the transpilePackages config is used; however, you may need to specify each package.
If there was a need to opt out of a specific package in an App router, it was done using the serverExternalPackages config option.
In Next 15, a new option is now introduced which is called bundlePagesRouterDependencies; this option allows you to unify the configuration between the App and Pages router which matches with the default automatic bundling of the App router in Next14. You also decide to use the serverExternalPackages option if you want to opt-out specific packages.
const nextConfig = {
// Automatically bundle external packages in the Pages Router:
bundlePagesRouterDependencies: true,
// Opt specific packages out of bundling for both App and Pages Router:
serverExternalPackages: ['package-name'],
};
module.exports = nextConfig;
Conclusion
With these new features coming, it will surely be a game changer in web development. So, now that you have a basic understanding of the new features, you can start implementing them in your projects. But note that the work on Next 15 is still in progress before its final release. If you are looking to learn more about the features, you can check their docs here. Happy Coding!!
Top comments (0)