Next.js 16.4 : un cache mieux maîtrisé et des applications plus légères

Next.js 16.4 est disponible depuis le 6 octobre 2026. Cache, préchargement, React 19.3 et migrations par agent : cette version touche aussi aux performances de Turbopack.

Cache Components devient le modèle des nouveaux projets

Les nouvelles applications App Router créées avec les réglages recommandés de create-next-app activent désormais Cache Components et Partial Prefetching. Une même page peut combiner du contenu prérendu, des résultats réutilisables et des éléments calculés à la demande, puis transmis progressivement au navigateur.

Le cache reste explicite : la directive 'use cache' désigne les fonctions ou composants concernés, tandis que cacheLife() règle leur durée de conservation. Activer le modèle ne met donc pas automatiquement toute l’application en cache. Le contenu dynamique peut s’afficher progressivement avec Suspense.

Les projets existants doivent adopter explicitement ce modèle avec deux réglages :

const nextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
};

export default nextConfig;

Des garanties statiques et un préchargement plus précis

La nouvelle option ensureStatic, exportée depuis une page ou un layout, protège les routes qui doivent rester statiques. Avec export const ensureStatic = 'navigation', le build échoue si la navigation complète nécessite du contenu calculé à la requête. Une règle placée dans un layout s’applique aussi aux pages qu’il contient.

Deux niveaux plus ciblés existent : 'shell' pour la structure initiale de la route, et 'prefetch' pour le contenu chargé par un préchargement explicite. On peut ainsi garder une base statique et des parties dynamiques.

Les fonctions navigation() et prefetch(), importées depuis next/cache, découpent plus finement le travail réalisé à l’exécution :

• await navigation() reporte le travail du composant et de son sous-arbre jusqu’à la navigation effective, au lieu de l’exécuter pendant le préchargement du lien.
• await prefetch() exclut ce travail de la structure initiale, mais autorise son exécution pendant un préchargement explicite ou la navigation.

Ces API s’utilisent avec Cache Components, le préchargement partiel et une limite Suspense, en dehors d’une fonction mise en cache. Elles concernent le travail réalisé à l’exécution : un prérendu statique peut toujours inclure le contenu.

Turbopack réduit le cache disque et les fichiers de production

Le cache disque de Turbopack occupe 20 à 25 % d’espace en moins, sans configuration supplémentaire : Zstandard compresse les données principales, LZ4 conserve des accès rapides aux métadonnées et la compactation élimine mieux les données périmées.

Le rechargement des modules serveur devient paresseux : la page visible se met à jour, les autres routes attendent une nouvelle requête. Le runtime est partagé entre les routes dans un seul fichier. En production, les noms des classes CSS Modules et des exports JavaScript internes sont raccourcis ; les noms CSS lisibles restent disponibles en développement.

React 19.3 ajoute des outils pour les interfaces

Next.js 16.4 embarque React 19.3. Les View Transitions deviennent stables pour animer les apparitions, disparitions et déplacements d’éléments lors des changements d’interface.

Les Fragment Refs permettent d’interagir avec les éléments DOM regroupés dans un fragment, notamment pour gérer le focus, des événements ou des mesures, sans ajouter de conteneur HTML. La nouvelle API browser() permet de réserver un composant au navigateur, avec un contenu d’attente rendu côté serveur. React 19.3 améliore également la prise en charge des Trusted Types pour les applications qui utilisent ces politiques de sécurité.

Des mises à niveau accompagnées par agent

La commande suivante prépare une migration pour un agent de programmation :

npx next@canary upgrade --agent=latest

L’outil sélectionne une cible et fournit guides, transformations automatiques et vérifications. L’agent applique les changements et traite les incompatibilités. next@canary sert ici à utiliser l’outillage de migration le plus récent ; une application sur le canal stable peut être mise à niveau vers une version stable.

L’option expérimentale agentUpgrade ajoute des rappels pendant next dev ou next build. La politique 'security' vise les correctifs de vulnérabilités, 'latest' les nouvelles versions majeures ou mineures, et false désactive les rappels. Le rappel ne déclenche pas une migration automatique. Des Skills dédiés accompagnent aussi l’adoption de Cache Components et du préchargement partiel.

Autre nouveauté expérimentale : agentFeedback. Activée dans les nouveaux projets avec les réglages recommandés, elle permet à l’agent de préparer des signalements de problèmes. Les projets existants peuvent l’activer dans leur configuration. Les rapports peuvent être modifiés ou abandonnés ; l’envoi exige une validation. L’agent reçoit des consignes pour retirer le code, les secrets et les détails propres au projet. Ce mécanisme exige la télémétrie Next.js et ne fonctionne pas en CI.

Les options expérimentales pour aller plus loin

Un React Compiler en Rust moins gourmand

Introduite dans Next.js 16.3, cette implémentation fonctionne directement dans Turbopack, plutôt que via Babel. Elle demande reactCompiler: true et experimental.turbopackRustReactCompiler: true.

En 16.4, elle ignore plus vite les fichiers inutiles à optimiser et évite certaines optimisations répétées pour le rendu serveur des Client Components. L’équipe annonce aussi 30 % de mémoire et 15 % de temps de compilation en moins pour le React Compiler, grâce à des changements d’allocation. Ces chiffres ne décrivent pas l’ensemble du build d’une application.

Nettoyage du cache, imports différés et worker threads

• Nettoyage : experimental.turbopackGc: true supprime le travail de compilation devenu inutile, en mémoire et dans le cache disque. Cela inclut les données de routes supprimées et de sessions précédentes ; le nettoyage dépend du cache persistant.
• Imports dynamiques : experimental.turbopackLazyDynamicImports: true compile les imports dynamiques côté client lorsque le navigateur les demande. Cette option concerne le développement ; certains imports next/dynamic restent compilés immédiatement.
• Worker threads : experimental.turbopackPluginRuntimeStrategy: 'workerThreads' fait travailler Babel, PostCSS et les loaders dans un même processus, pour réduire les échanges et la consommation de ressources. Avec Node.js 24.13.1 et les versions suivantes, Next.js revient actuellement aux processus séparés à cause d’un bug de Node.js.

Des dépendances liées hors du projet

experimental.turbopackAdditionalRoots autorise Turbopack à suivre des liens symboliques vers des paquets situés hors de la racine du projet. Cela évite d’élargir cette racine à des dossiers sans rapport avec l’application. Les imports relatifs directs qui sortent d’une racine restent exclus.

Les magasins virtuels globaux de pnpm, Bun, Nub et aube peuvent être intégrés manuellement. Leur prise en charge automatique est prévue ultérieurement.

Un Bundle Analyzer plus utile pour alléger les applications

Le Bundle Analyzer ajoute un résumé des routes client les plus lourdes, un tableau triable, des instantanés comparables et une distinction entre modules critiques pour le rendu et dépendances asynchrones.

La commande npx next analyze permet d’inspecter les dépendances et leurs chaînes d’import.

Le Skill expérimental next-bundle-optimizer donne également accès à ces données à un agent, pour diagnostiquer les ressources trop lourdes et proposer ou appliquer des optimisations. Il s’installe avec :

npx skills add vercel/next.js --skill next-bundle-optimizer

Il peut ensuite être invoqué avec /next-bundle-optimizer. Pour une mise à niveau manuelle du framework, la commande proposée est npm install next@latest. L’adoption du nouveau modèle de cache et des options expérimentales reste une étape distincte, à valider sur les routes et les usages du projet.