Next.js 16.1, le framework open source de développement web full-stack, est désormais disponible avec la mise en cache du système de fichiers Turbopack, un analyseur de bundles Next.js et bien plus encore

La version 16.1 de Next.js, le framework de développement web open source, est désormais disponible. Cette mise à jour stabilise et active par défaut la mise en cache du système de fichiers Turbopack pour le serveur de développement, ce qui permet de réduire considérablement les temps de compilation dans les grands projets. Elle introduit également un nouvel outil expérimental, Bundle Analyzer, pour aider les développeurs à optimiser la taille des bundles serveur et client, ainsi que plusieurs autres améliorations.

Next.js est un framework open source de développement web full-stack créé par la société privée Vercel, qui fournit des applications web basées sur React avec rendu côté serveur et rendu statique. La documentation React mentionne Next.js parmi les « chaînes d'outils recommandées » et le conseille aux développeurs qui « créent un site web rendu côté serveur avec Node.js ». Alors que les applications React traditionnelles ne peuvent rendre leur contenu que dans le navigateur côté client, Next.js étend cette fonctionnalité pour inclure les applications rendues côté serveur. Les droits d'auteur et les marques commerciales de Next.js sont détenus par Vercel, qui assure également la maintenance et dirige son développement open source.

Next.js 16.1 est la dernière mise à jour du célèbre framework open source React, qui met l'accent sur des workflows de développement plus rapides et une plus grande stabilité. Les développeurs bénéficieront d'améliorations notables apportées à Turbopack et aux outils de projet. La mise en cache du système de fichiers Turbopack pour le serveur de développement est désormais stable et activée par défaut. Elle stocke les artefacts du compilateur sur le disque pour des temps de compilation beaucoup plus rapides, en particulier lors du redémarrage des serveurs dans les grands projets.


S'appuyant sur ces améliorations, la mise à jour introduit un nouvel outil expérimental, Bundle Analyzer, pour Turbopack. Cet outil facilite l'optimisation de la taille des bundles serveur et client, contribuant ainsi à améliorer les Core Web Vitals, à réduire les temps de démarrage à froid lambda et à révéler les dépendances inutiles qui alourdissent le système. Bundle Analyzer en est encore à un stade précoce de développement et sera encore perfectionné.

Pour le débogage, les développeurs peuvent désormais activer le débogueur Node.js dans next dev en passant simplement le drapeau --inspect. Cette modification applique l'inspecteur uniquement au processus concerné, éliminant ainsi le besoin de solutions de contournement globales NODE_OPTIONS=--inspect.

En ce qui concerne la gestion des dépendances, Turbopack résout et externalise désormais correctement les dépendances transitives lors de l'utilisation de serverExternalPackages, ce qui réduit les frictions liées à la configuration et évite les conflits de version.

Mise en cache du système de fichiers Turbopack pour next dev

La mise en cache du système de fichiers Turbopack pour next dev est désormais stable et activée par défaut. Les artefacts du compilateur sont stockés sur le disque, ce qui accélère considérablement les temps de compilation lors du redémarrage du serveur de développement, en particulier dans les projets de grande envergure.

Nom : next.js 16.1 fig 1.PNG Affichages : 1894 Taille : 15,8 Ko

Les applications internes chez Vercel ont testé cette fonctionnalité au cours de l'année écoulée.

L'équipe de Next.js a indiqué qu'elle stabilisera la mise en cache du système de fichiers pour la prochaine version.

Analyseur de bundle Next.js (expérimental)

Next.js 16.1 inclut un nouvel outil expérimental, Bundle Analyzer, qui fonctionne avec Turbopack. Il facilite l'optimisation de la taille des bundles pour le code serveur et client, ce qui contribue à améliorer les Core Web Vitals, à réduire les temps de démarrage à froid de lambda et à identifier les dépendances trop lourdes.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
next experimental-analyze

L'exécution de cette commande lance une interface utilisateur interactive permettant d'inspecter les paquets de production, d'identifier les modules volumineux et de voir pourquoi ils sont inclus.

Nom : next.js 16.1 fig 2.PNG Affichages : 425 Taille : 108,8 Ko

Le Bundle Analyzer est profondément intégré à Next.js, ce qui permet de :

  • Filtrer les bundles par route
  • Afficher la chaîne d'importation complète indiquant pourquoi un module est inclus
  • Tracer les importations entre les composants serveur-client et les importations dynamiques
  • Afficher la taille des fichiers CSS et autres ressources importées
  • Basculer entre les vues client et serveur

Le Bundle Analyzer en est encore à ses débuts et sera amélioré dans les prochaines versions.

Débogage simplifié avec next dev --inspect

Les développeurs peuvent désormais activer le débogueur Node.js en passant --inspect à next dev. Auparavant, cela nécessitait de passer NODE_OPTIONS=--inspect et attachait l'inspecteur à tous les processus générés par Next.js au lieu de seulement au processus exécutant le code.

Amélioration de la gestion de serverExternalPackages

Next.js permet aux utilisateurs de garder les dépendances dégroupées à l'aide de serverExternalPackages. Auparavant, cela ne fonctionnait de manière fiable que pour les dépendances directes. Si un développeur utilisait une bibliothèque qui dépendait en interne de quelque chose comme sqlite et devait externaliser sqlite, il fallait l'ajouter à son propre package.json, même si ce n'était pas une dépendance directe. Cette solution de contournement divulguait des détails d'implémentation internes, créait une charge de maintenance et pouvait entraîner des conflits de versions impossibles à résoudre lorsque plusieurs paquets nécessitaient différentes versions de la même dépendance.

Next.js 16.1 corrige ce problème pour Turbopack, qui résout et externalise désormais correctement les dépendances transitives dans serverExternalPackages sans configuration supplémentaire.

Parmi les autres améliorations, on peut citer une réduction de 20 Mo de la taille des installations, une nouvelle commande de mise à niveau et d'autres améliorations.

Exécutez les commandes ci-dessous pour mettre à jour votre installation vers la dernière version de Next.js :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
 
# ...or start a new project
npx create-next-app@latest

Source : Next.js

Et vous ?

Quel est votre avis sur le sujet ?
Que pensez-vous des nouveautés proposées par cette version de Next.js ? Les trouvez-vous utiles et intéressantes ?

Voir aussi :

Une faille de sécurité critique dans React Server Components, "React2Shell", affecte la bibliothèque JavaScript React et le framework Next.js et expose les serveurs à l'exécution de code à distance

Next.js, le framework de développement web open-source, dévoile Next.js 14, la nouvelle version offre un compilateur amélioré Next.js Turbopack et un aperçu de la fonctionnalité Pré-rendu partiel

Next.js 13 est disponible, elle apporte Turbopack, le nouveau successeur de Webpack basé sur Rust, sur une application comportant 3 000 modules, le démarrage de Turbopack prend 1,8 seconde