Publié le 26 octobre 2023. Next.js 16, la dernière version du framework web open source développé par Vercel, introduit des changements majeurs en matière de gestion du cache, de performances et d’expérience développeur, marquant une évolution significative pour les créateurs d’applications web full-stack.
- Next.js 16 intègre des « Composants de cache » offrant un contrôle précis sur la mise en cache des données et des éléments d’interface.
- Turbopack, le bundler de nouvelle génération, devient désormais l’outil par défaut pour les nouveaux projets, promettant des temps de compilation et de rafraîchissement considérablement réduits.
- Le système de routage a été optimisé avec la déduplication de mise en page et la prélecture incrémentielle pour des transitions plus fluides entre les pages.
La mise à jour la plus notable de Next.js 16 réside dans sa nouvelle approche de la mise en cache. Contrairement aux versions précédentes où le comportement de mise en cache pouvait être imprévisible, les développeurs disposent désormais d’un contrôle explicite grâce à la directive « utiliser le cache ». Cette fonctionnalité permet de mettre en cache des pages, des composants et des fonctions spécifiques, en s’appuyant sur le compilateur pour générer automatiquement des clés de cache. Cette approche, combinée au pré-rendu partiel introduit en 2023, offre une flexibilité accrue pour optimiser les performances sans compromettre l’expérience utilisateur.
Parallèlement, Turbopack, initialement disponible en version bêta, atteint la stabilité et devient le bundler par défaut pour tous les nouveaux projets Next.js. Les premiers retours sont encourageants : plus de 50 % des sessions de développement utilisent déjà Turbopack, et les développeurs signalent des temps de rafraîchissement jusqu’à 10 fois plus rapides et des builds de production 2 à 5 fois plus rapides. Il reste possible d’utiliser Webpack pour les projets nécessitant des configurations personnalisées, en utilisant les commandes next dev --webpack ou next build --webpack.
Le système de routage a également bénéficié d’améliorations significatives. La déduplication de la mise en page permet d’éviter le téléchargement redondant de composants partagés lors de la prélecture de plusieurs URL, optimisant ainsi les temps de chargement. Ces optimisations contribuent à une navigation plus rapide et plus fluide pour les utilisateurs.
L’annonce de Next.js 16 a été accueillie favorablement par la communauté des développeurs. Phil Collins, un développeur reconnu, a déclaré :
« Cela ressemble à une mise à niveau fondamentale »
Phil Collins, développeur
et a souligné que les changements permettent de repenser l’architecture des applications plutôt que de se contenter de solutions de contournement.
Cependant, le déploiement de Next.js 16 ne s’est pas déroulé sans heurts pour tout le monde. Certains développeurs ont rencontré des difficultés lors de la mise à niveau, notamment en raison de l’utilisation de NodeJS comme environnement d’exécution pour les middlewares. Un développeur a même documenté un incident de production :
« NextJS 16 a interrompu notre production »
Développeur anonyme
. Un fil de discussion sur Reddit a révélé des expériences variées, certains développeurs ayant réussi la migration en quelques jours, tandis que d’autres ont nécessité plusieurs semaines. Un utilisateur a notamment partagé son expérience de mise à niveau d’une application monolithique multi-tenant :
« J’ai mis à niveau une application NextJS 14 monolithique multi-tenant vers NextJS 16. La compilation est instantanée par rapport à NextJS 14. L’ensemble du processus a pris environ 3 jours »
Utilisateur Reddit
.
Pour faciliter la transition, Vercel propose une CLI de mise à niveau automatisée accessible via la commande npx @next/codemod@canary upgrade latest. Les développeurs peuvent également choisir d’effectuer une mise à niveau manuelle en utilisant npm install next@latest react@latest react-dom@latest. Il est important de noter que la version minimale de Node.js a été augmentée à 20.9.0, et que les paramètres asynchrones et searchParams sont désormais obligatoires. De plus, le fichier middleware.ts a été remplacé par proxy.ts pour clarifier la limite du réseau. L’API revalidateTag() requiert désormais un profil cacheLife comme deuxième argument pour un comportement obsolète lors de la revalidation.
Des informations détaillées sur la migration sont disponibles dans la documentation officielle de mise à niveau.
Next.js est un framework open source développé et maintenu par Vercel. Il s’appuie sur React et offre des fonctionnalités de rendu côté serveur, de génération de sites statiques et de routage avancé, permettant ainsi de créer des applications web performantes et prêtes pour la production. Next.js bénéficie d’une large adoption au sein de l’écosystème de développement web et est pris en charge par de nombreuses plateformes de déploiement et fournisseurs d’hébergement.