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 |
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> ); } |
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 |
1 2 3 4 5 6 7 8 | import type { NextConfig } from 'next'; const nextConfig: NextConfig = { cacheComponents: true, partialPrefetching: true, }; export default nextConfig; |
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 |
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('...'); // ... } |
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 |
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 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 |
npx next@canary upgrade --agent=latest
Vous pouvez configurer ces rappels dans votre fichier de configuration Next.js :
| Code : | Sélectionner tout |
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 |
1 2 3 4 5 6 7 8 9 | import type { NextConfig } from 'next'; const nextConfig: NextConfig = { experimental: { agentFeedback: true, }, }; export default nextConfig; |
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...
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.