Next.js has just announced version 16: discover all the new features of the latest version right here: what's new in Next.js 16!
React 19 support
NextJS 15 introduces compatibility with the latest version of React, React 19, due for release before the end of the year, with many new features.
This new version of React brings, for example, Server Actions and Server Components, which are neither more nor less than what NextJS already offers. However, there are still a number of performance enhancements offered by React that NextJS 15 will be able to take advantage of, while adding its own optimizations.
Improved hydration error messages
This new version of NextJS 15 also offers improved hydration error messages.
A hydration message occurs when an error is detected in the process that binds JavaScript code to pre-rendered HTML content on the server (this makes the page interactive).
In a way, what NextJS - and ultimately React - is trying to do is improve performance by modifying the HTML code in only a few specific parts of the page that need updating.
We call this process hydration. 😬
However, hydration errors can occur when server-side and client-side code are not synchronized.
For example, if the HTML rendering generated by the server differs from the client-side rendering, React will return a hydration error message, indicating that the interface doesn't match what was intended. These errors can be caused by dynamic elements that change between the time the HTML is rendered on the server and when it is executed on the client, such as dates or unique identifiers.
In Next.js 15, hydration error messages have been improved to be clearer and provide more accurate information to help resolve these issues. ✨
Here's a hydration error message in previous versions of Next :
And here are the new hydration error messages with the new version of NextJS:
We immediately notice more information about what happened and where we encountered an error! Pretty cool, isn't it? 😊
For example, this kind of code would trigger a hydration problem just as early:
const Hey = () => {
return (
<p>
First text
<p>Other text but in another paragraph so error here</p>
<p>
);
};
An update to create-next-app
The create-next-app tool (which lets you quickly initialize projects with NextJS) has been updated with a new, more user-friendly interface and additional options to enhance the user experience.
The ability to activate Turbopack
Turbopack is a new, ultra-fast bundler designed to replace Webpack. It significantly speeds up compilation and local development times, which is particularly useful for large projects where build times can quickly become gigantic. 😅
With NextJS 15, create-next-app includes an option to activate Turbopack when creating a new project, enabling significant performance improvements right from the start.
The ability to use the --empty option
Another interesting feature is the addition of the --empty option, which allows you to create a minimal NextJS project, i.e. without the default files and configurations. Very useful for developers who wish to start from a completely empty base and configure their project according to their needs.
npx create-next-app@rc --empty
Cache optimization
In NextJS version 15, the default cache management has been completely modified to give developers more control.
Nothing is cached by default
Unlike previous versions of NextJS, in version 15 no requests are cached by default. Data is no longer stored for later use.
To activate caching optimization, we now have to specify this during the request.
More control over caching
The aim of this modification is to give developers the possibility of explicitly choosing what they wish to keep in memory.
It is now possible to use these two options:
force-cache: This option allows you to force caching of requests or routes, ensuring that data is stored and reused.
fetch('http://localhost:3001/believemy', { cache: 'force-cache' });
dynamic: "force-static": This option lets you define certain parts of the application as static, forcing more stringent caching for these resources.
// pages/index.js
export const dynamic = 'force-static'; // force content to be statically cached
export default function HomePage() {
return (
<div>
<h1>Welcome to Next.js 15</h1>
<p>This example uses dynamic: 'force-static' for fully static rendering.</p>
</div>
);
}
New experimental features
Partial Prerendering (PPR)
This latest version of NextJS introduces Partial Prerendering (PPR), which lets you combine static and dynamic rendering on the same page.
The aim is to optimize performance by rendering only those parts of a page that have changed.
This feature is available on an experimental basis via a configuration you'll need to perform in next.config.js.
Next After execution
This new version also features a new experimental API: next/after.
The idea is to execute a set of instructions after a response has been sent. This could be useful for logging tasks, for example, without slowing down the main response (so ultimately very interesting for optimizing our SEO on search engines). 😁
Here's a small example:
import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
const Content = () => {
after(() => {
log(); // This code is executed after the rendering has been generated
});
return <>Believemy</>;
}
export default Content;
Conclusion ✨
Voilà tout ce qu'il fallait savoir sur les nouveautés de NextJS 15 ! Finalement, aucun changement majeur ou bloquant donc c'est une excellente nouvelle : il n'y a pas de modification à apporter sur vos projets !
Si vous voulez vous préparer à NextJS 15 dans une formation continuellement à jour allez consulter notre formation dédiée à NextJS !
Here's everything you needed to know about what's new in NextJS 15! In the end, there are no major or blocking changes, so this is excellent news: there are no modifications to make to your projects!
If you want to prepare for NextJS 15 in a training course that's always up to date, check out our dedicated NextJS training course!