What's new in NextJS 15

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.

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.

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!