Next.js 15 RC

La version Release Candidate (RC) de Next.js 15 est désormais disponible. Cette version anticipée vous permet de tester les dernières fonctionnalités avant la version stable à venir.

• React : Prise en charge de React 19 RC, du compilateur React (expérimental) et améliorations des erreurs d'hydratation
• Mise en cache : Les requêtes fetch, les gestionnaires de route GET et les navigations client ne sont plus mis en cache par défaut
• Pré-rendu partiel (expérimental) : Nouvelle option de configuration pour les Layout et Pages pour une adoption progressive
• next/after (expérimental) : Nouvelle API pour exécuter du code après l'envoi d'une réponse
• create-next-app : Nouveau design et nouveau flag pour activer Turbopack en développement local
• Bundling des packages externes (stable) : Nouvelles options de configuration pour App et Pages Router

Essayez Next.js 15 RC dès aujourd'hui :

npm install next@rc react@rc react-dom@rc

React 19 RC

L'App Router de Next.js est construit sur le canal canary de React pour les frameworks, ce qui a permis aux développeurs d'utiliser et de donner leur avis sur ces nouvelles API React avant la sortie de la version 19.

Next.js 15 RC prend désormais en charge React 19 RC, qui inclut de nouvelles fonctionnalités pour le client et le serveur comme les Actions.

Consultez le guide de mise à niveau de Next.js 15, le guide de mise à niveau de React 19 et regardez le keynote de React Conf pour en savoir plus.

Note : Certaines bibliothèques tierces peuvent ne pas être compatibles avec React 19 pour le moment.

Compilateur React (expérimental)

Le compilateur React est un nouveau compilateur expérimental créé par l'équipe React chez Meta. Le compilateur comprend votre code en profondeur grâce à sa compréhension des sémantiques JavaScript de base et des règles de React, ce qui lui permet d'ajouter des optimisations automatiques à votre code. Le compilateur réduit la quantité de mémoïsation manuelle que les développeurs doivent faire via des API comme useMemo et useCallback - rendant le code plus simple, plus facile à maintenir et moins sujet aux erreurs.

Avec Next.js 15, nous avons ajouté la prise en charge du compilateur React.

Installez babel-plugin-react-compiler :

npm install babel-plugin-react-compiler

Puis, ajoutez l'option experimental.reactCompiler dans next.config.js :

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
module.exports = nextConfig;

Optionnellement, vous pouvez configurer le compilateur pour qu'il fonctionne en mode "opt-in" comme suit :

const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};
 
module.exports = nextConfig;

Note : Le compilateur React n'est actuellement utilisable dans Next.js que via un plugin Babel, ce qui pourrait entraîner des temps de build plus longs.

En savoir plus sur le compilateur React et les options de configuration disponibles pour Next.js.

Améliorations des erreurs d'hydratation

Next.js 14.1 a apporté des améliorations aux messages d'erreur et aux erreurs d'hydratation. Next.js 15 continue sur cette lancée en ajoutant une vue améliorée des erreurs d'hydratation. Les erreurs d'hydratation affichent désormais le code source de l'erreur avec des suggestions pour résoudre le problème.

Par exemple, voici un message d'erreur d'hydratation dans Next.js 14.1 :

Next.js 15 RC a amélioré cela pour obtenir :

Mises à jour de la mise en cache

L'App Router de Next.js a été lancé avec des valeurs par défaut de mise en cache bien définies. Celles-ci étaient conçues pour fournir l'option la plus performante par défaut avec la possibilité de s'en désengager si nécessaire.

Sur la base de vos retours, nous avons réévalué nos heuristiques de mise en cache et leur interaction avec des projets comme le pré-rendu partiel (PPR) et avec des bibliothèques tierces utilisant fetch.

Avec Next.js 15, nous modifions la valeur par défaut de la mise en cache pour les requêtes fetch, les gestionnaires de route GET et le cache du routeur client de "mis en cache par défaut" à "non mis en cache par défaut". Si vous souhaitez conserver le comportement précédent, vous pouvez continuer à opter pour la mise en cache.

Nous continuons à améliorer la mise en cache dans Next.js dans les mois à venir et nous partagerons plus de détails dans l'annonce de la version GA de Next.js 15.

Les requêtes fetch ne sont plus mises en cache par défaut

Next.js utilise l'option de cache de l'API Web fetch pour configurer comment une requête fetch côté serveur interagit avec le cache HTTP persistant du framework :

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

• no-store - récupère une ressource depuis un serveur distant à chaque requête et ne met pas à jour le cache
• force-cache - récupère une ressource depuis le cache (si elle existe) ou un serveur distant et met à jour le cache

Dans Next.js 14, force-cache était utilisé par défaut si aucune option cache n'était fournie, sauf si une fonction dynamique ou une option de configuration dynamique était utilisée.

Dans Next.js 15, no-store est utilisé par défaut si aucune option cache n'est fournie. Cela signifie que les requêtes fetch ne seront pas mises en cache par défaut.

Vous pouvez toujours opter pour la mise en cache des requêtes fetch en :

• Définissant l'option cache à force-cache dans un appel fetch unique
• Définissant l'option de configuration de route dynamic à 'force-static' pour une seule route
• Définissant l'option de configuration de route fetchCache à 'default-cache' pour remplacer toutes les requêtes fetch dans un Layout ou une Page pour utiliser force-cache sauf si elles spécifient explicitement leur propre option cache

Les gestionnaires de route GET ne sont plus mis en cache par défaut

Dans Next.js 14, les gestionnaires de route utilisant la méthode HTTP GET étaient mis en cache par défaut sauf s'ils utilisaient une fonction dynamique ou une option de configuration dynamique. Dans Next.js 15, les fonctions GET ne sont pas mises en cache par défaut.

Vous pouvez toujours opter pour la mise en cache en utilisant une option de configuration de route statique comme export dynamic = 'force-static'.

Les gestionnaires de route spéciaux comme sitemap.ts, opengraph-image.tsx, et icon.tsx, et d'autres fichiers de métadonnées restent statiques par défaut sauf s'ils utilisent des fonctions dynamiques ou des options de configuration dynamique.

Le cache du routeur client ne met plus en cache les composants Page par défaut

Dans Next.js 14.2.0, nous avons introduit un drapeau expérimental staleTimes permettant de configurer le Cache du Routeur.

Dans Next.js 15, ce drapeau reste accessible, mais nous modifions le comportement par défaut pour avoir un staleTime de 0 pour les segments de Page. Cela signifie que lors de la navigation dans votre application, le client reflétera toujours les dernières données provenant du composant Page qui devient actif lors de la navigation. Cependant, certains comportements importants restent inchangés :

• Les données des layouts partagés ne seront pas rechargées depuis le serveur pour continuer à prendre en charge le rendu partiel.
• La navigation avant/arrière restaurera toujours le cache pour garantir que le navigateur puisse restaurer la position de défilement.
• Loading.js restera en cache pendant 5 minutes (ou la valeur de la configuration staleTimes.static).

Vous pouvez opter pour le comportement précédent du Cache du Routeur Client en définissant la configuration suivante :

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
module.exports = nextConfig;

Adoption progressive du Prerendering Partiel (PPR) (Expérimental)

Dans Next.js 14, nous avons introduit le Prerendering Partiel (PPR) - une optimisation combinant le rendu statique et dynamique sur la même page.

Next.js utilise par défaut le rendu statique, sauf si vous utilisez des fonctions dynamiques comme cookies(), headers(), et des requêtes de données non mises en cache. Ces API optent toute une route dans le rendu dynamique. Avec PPR, vous pouvez encapsuler n'importe quelle UI dynamique dans une limite Suspense. Lorsqu'une nouvelle requête arrive, Next.js servira immédiatement une coquille HTML statique, puis rendra et streamera les parties dynamiques dans la même requête HTTP.

Pour permettre une adoption progressive, nous avons ajouté une option de configuration de route experimental_ppr pour activer PPR sur des Layouts et Pages spécifiques :

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>
     </>
  };
}

Pour utiliser cette nouvelle option, vous devez définir la configuration experimental.ppr dans votre fichier next.config.js à 'incremental' :

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
 
module.exports = nextConfig;

Une fois que tous les segments auront PPR activé, il sera considéré comme sûr de définir la valeur ppr à true, et de l'activer pour toute l'application et toutes les routes futures.

Nous partagerons plus d'informations sur notre feuille de route PPR dans notre article de blog Next.js 15 GA.

En savoir plus sur le Prerendering Partiel.

Exécution de code après une réponse avec next/after (Expérimental)

Lors du traitement d'une requête utilisateur, le serveur effectue généralement des tâches directement liées au calcul de la réponse. Cependant, vous pourriez avoir besoin d'effectuer des tâches comme la journalisation, l'analyse et d'autres synchronisations avec des systèmes externes.

Comme ces tâches ne sont pas directement liées à la réponse, l'utilisateur ne devrait pas avoir à attendre leur achèvement. Reporter le travail après avoir répondu à l'utilisateur pose un défi car les fonctions serverless arrêtent le calcul immédiatement après la fermeture de la réponse.

after() est une nouvelle API expérimentale qui résout ce problème en vous permettant de planifier un travail à traiter après la fin du streaming de la réponse, permettant ainsi aux tâches secondaires de s'exécuter sans bloquer la réponse principale.

Pour l'utiliser, ajoutez experimental.after à next.config.js :

const nextConfig = {
  experimental: {
    after: true,
  },
};
 
module.exports = nextConfig;

Ensuite, importez la fonction dans les Composants Serveur, Actions Serveur, Gestionnaires de Route ou Middleware.

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Tâche secondaire
  after(() => {
    log();
  });
 
  // Tâche principale
  return <>{children}</>;
}

En savoir plus sur next/after.

Mises à jour de create-next-app

Pour Next.js 15, nous avons mis à jour create-next-app avec un nouveau design.

Lors de l'exécution de create-next-app, une nouvelle invite demande si vous souhaitez activer Turbopack pour le développement local (par défaut Non).

✔ Souhaitez-vous utiliser Turbopack pour next dev ? … Non / Oui

Le drapeau --turbo peut être utilisé pour activer Turbopack.

npx create-next-app@rc --turbo

Pour faciliter encore plus le démarrage d'un nouveau projet, un nouveau drapeau --empty a été ajouté à la CLI. Cela supprimera tous les fichiers et styles superflus, résultant en une page minimale "hello world".

npx create-next-app@rc --empty

Optimisation du bundling des packages externes (Stable)

Le bundling des packages externes peut améliorer les performances de démarrage à froid de votre application. Dans le Routeur App, les packages externes sont inclus par défaut dans le bundle, et vous pouvez exclure des packages spécifiques en utilisant la nouvelle option de configuration serverExternalPackages.

Dans le Routeur Pages, les packages externes ne sont pas inclus par défaut, mais vous pouvez fournir une liste de packages à inclure en utilisant l'option existante transpilePackages. Avec cette option, vous devez spécifier chaque package.

Pour unifier la configuration entre les Routeurs App et Pages, nous introduisons une nouvelle option, bundlePagesRouterDependencies, pour correspondre à l'inclusion automatique par défaut du Routeur App. Vous pouvez ensuite utiliser serverExternalPackages pour exclure des packages spécifiques si nécessaire.

const nextConfig = {
  // Inclure automatiquement les packages externes dans le Routeur Pages :
  bundlePagesRouterDependencies: true,
  // Exclure des packages spécifiques du bundling pour les Routeurs App et Pages :
  serverExternalPackages: ['nom-du-package'],
};
 
module.exports = nextConfig;

En savoir plus sur l'optimisation des packages externes.

Autres changements

• [Breaking] La version minimale de React est maintenant 19 RC
• [Breaking] next/image : Suppression de squoosh en faveur de sharp comme dépendance optionnelle (PR)
• [Breaking] next/image : Changement du Content-Disposition par défaut à attachment (PR)
• [Breaking] next/image : Erreur lorsque src a des espaces en début ou fin (PR)
• [Breaking] Middleware : Application de la condition react-server pour limiter les imports d'API React non recommandés (PR)
• [Breaking] next/font : Suppression du support du package externe @next/font (PR)
• [Breaking] next/font : Suppression du hachage font-family (PR)
• [Breaking] Caching : force-dynamic définira maintenant un no-store par défaut pour le cache de fetch (PR)
• [Breaking] Config : Activation par défaut de swcMinify (PR), missingSuspenseWithCSRBailout (PR), et outputFileTracing (PR) et suppression des options dépréciées
• [Breaking] Suppression de l'auto-instrumentation pour Speed Insights (doit maintenant utiliser le package dédié @vercel/speed-insights) (PR)
• [Breaking] Suppression de l'extension .xml pour les routes dynamiques de sitemap et alignement des URLs de sitemap entre développement et production (PR)
• [Amélioration] Metadata : Mise à jour des fallbacks des variables d'environnement pour metadataBase lors de l'hébergement sur Vercel (PR)
• [Amélioration] Correction du tree-shaking avec des imports mixtes namespace et nommés depuis optimizePackageImports (PR)
• [Amélioration] Routes Parallèles : Fourniture de routes catch-all non matchées avec tous les params connus (PR)
• [Amélioration] La config bundlePagesExternals est maintenant stable et renommée en bundlePagesRouterDependencies
• [Amélioration] La config serverComponentsExternalPackages est maintenant stable et renommée en serverExternalPackages
• [Amélioration] create-next-app : Les nouveaux projets ignorent tous les fichiers .env par défaut (PR)
• [Docs] Amélioration de la documentation sur l'authentification (PR)
• [Docs] Package @next/env (PR)

Pour en savoir plus, consultez le guide de mise à niveau.

Contributeurs

Next.js est le résultat du travail combiné de plus de 3 000 développeurs individuels, de partenaires industriels comme Google et Meta, et de notre équipe principale chez Vercel. Cette version a été rendue possible par :

• L'équipe Next.js : Andrew, Balazs, Ethan, Janka, Jiachi, Jimmy, JJ, Josh, Sam, Sebastian, Sebbie, Shu, Steven, Tim, Wyatt, et Zack.
• L'équipe Turbopack : Alex, Benjamin, Donny, Leah, Maia, OJ, Tobias, et Will.
• Docs Next.js : Delba, Steph, Michael, Anthony, et Lee.

Un grand merci à @devjiwonchoi, @ijjk, @Ethan-Arrowood, @sokra, @kenji-webdev, @wbinnssmith, @huozhi, @domdomegg, @samcx, @Jaaneek, @evanwinter, @wyattjoh, @kdy1, @balazsorban44, @feedthejim, @ztanner, @ForsakenHarmony, @kwonoj, @delbaoliveira, @stipsan, @leerob, @shuding, @xiaohanyu, @timneutkens, @dvoytenko, @bobaaaaa, @bgw, @gaspar09, @souporserious, @unflxw, @kiner-tang, @Ehren12, @EffectDoplera, @IAmKushagraSharma, @Auxdible, @sean-rallycry, @Jeffrey-Zutt, @eps1lon, @jeanmax1me, @unstubbable, @NilsJacobsen, @PaulAsjes, @adiguno, @ryan-nauman, @zsh77, @KagamiChan, @steveluscher, @MehfoozurRehman, @vkryachko, @chentsulin, @samijaber, @begalinsaf, @FluxCapacitor2, @lukahartwig, @brianshano, @pavelglac, @styfle, @symant233, @HristovCodes, @karlhorky, @jonluca, @jonathan-ingram, @mknichel, @sopranopillow, @Gomah, @imddc, @notrab, @gabrielrolfsen, @remorses, @AbhiShake1, @agadzik, @ryota-murakami, @rishabhpoddar, @rezamauliadi, @IncognitoTGT, @webtinax, @BunsDev, @nisabmohd, @z0n, @bennettdams, @joeshub, @n1ckoates, @srkirkland, @RiskyMH, @coopbri, @okoyecharles, @diogocapela, @dnhn, @typeofweb, @davidsa03, @imranolas, @lubieowoce, @maxhaomh, @mirasayon, @blvdmitry, @hwangstar156, @lforst, @emmerich, @christian-bromann, @Lsnsh, @datner, @hiro0218, @flybayer, @ianmacartney, @ypessoa, @ryohidaka, @icyJoseph, @Arinji2, @lovell, @nsams, @Nayeem-XTREME, @JamBalaya56562, @Arindam200, @gaojude, @qqww08, @todor0v, @coltonehrman, et @wiesson pour leur aide !