Composed

Next.js 16.2 : performances accrues, debugging amélioré et des avancées pour les agents

Publication de la version 16.2 de Next.js avec des améliorations de performance, une nouvelle page d'erreur par défaut, des outils de debugging enrichis, et plusieurs nouveautés pour les agents IA.

Publié le par Emmanuel LASTRA 4 min de lecture

Next.js 16.2 : performances accrues, debugging amélioré et des avancées pour les agents
Next.js

La version 16.2 de Next.js met l’accent sur l’accélération des workflows de développement, l’amélioration des performances côté rendu, et plusieurs évolutions orientées expérience développeur et intégration avec les agents IA. Cette mise à jour introduit également plus de 200 correctifs et améliorations pour Turbopack, ainsi que des optimisations profondes du rendu via React.

Regardons ensemble les principales nouveautés de cette release.

Des gains de performance significatifs

L’un des points majeurs de cette version est la réduction du temps de démarrage en développement. Le next dev devient environ 87% plus rapide, avec un temps d’accès à l’URL locale jusqu’à 400% plus rapide.

Côté rendu serveur, une contribution à React rend la désérialisation des payloads Server Components jusqu’à 350% plus rapide, en remplaçant le reviver de JSON.parse par un parcours JavaScript pur en deux étapes. En pratique, cela se traduit par 25% à 60% de gains sur le rendu HTML selon la complexité du payload (26% sur une table de 1000 items, 60% sur du rich text Payload CMS).

Nouvelle page d’erreur par défaut en production

La page d’erreur affichée en production a été redessinée. Lorsqu’une application rencontre une erreur sans avoir défini de fichier global-error.tsx ni error.tsx, Next.js affiche désormais une page de repli plus claire et plus moderne.

Expérience développeur enrichie

Plusieurs nouveautés visent à améliorer le débogage et l’observabilité :

  • Server Function Logging : affichage dans le terminal des fonctions serveur exécutées (nom, arguments, durée d’exécution, fichier source), uniquement en développement.
  • Hydration Diff Indicator : l’error overlay distingue clairement le contenu serveur du contenu client via une légende + Client / - Server, rendant enfin les erreurs d’hydratation immédiatement lisibles.
  • Error.cause dans l’overlay : les chaînes Error.cause sont désormais affichées en liste aplatie sous l’erreur principale, jusqu’à 5 niveaux d’imbrication, pour mieux comprendre les erreurs enchaînées.

Par ailleurs, l’option --inspect, introduite dans Next.js 16.1 pour next dev, s’étend désormais à next start, permettant d’attacher un debugger Node.js au serveur de production, utile pour profiler CPU et mémoire.

Routing et navigation

Le composant <Link> accepte désormais la prop transitionTypes, un tableau de chaînes spécifiant les types de View Transitions à appliquer lors de la navigation. Chaque type est passé à React.addTransitionType, permettant des animations contextuelles selon la direction ou le type de navigation (ex : 'slide'). Cette prop n’est prise en charge que dans l’App Router ; elle est silencieusement ignorée dans le Pages Router, ce qui permet de partager des composants <Link> entre les deux routers sans adaptation.

La gestion du scroll et du focus après navigation a également été revue dans l’App Router via le flag expérimental experimental.appNewScrollHandler. Au lieu de déplacer le focus sur le premier élément focusable dans un segment (ce qui pouvait sauter du contenu), le nouveau handler se contente de défocaliser l’élément actif, alignant le comportement avec la navigation native du navigateur.

Améliorations de ImageResponse

ImageResponse bénéficie d’améliorations majeures :

  • 2x plus rapide pour les images simples, jusqu’à 20x plus rapide pour les images complexes
  • Support CSS et SVG étendu : variables CSS inline, text-indent, text-decoration-skip-ink, box-sizing, display: contents, position: static, valeurs en pourcentage pour gap
  • Police par défaut changée de Noto Sans à Geist Sans

Formats d’icônes multiples

Il est désormais possible de placer plusieurs fichiers d’icônes avec le même nom de base mais des extensions différentes dans le répertoire app (par exemple icon.png et icon.svg). Next.js les gère automatiquement et génère des balises <link> séparées pour chaque format, permettant aux navigateurs modernes d’utiliser le SVG et aux anciens de se rabattre sur le PNG.

Stabilisation des Adapters

Les Adapters passent en statut stable. Cette API permet aux plateformes de déploiement de personnaliser le processus de build et de traiter la sortie de Next.js dans leurs pipelines de manière standard.

Agents

Next.js poursuit ses efforts pour les environnements agentiques avec :

  • Support de AGENTS.md via create-next-app
  • Forwarding des logs navigateur vers le terminal
  • Outil expérimental next-browser

Fonctionnalités expérimentales

  • unstable_catchError() : permet de créer des error boundaries personnalisés au niveau du composant, à placer n’importe où dans l’arbre React (Client Components uniquement). Reçoit les props du site d’appel ainsi qu’un objet ErrorInfo exposant error et unstable_retry().
  • unstable_retry() dans error.tsx : nouveau prop disponible dans les fichiers error.tsx. Contrairement à reset() qui efface uniquement l’état d’erreur, unstable_retry() appelle router.refresh() et reset() dans un startTransition(), relançant la récupération des données et le re-rendu du segment.
  • experimental.prefetchInlining : regroupe toutes les données de segments d’une route dans une seule réponse de prefetch, réduisant le nombre de requêtes réseau à une par lien. La contrepartie est la duplication des données de layout partagées entre routes.
  • experimental.cachedNavigations : met en cache les données de Server Components statiques et dynamiques issues des navigations et du HTML initial, pour servir les visites répétées instantanément (nécessite cacheComponents).

Release notes complètes : Next.js 16.2.