Discussion :

[Eliora]

Next.js 16.4 est disponible avec des performances améliorées grâce à Turbopack et React 19.3, et une réduction de 20 à 25 % du stockage du cache disque

Next.js a publié la version 16.4, qui apporte des améliorations significatives en termes de performances grâce à des optimisations avancées de Turbopack et à une intégration complète avec React 19.3. Cette mise à jour introduit des noms de classes CSS Module plus courts dans les builds de production, ainsi qu'un système de « mangling » des exportations pour réduire la longueur des noms d'exportation JavaScript. Pour les développeurs utilisant le cache disque de Turbopack, la nouvelle version réduit les besoins en stockage de 20 à 25 % grâce à la compression Zstandard. Au-delà des améliorations apportées à l'infrastructure de base, Next.js 16.4 enrichit les outils de développement grâce à un analyseur de paquets mis à jour.

Next.js est un framework open source de développement web full-stack créé par la société privée Vercel, qui permet de développer des applications web basées sur React avec rendu côté serveur et rendu statique. La documentation de React mentionne Next.js parmi les « chaînes d’outils recommandées » et le conseille aux développeurs qui souhaitent « créer un site web avec rendu côté serveur à l’aide de Node.js ». Alors que les applications React traditionnelles ne peuvent afficher leur contenu que côté client dans le navigateur, Next.js étend cette fonctionnalité pour inclure les applications rendues côté serveur.

Next.js a publié la version 16.4, qui apporte des améliorations significatives en termes de performances grâce à des optimisations avancées de Turbopack et à une intégration complète avec React 19.3. Cette mise à jour introduit des noms de classes CSS Module plus courts dans les builds de production, ainsi qu’un système de « mangling » des exportations pour réduire la longueur des noms d’exportation JavaScript ; ces deux fonctionnalités visent à réduire la taille des bundles sans compromettre la facilité de débogage dans les environnements de développement.

Pour les développeurs utilisant le cache disque de Turbopack, la nouvelle version réduit les besoins en stockage de 20 à 25 % grâce à la compression Zstandard, sans nécessiter de modifications de configuration. Cette version apporte plusieurs fonctionnalités expérimentales visant à rationaliser les workflows de développement. Le compilateur React basé sur Rust, introduit dans la version 16.3, bénéficie de mises à jour notables, notamment une vérification rapide qui ignore les optimisations inutiles et des modifications de l’allocation de mémoire qui réduisent le temps de compilation de 15 %.

Le HMR (Hot Module Replacement) « paresseux » sur le serveur garantit que les mises à jour du serveur ne sont compilées que lorsque des routes sont sollicitées, plutôt que d’appliquer les mises à jour à toutes les pages précédemment visitées, ce qui réduit la charge de traitement en arrière-plan. De plus, Turbopack fournit désormais son runtime sous la forme d’un seul bloc partagé entre les routes, ce qui améliore les taux de réussite du cache et les vitesses de téléchargement.

Au-delà des améliorations apportées à l’infrastructure de base, Next.js 16.4 enrichit les outils de développement grâce à un analyseur de paquets mis à jour, doté d’une nouvelle page d’accueil récapitulative des routes qui met en évidence les routes client les plus volumineuses et propose des vues sous forme de tableaux triables. Une fonctionnalité expérimentale, « next-bundle-optimizer », diagnostique désormais automatiquement les problèmes liés à l’encombrement du code JavaScript et des ressources, et propose des améliorations. Elle est accessible via les agents IA après la mise à jour. Les développeurs peuvent activer le compilateur React et explorer ces nouvelles fonctionnalités via la configuration de Next.js. La documentation complète est disponible sur le site officiel.

Voici l'annonce de la sortie de Next.js 16.4 :

Next.js 16.4

Au fil des versions 16.x, nous avons mis en place un nouveau modèle de programmation qui répond à bon nombre des difficultés que vous avez rencontrées avec App Router depuis le début :

• Il permet un chargement initial rapide, même pour les pages personnalisées
  
• Il offre aux applications rendues côté serveur une navigation instantanée côté client
  
• Il rend la mise en cache facultative, déclarative et modulable

Ce nouveau modèle de programmation s’appelle « Cache Components » et deviendra la norme par défaut dans Next.js 17. Avant cette version, nous ne le recommandions pas de manière générale, car dans certains cas, il ne permettait pas d’offrir les mêmes garanties en termes de coût et de performances que le modèle précédent. Cette version inclut des fonctionnalités clés qui comblent ces lacunes. À partir de Next.js 16.4, nous sommes ravis de recommander Cache Components comme le meilleur choix pour toutes les applications Next.js.

Dès aujourd’hui, toutes les nouvelles applications créées avec create-next-app auront Cache Components activé par défaut. Les projets « greenfield » peuvent profiter sans réserve de tous les avantages du nouveau modèle. Pour les applications existantes, nous avons investi dans de meilleurs outils destinés aux agents afin de faciliter la migration des bases de code vers le nouveau modèle. La nouvelle commande next upgrade --agent fournit aux agents des instructions spécifiques à chaque version pour la mise à niveau de votre application, et des « Skills » dédiés aident les agents à effectuer les refactorisations nécessaires à l’adoption des « Cache Components ».

Next.js 16.4 inclut également plusieurs améliorations prêtes à l’emploi pour toutes les applications Next.js, notamment une réduction de la consommation de mémoire et de l’espace disque en développement, des temps de compilation réduits, des bundles de production plus légers et React 19.3.

Que sont les « Cache Components »?

Les composants de cache constituent un ensemble de fonctionnalités qui vous permettent de marquer certaines parties de votre arborescence de composants comme pouvant faire l'objet d'une mise en cache. Considérez l'option 'use cache' comme une version au niveau du composant de l'en-tête HTTP « Cache-Control » :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { cacheLife } from 'next/cache';
 
export default async function DashboardPage() {
  const currentUser = await getCurrentUser();
 
  return (
    <div>
      <p>Welcome, {currentUser.name}</p>
 
      <Suspense fallback={<Loading />}>
        <Projects userId={currentUser.id} />
      </Suspense>
    </div>
  );
}
 
async function Projects({ userId }) {
  'use cache';
  cacheLife('hours');
 
  const projects = await db.query.projects.findMany({
    where: eq(projectsTable.userId, userId),
  });
 
  return (
    <div>
      {projects.map((project) => (
        <p key={project.id}>{project.name}</p>
      ))}
    </div>
  );
}

Next.js interprète ces annotations 'use cache' lors du rendu de vos pages, en mettant en cache l'interface utilisateur de votre composant dans le navigateur (lors des navigations côté client) et, de manière facultative, sur le serveur (lors du rendu côté serveur ou à l'avance lors de la compilation). Ces annotations composables vous permettent de combiner la mise en cache côté client, la mise en cache côté serveur entièrement modulable et le rendu à la demande au sein d’une même page ; elles remplacent les comportements de mise en cache implicites des versions précédentes d’App Router.

Nouveautés concernant les « Cache Components »

Dans cet article, nous utilisons le terme « Cache Components » pour désigner le nouveau modèle de programmation, que vous pouvez utiliser dès aujourd’hui en activant deux options dans votre configuration Next.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
};
 
export default nextConfig;

À l’origine, Cache Components était proposé sans la fonctionnalité de préchargement partiel, mais celle-ci fait désormais partie intégrante du modèle. Voici maintenant les nouveautés de Cache Components dans la version 16.4.

Garantir le caractère statique des shells, des préchargements ou des pages

L’une des fonctionnalités phares de 'use cache' est la possibilité de créer des pages qui combinent du contenu statique et dynamique dans une seule réponse du serveur. Par exemple, vous pouvez afficher l’avatar de l’utilisateur actuel à côté d’un article de blog qui, par ailleurs, est pré-rendu de manière statique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
export default function Page() {
  return (
    <>
      <UserAvatar />
      <Content />
    </>
  );
}
 
// This component renders at request time
async function UserAvatar() {
  const currentUser = await getCurrentUser();
 
  // ...
}
 
// This component is statically prerendered
async function Content() {
  'use cache';
 
  await fetch('...');
 
  // ...
}

Next.js peut servir l'article de blog pré-rendu à partir du cache (comme le dossier /public de votre application ou un CDN) et afficher l'UserAvatar au moment de la requête, le tout dans une seule et même réponse HTTP. C’est cette flexibilité qui vous permet de créer des applications dotées d’interfaces utilisateur sophistiquées, sans sacrifier la vitesse ni le dynamisme. Mais il arrive parfois que vous souhaitiez créer une application avec des pages entièrement statiques. Dans ces cas-là, un seul composant dynamique peut nuire aux performances ou à la rentabilité d’un site par ailleurs optimisé.

Dans Next.js 16.4, ensureStatic offre un moyen simple de garantir que la coque, la prélecture ou la navigation complète d’une route soit statique. Pour les applications qui souhaitent éviter toute charge de calcul involontaire et réduire leurs coûts de serveur, cela vous permet d’empêcher qu’un composant dynamique ne s’introduise accidentellement dans une route. Par exemple, si nous voulions nous assurer que notre page d’article de blog de l’exemple ci-dessus soit toujours statique, et qu’il ne soit jamais possible d’y ajouter un composant dynamique tel que UserAvatar, nous pourrions ajouter export const ensureStatic à la route :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
export const ensureStatic = 'navigation';
 
export default function Page() {
  return (
    <>
      <UserAvatar /> {/* 🔴 This component fails the build */}
      <Content />
    </>
  );
}

En définissant ensureStatic sur « navigation », Next.js fera échouer la compilation si du contenu dynamique est inclus dans cette page, garantissant ainsi que les navigations vers cette route ne s'afficheront jamais au moment de la requête. Bien que « navigation » soit la valeur la plus restrictive, vous pouvez également définir ensureStatic sur « prefetch » (pour garantir que les liens comportant une prélecture explicite vers cette route ne récupèrent que du contenu statique) ou sur « shell » (pour garantir que seul du contenu statique soit récupéré lors de la première découverte de cette route) si vous avez besoin d’un contrôle plus fin.

En plus de l’utiliser sur des pages individuelles, vous pouvez également ajouter ensureStatic à une mise en page pour appliquer les mêmes garanties à toutes les pages de cette mise en page. Par exemple, vous pourriez ajouter ensureStatic = 'navigation' à la mise en page racine pour garantir facilement que toutes les pages de navigation de votre site soient statiques. Ensuite, vous pourrez l'étendre aux mises en page imbriquées si certaines pages commencent à nécessiter du contenu dynamique. De nombreuses applications dynamiques n'auront pas besoin de cette fonctionnalité, mais pour les sites optimisés tels que les boutiques en ligne, les pages marketing ou les blogs, ensureStatic constitue un moyen simple de se prémunir contre un rendu indésirable au moment de la requête.

Exclure du contenu d'un préchargement

Le préchargement est un moyen efficace d’améliorer l’expérience utilisateur de vos applications Next.js. En utilisant <Link prefetch> ou useRouter().prefetch(), vous pouvez éliminer les états de chargement en pré-renduant l’interface utilisateur mise en cache d’une page avant que la navigation effective n’ait lieu. La nouvelle API de navigation vous permet d’exclure le chargement du contenu mis en cache lors d’une préchargement, ce qui revient à le reporter jusqu’à ce qu’une navigation effective ait lieu.

Nouvelles fonctionnalités de l’agent

Nous investissons dans les outils de l’agent afin de faire de Next.js un système qui contribue en permanence à la sécurité et à la mise à jour de votre application. Next.js 16.4 s’appuie sur notre documentation, nos « Skills » et nos outils de vérification, grâce aux mises à jour de l’agent et à vos retours d’expérience, ce qui nous permet de tirer des enseignements de la manière dont vous développez votre application et d’y apporter des améliorations.

Mises à jour de l’agent

La nouvelle option --agent de la commande next upgrade aide votre agent à mettre à jour votre application de A à Z. Elle vérifie la version installée, sélectionne une version cible et prépare les guides de migration, les modifications de code nécessaires et les étapes de vérification pour votre agent. L’agent applique la mise à jour, résout les problèmes de migration et vérifie que votre application fonctionne toujours.

Vous ou votre agent pouvez l’exécuter depuis le répertoire de votre application :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

npx next@canary upgrade --agent=latest

L'utilisation de next@canary permet d'exécuter les derniers outils de mise à niveau, même si votre application utilise une ancienne version de Next.js. Votre agent bénéficie ainsi de conseils à jour pour mettre votre application à la dernière version disponible. Se mettre à jour est la première étape. Pour vous aider à rester à jour, Next.js 16.4 introduit la fonctionnalité expérimentale .agentUpgrade. Lorsque vous ou votre agent exécutez next dev ou next build, Next.js vous avertit automatiquement lorsqu’une mise à jour pertinente est disponible, vous évitant ainsi d’avoir à vérifier vous-même. Lorsque vous choisissez de procéder à la mise à jour, le même workflow d’agent est lancé, conformément à la politique que vous avez configurée.

Vous pouvez configurer ces rappels dans votre fichier de configuration Next.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    agentUpgrade: 'security',
  },
};
 
export default nextConfig;

• 'security' (politique par défaut) : vous rappelle les mises à jour qui corrigent les vulnérabilités connues affectant votre version installée.
  
• 'latest' : vous rappelle les nouvelles versions majeures ou mineures et utilise la dernière politique de mise à jour pour maintenir votre application à jour.
  
• false : désactive les rappels de mise à jour.

Nous travaillons également sur une future politique pour cet indicateur afin d’aider les agents à adopter de nouvelles fonctionnalités et les changements de modèle de programmation de manière idiomatique, comme la migration vers les composants de cache. Aujourd’hui, vous pouvez utiliser nos Skills pour adopter les composants de cache et la prélecture partielle afin que votre agent vous aide à migrer vers le nouveau modèle.

Retours d'agents

Les agents de codage sont souvent confrontés à des erreurs de framework, à une documentation peu claire ou à des solutions de contournement lors du développement et de la mise à jour d'applications. Le nouveau workflow expérimental de retours d'agents leur permet de rédiger des brouillons de rapports que vous pouvez examiner et, le cas échéant, envoyer à l'équipe Next.js. Les retours d'agents sont activés par défaut lorsque vous créez une nouvelle application avec les paramètres recommandés de create-next-app. Pour les applications existantes, vous pouvez activer cette fonctionnalité via votre configuration Next.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    agentFeedback: true,
  },
};
 
export default nextConfig;

Une fois cette fonctionnalité activée, Next Dev ajoute des instructions permettant à votre agent de collecter les problèmes potentiels au fur et à mesure de son fonctionnement. Une fois la tâche terminée, l’agent prépare des brouillons de rapports et les ouvre dans votre navigateur pour que vous puissiez les examiner. L’agent a pour consigne d’omettre le code source, les journaux, les informations confidentielles et les détails spécifiques au projet. Vous pouvez modifier ou rejeter chaque rapport, et rien n’est envoyé tant que vous n’avez pas sélectionné « Envoyer des commentaires ». Les commentaires de l’agent nécessitent l’activation de Next.js Telemetry et ne s’exécutent pas en CI.

Améliorations pour toutes les applications

Réduction de la taille du cache disque. Dans la version 16.4, le cache disque de Turbopack utilise 20 à 25 % d’espace en moins, sans nécessiter de modification de configuration. Le cache utilise désormais la compression Zstandard pour les données qui occupent le plus d’espace, tout en conservant LZ4 pour les métadonnées afin de garantir des recherches rapides dans le cache. Nous avons également amélioré nos routines de compactage afin de supprimer plus efficacement les données obsolètes.

HMR « paresseux » côté serveur. Auparavant, la modification d’un module serveur partagé pouvait déclencher des mises à jour pour des pages que vous aviez consultées plus tôt au cours de la session de développement, même si vous ne les consultiez plus. Dans la version 16.4, Turbopack compile et applique les mises à jour côté serveur uniquement lorsqu’une requête en a besoin. La page que vous consultez continue de se mettre à jour au fur et à mesure que vous la modifiez, tandis que les autres routes attendent d’être à nouveau sollicitées. Cela réduit le travail en arrière-plan inutile lorsque vous naviguez dans votre application.

Environnement d'exécution partagé de Turbopack. Turbopack fournit désormais son environnement d'exécution sous la forme d'un seul bloc partagé entre les routes. Cela réduit la taille des téléchargements et améliore les taux de réussite du cache.

Paquets de production plus légers. Dans la version 16.4, Turbopack génère des noms de classes CSS Module plus courts en production, ce qui réduit la taille des feuilles de style ainsi que celle du code HTML et JavaScript qui y fait référence. En environnement de développement, les noms de classes plus longs sont conservés pour faciliter le débogage. De plus, Turbopack utilise désormais le « mangling » des exportations pour réduire encore davantage la taille des paquets en raccourcissant les noms d’exportation JavaScript internes utilisés pour connecter les modules.

React 19.3. Next.js 16.4 intègre React 19.3, qui apporte les fonctionnalités stables « View Transitions » et « Fragment Refs », la nouvelle API browser() et bien plus encore.

Nouvelles fonctionnalités expérimentales

Compilateur React en Rust. Le compilateur React optimise automatiquement le rendu des composants, réduisant ainsi le recours à la mémorisation manuelle. Sa version expérimentale en Rust, introduite dans la version 16.3, s’exécute directement au sein de Next.js plutôt que via Babel. Dans la version 16.4, un nouveau contrôle rapide lui permet d’ignorer les fichiers qui ne nécessitent pas d’optimisation. Il évite également de répéter ces optimisations lors de la création de composants client pour le rendu serveur, ce qui réduit le travail nécessaire à la compilation de votre application.

La version 16.4 inclut également de nombreuses mises à jour du compilateur qui améliorent les performances et la précision. L'équipe Turbopack a apporté des modifications à l'allocation de mémoire qui ont permis de réduire la consommation de mémoire du compilateur React de 30 % et le temps de compilation de 15 %.

Nettoyage du cache disque. Au fur et à mesure que vous modifiez votre application, Next.js peut conserver dans le cache des éléments de compilation qui ne sont plus nécessaires. Dans la version 16.4, un ramasse-miettes expérimental supprime ces éléments inutilisés à la fois de la mémoire et du cache disque, ce qui contribue à réduire l'utilisation des ressources lors de longues sessions de développement. Il peut également récupérer les données obsolètes issues de sessions précédentes, telles que les éléments mis en cache pour des routes que vous avez supprimées.

Importations dynamiques différées. Les importations dynamiques vous permettent de différer le chargement du code, mais Next.js compile généralement ce code à l'avance pendant le développement. Dans la version 16.4, vous pouvez choisir de ne compiler les importations dynamiques côté client que lorsque le navigateur les sollicite. Cela réduit la charge de compilation initiale pour le code que vous n'avez pas encore utilisé, comme une bibliothèque chargée avec import() après avoir cliqué sur un bouton. Certaines importations next/dynamic sont encore compilées de manière anticipée.

Threads de travail. Turbopack exécute des outils tels que Babel, PostCSS et les chargeurs webpack dans des processus Node.js distincts qui communiquent avec lui via des sockets. Avec les threads de travail, ces outils s'exécutent au sein d'un seul et même processus. Cela permet d'éviter la surcharge liée aux processus distincts et à la communication via des sockets, et vise à réduire l'utilisation de la mémoire et du processeur pendant le développement et les compilations. Sous Node.js 24.13.1 et versions ultérieures, Next.js utilise actuellement des processus enfants en raison d'un bug de Node.js.

Prise en charge des répertoires racines supplémentaires et des dépôts virtuels globaux. Next.js 16.4 peut suivre les dépendances accessibles via des liens symboliques situées en dehors du répertoire racine de votre projet en vous permettant de déclarer des répertoires racines supplémentaires. Cela facilite le travail sur des paquets locaux liés sans avoir à étendre le répertoire racine du projet pour inclure des répertoires sans rapport. Cela permet également l’intégration manuelle avec les dépôts virtuels globaux de pnpm, Bun, Nub et aube, qui partagent les dépendances installées entre les projets et les arborescences de travail afin d’accélérer les installations. L’intégration automatique est prévue pour une prochaine version.

Turbopack Bundle Analyzer. Cette version apporte des fonctionnalités importantes à Turbopack Bundle Analyzer. Il permet désormais :

• De mettre en évidence les routes client les plus volumineuses dans une nouvelle page d’accueil récapitulative des routes.
  
• D’offrir un nouveau tableau permettant de trier rapidement les éléments qui contribuent le plus au volume des ressources d’une route.
  
• Crée automatiquement des instantanés des analyses que vous effectuez au fil du temps et permet de comparer les bundles à mesure que votre application évolue.
  
• Distingue les modules situés sur le chemin de rendu critique et vous permet de filtrer les dépendances asynchrones lors de l’exploration.

L'analyseur de paquets intègre désormais une fonctionnalité expérimentale appelée Next-Bundle-Optimizer qui permet de détecter, de diagnostiquer et d'optimiser automatiquement la quantité de code JavaScript et d'autres ressources fournies par votre application.


Source : Annonce de Next.js 16.4

Et vous ?

Pensez-vous que cette annonce est crédible ou pertinente ?
Quel est votre avis sur le sujet ?

Voir aussi :

Le framework open source de développement web full-stack Next.js 16.3 est disponible, apportant des gains de performances en réduisant la consommation de mémoire du serveur jusqu'à 90 %

Comment nous avons reconstruit Next.js avec l'IA en une semaine, l'interface API Next.js vinext permet de créer des applications de production jusqu'à 4 fois plus rapidement, par Steve Faulkner

La version 3.0 de SvelteKit, le framework d'application officiel de Svelte, est disponible, et se présente comme un framework backend à l'instar de Next.js, mais avec moins de complications