Les nouveautés de Next.js 15 : Codemod, Async Request, Cache, React 19 et plus encore

La version Next.js 15 vient de sortir et apporte son lot de nouvelles fonctionnalités, d’améliorations et de quelques breaking changes.

Que vous soyez en pleine migration ou curieux des dernières tendances, voici un récapitulatif complet des points essentiels à retenir.

Codemod

Next.js 15 introduit un nouvel outil pratique, le CLI Codemod. Il permet de faciliter la migration de vos projets d’une version antérieure vers la version 15 en transformant automatiquement certaines parties de votre code et en mettant à jour les dépendances.

C’est un vrai gain de temps, surtout pour les gros projets. Plus besoin de vous soucier des détails de compatibilité, le Codemod s’occupe de la majorité du travail pour vous.

npx @next/codemod@canary upgrade latest

Async Request APIs

Un changement majeur dans cette version concerne les Async Request APIs.

Certaines fonctions qui étaient auparavant synchrones deviennent désormais asynchrones. Cela inclut des fonctions essentielles comme la gestion des cookies, la génération des metadata, ou encore la gestion des searchParams.

Attention, bien que ces changements soient importants, vous pouvez encore utiliser ces fonctions de manière synchrone pour une transition en douceur vers Next.js 15. Cela vous laisse un peu de temps pour adapter votre code et vous préparer à cette nouvelle norme.

Gestion du Cache

fetch fn

L’une des nouveautés qui attire le plus l’attention est la gestion du cache.

Dans Next.js 15, la mise en cache des appels via la fonction fetch est devenue moins agressive qu’auparavant. Par défaut, les requêtes ne sont plus mises en cache sur le serveur.

Si vous voulez forcer la mise en cache, il vous faudra maintenant spécifier l’option cache: force-cache. Sinon, le comportement par défaut est no-store, ce qui signifie que les appels seront effectués à chaque fois sans passer par le cache.

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })

GET Route Handlers

Autre nouveauté concernant le cache, les Route Handlers pour les requêtes avec le verbe HTTP GET ne sont plus mis en cache par défaut.

Cela signifie que si vous utilisez une route API GET avec l’app-router, cette route ne bénéficiera plus du cache par défaut, ce qui peut impacter les performances selon vos besoins.

Client Router Cache

La gestion du cache côté client a également évolué. Le cache du client router est devenu lui aussi moins agressif, avec une staleTime désormais définie à 0.

Cela implique que vos pages seront rafraîchies à chaque navigation, sauf dans des cas particuliers, comme le retour arrière, qui s’appuiera toujours sur le cache.

Support de React 19

Next.js 15 est aligné avec React 19, qui est encore en Release Candidate. Ce support apporte notamment des améliorations significatives pour les performances avec l’intégration du React Compiler.

Le React Compiler permet d’optimiser automatiquement certaines parties du code en ajoutant pour vous des hooks comme useMemo et useCallback, afin de réduire les re-rendus inutiles. Un excellent moyen de gagner en performance sans effort supplémentaire de votre part.

Turbopack

Bonne nouvelle pour ceux qui attendaient cette fonctionnalité : Turbopack est désormais stable avec Next.js 15.

Successeur de Webpack, Turbopack offre de meilleures performances pour les temps de compilation et les rafraîchissements de page pendant le développement. Pour l’utiliser, il suffit de lancer votre serveur de développement avec l’option --turbo.

Nouveau composant Next Form

Une autre nouveauté importante est l’introduction du composant Next Form, qui vous permet de simplifier la gestion des formulaires dans vos applications.

Attention toutefois, ce composant est conçu pour des formulaires liés à une navigation, comme un formulaire de recherche par exemple. Il peut précharger la page vers laquelle vous allez naviguer, réduisant ainsi le temps de réponse de votre application.

Ce composant n’est pas recommandé pour les formulaires classiques comme la création de compte ou la connexion, mais il peut s’avérer très utile pour des scénarios spécifiques de navigation.

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );

Conclusion

Next.js 15 introduit plusieurs nouveautés intéressantes et des ajustements importants. Entre l’évolution de la gestion du cache, les changements asynchrones, le support de React 19 et l’arrivée de Turbopack, cette version continue d’affirmer Next.js comme l’un des frameworks front-end les plus puissants et innovants.

Si vous souhaitez migrer, n’oubliez pas d’utiliser le CLI Codemod pour faciliter la transition, et prenez bien en compte les breaking changes liés aux APIs asynchrones.

À votre avis, quelle est la fonctionnalité qui vous impactera le plus dans Next.js 15 ? Laissez-moi vos réponses en commentaire !

Liens utiles

Page de release Next.js 15