Les nouveautés de NextJS 15

Sommaire

1. La prise en charge de React 19

2. Une amélioration des messages d'erreur d'hydratation

3. Une mise à jour de create-next-app

    3.1 La possibilité d'activer Turbopack

    3.2 La possiblité d'utiliser l'option --empty

4. L'optimisation du cache

    4.1 Plus rien n'est mis en cache par défaut

    4.2 Plus de contrôle sur la mise en cache

5. Les nouvelles fonctionnalités expérimentales

    5.1 Le prérendu partiel (Partial Prerendering - PPR)

    5.2 L'exécution après la réponse (Next After)

6. Conclusion

La prise en charge de React 19

NextJS 15 introduit la compatibilité avec la toute dernière version de React, React 19, qui devrait sortir avant la fin de l'année, avec de nombreuses nouveautés.

Cette nouvelle version de React apporte par exemple des Server Actions ainsi que les Server Components qui ne sont ni plus ni moins que ce que propose déjà NextJS. Il reste cependant des améliorations sur les performances proposées par React dont NextJS 15 pourra profiter toute en y ajoutant ses propres optimisations.

Une amélioration des messages d'erreur d'hydratation

Cette nouvelle version de NextJS 15 propose également une amélioration de ses messages d'erreur d'hydratation.

Un message d'hydratation se produit lorsqu'une erreur est détectée dans le processus qui lie le code JavaScript à un contenu HTML pré-rendu sur le serveur (ceci permet de rendre la page interactive).

En quelques sortes ce que cherche à faire NextJS - et finalement React - c'est d'améliorer les performances en ne modifiant le code HTML que dans quelques parties bien précises de la page qui doivent être mises à jour.

On appelle ce procédé l'hydratation. 😬

Cependant, des erreurs d'hydratation peuvent survenir lorsque le code côté serveur et le code côté client ne sont pas synchronisés.

Par exemple, si le rendu HTML généré par le serveur diffère du rendu côté client, React renverra un message d'erreur d'hydratation, indiquant que l'interface ne correspond pas à ce qui était prévu. Ces erreurs peuvent être causées par des éléments dynamiques qui changent entre le moment où le HTML est rendu sur le serveur et quand il est exécuté sur le client, comme les dates ou les identifiants uniques.

Dans Next.js 15, les messages d'erreur d'hydratation ont été améliorés pour être plus clairs et fournir des informations plus précises afin de faciliter la résolution de ces problèmes​. ✨

Voici un message d'erreur d'hydratation dans les versions précédentes de Next :

Et voici les nouveaux messages d'erreur d'hydratation avec la nouvelle version de NextJS :

On remarque immédiatement plus d'informations sur ce qu'il s'est passé et sur les endroits sur lesquels nous avons rencontré une erreur ! Plutôt sympa non ? 😊

Par exemple ce genre de code déclencherait aussi tôt un problème d'hydratation :

const Hey = () => {
  return (
    <p>
      Premier texte
      <p>Autre texte mais dans un autre paragraphe donc erreur ici</p>
    <p>
  );
};

Une mise à jour de create-next-app

L'outil create-next-app (qui permet d'initialiser rapidement des projets avec NextJS) a été mis à jour avec une nouvelle interface plus conviviale et des options supplémentaires pour améliorer l'expérience utilisateur.

La possibilité d'activer Turbopack

Turbopack est un nouveau bundler ultra-rapide conçu pour remplacer Webpack. Il permet d'accélérer considérablement les temps de compilation et de développement local, ce qui est particulièrement utile pour les gros projets où les temps de build peuvent devenir rapidement gigantesque. 😅

Avec NextJS 15, create-next-app inclut une option qui permet d'activer Turbopack lors de la création d'un nouveau projet, permettant dès le départ  amélioration significative des performances.

La possiblité d'utiliser l'option --empty

Une autre fonctionnalité intéressante est l'ajout de l'option --empty, qui permet de créer un projet NextJS minimal, c'est-à-dire sans les fichiers et configurations par défaut. Très utile pour les développeurs qui souhaitent partir d'une base complètement vide et configurer leur projet selon leurs besoins.

npx create-next-app@rc --empty

L'optimisation du cache

Dans la version 15 de NextJS, la gestion du cache par défaut a été totalement modifiée pour donner plus de contrôle aux développeurs.

Plus rien n'est mis en cache par défaut

Contrairement aux versions précédentes de NextJS, dans la version 15 plus aucune requête n'est mise en cache par défaut. Les données ne sont désormais plus stockées pour être utilisées plus tard.

Pour activer l'optimisation des mises en cache, nous sommes désormais obligés de le préciser pendant la requête.

Plus de contrôle sur la mise en cache

L'objectif de cette modificatioon est de donner aux développeurs la possibilité de choisir explicitement ce qu'ils souhaitent garder en mémoire.

Il est désormais possible d'utiliser ces deux options :

• force-cache : Cette option permet de forcer la mise en cache des requêtes ou des routes, garantissant que les données sont stockées et réutilisées.

fetch('http://localhost:3001/believemy', { cache: 'force-cache' });

• dynamic: "force-static" : Cette option permet de définir certaines parties de l'application comme statiques, en forçant la mise en cache de manière plus stricte pour ces ressources.

// pages/index.js
export const dynamic = 'force-static'; // force le contenu à être statiquement mis en cache

export default function HomePage() {
  return (
    <div>
      <h1>Bienvenue sur Next.js 15</h1>
      <p>Cet exemple utilise dynamic: 'force-static' pour un rendu entièrement statique.</p>
    </div>
  );
}

Les nouvelles fonctionnalités expérimentales

Le prérendu partiel (Partial Prerendering - PPR)

Cette toute nouvelle version de NextJS introduit la fonctionnalité Partial Prerendering (PPR), qui permet de combiner le rendu statique et dynamique sur une même page.

L'objectif est d'optimiser les performances en ne rendant que les parties d'une page qui ont changé.

Cette fonctionnalité est disponible de manière expérimentale via une configuration que vous devrez effectuer dans next.config.js​

L'exécution après la réponse (Next After)

Cette nouvelle version propose également une nouvelle API expérimentale : next/after.

L'idée est d'exécuter après l'envoi d'une réponse un ensemble d'instructions. On peut imaginer une utilité pour des tâches de journalisation par exemple sans ralentir la réponse principale (donc finalement très intéressant pour optimiser notre référencement sur les moteurs de recherche). 😁

En voici un petit exemple :

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
const Content = () => {
  
  after(() => {
    log(); // Ce code est exécuté après que le rendu ait été généré
  });
 
  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 !