Next.js 16.2 est lancé avec un rendu et un démarrage plus rapides, une page d'erreur repensée
Next.js 16.2 est lancé avec un rendu et un démarrage plus rapides, une page d'erreur repensée, une mise à jour majeure garantissant un taux de réussite de 100 % pour les agents IA
Next.js 16.2 est désormais disponible, apportant des améliorations majeures au flux de travail des développeurs et aux performances des sites. Le temps de démarrage de localhost:3000 pendant le développement est désormais environ 87 % plus rapide que dans la version 16.1 lors de l'utilisation de l'application par défaut, grâce à des améliorations significatives du processus next dev. Par ailleurs, la désérialisation de la charge utile des composants serveur est désormais jusqu’à 350 % plus rapide, ce qui se traduit par des gains de vitesse de rendu côté serveur compris entre 25 % et 60 % en conditions réelles, selon la charge utile.
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 React mentionne Next.js parmi les « chaînes d'outils recommandées », le conseillant aux développeurs lorsqu'ils « créent un site web rendu côté serveur avec Node.js ». Alors que les applications React traditionnelles ne peuvent afficher leur contenu que dans le navigateur côté client, Next.js étend cette fonctionnalité pour inclure les applications rendues côté serveur.
Next.js 16.2 est désormais disponible, apportant des améliorations majeures au flux de travail des développeurs et aux performances des sites. Le temps de démarrage de localhost:3000 pendant le développement est désormais environ 87 % plus rapide que dans la version 16.1 lors de l'utilisation de l'application par défaut, grâce à des améliorations significatives du processus next dev.
Par ailleurs, la désérialisation de la charge utile des composants serveur est désormais jusqu’à 350 % plus rapide, ce qui se traduit par des gains de vitesse de rendu côté serveur compris entre 25 % et 60 % en conditions réelles, selon la charge utile. Si les performances sont au cœur de cette mise à jour, celle-ci améliore également la gestion des erreurs : les pages d'erreur en production bénéficient d'un nouveau design, les chaînes Error.cause s'affichent dans la fenêtre contextuelle d'erreur, et les incohérences d'hydratation sont désormais clairement identifiées afin de distinguer le contenu rendu par le serveur de celui rendu par le client.
Pour améliorer le débogage et la transparence pendant le développement, Next.js consigne désormais dans le terminal le nom, les arguments, le temps d'exécution et le fichier source de chaque fonction serveur. S'appuyant sur les changements récents, la prise en charge du débogueur Node.js s'étend au-delà du développement ; les développeurs peuvent désormais attacher le débogueur dans les environnements de production via next start --inspect.
Parmi les autres mises à jour, citons une nouvelle propriété transitionTypes pour le composant ``, une API Adapters stable pour la personnalisation de la compilation, des améliorations notables apportées à ImageResponse et la gestion automatique de plusieurs fichiers d'icônes ayant le même nom de base mais des extensions différentes. Cette version apporte également diverses améliorations supplémentaires et corrections de bogues.
Voici la présentation de Next.js 16.2 :
Présentation de Next.js 16.2
Next.js 16.2 apporte des améliorations en termes de performances, un débogage optimisé, des améliorations pour les agents, ainsi que plus de 200 corrections et améliorations pour Turbopack.
Temps de mise à disposition de l'URL plus rapide en développement
Nous avons considérablement réduit le temps nécessaire avant que localhost:3000 ne soit prêt pour next dev. Sur la même machine et pour le même projet, le démarrage est environ 87 % plus rapide par rapport à Next.js 16.1 sur l'application par défaut.
Rendu plus rapide
Nous avons apporté une modification à React qui accélère la désérialisation de la charge utile des composants serveur jusqu'à 350 %. L'implémentation précédente utilisait un callback reviver JSON.parse, qui franchissait la frontière C++/JavaScript dans V8 pour chaque paire clé-valeur du JSON analysé. Même un reviver trivial sans opération rend JSON.parse environ 4 fois plus lent que sans reviver.
La nouvelle approche utilise un processus en deux étapes : un simple JSON.parse() suivi d'une exploration récursive en JavaScript pur. Cela élimine la surcharge liée au franchissement de la frontière et ajoute des optimisations telles que le court-circuitage des chaînes de caractères simples qui ne nécessitent pas de transformation.
Dans les applications Next.js réelles, cela se traduit par un rendu HTML 25 % à 60 % plus rapide, en fonction de la taille de la charge utile RSC.
Nouvelle page d'erreur par défaut
La page d'erreur par défaut affichée en production a été repensée. Lorsque votre application rencontre une erreur et que vous n'avez pas défini de fichier global-error.tsx ou error.tsx personnalisé, Next.js affiche une page de secours intégrée. Cette page de secours a été mise à jour avec un design plus épuré et plus moderne.
Journalisation des fonctions serveur
Next.js consigne désormais l'exécution des fonctions serveur dans le terminal pendant le développement. Chaque entrée de journal indique le nom de la fonction, ses arguments, son temps d'exécution et le fichier dans lequel elle est définie.
Indicateur de différence d'hydratation
Lorsqu'une divergence d'hydratation se produit, la fenêtre d'erreur superposée indique désormais clairement quel contenu provient du serveur et quel contenu provient du client. La différence utilise une légende + Client / - Server, ce qui permet de voir immédiatement ce qui diverge.
--inspect pour next start.
Next.js 16.1 a introduit next dev --inspect pour connecter le débogueur Node.js pendant le développement. Dans la version 16.2, cette fonctionnalité s'étend à next start, vous permettant de connecter un débogueur Node.js à votre serveur de production.
Code Next.js : Sélectionner tout - Visualiser dans une fenêtre à part next start --inspect
Cela est utile pour déboguer des problèmes ou profiler l'utilisation du CPU et de la mémoire.
Propriété transitionTypes pour next/link/.
Le composant <Link> accepte désormais une propriété transitionTypes — un tableau de chaînes de caractères qui spécifie les transitions de vue à appliquer lors de la navigation. Chaque type est transmis à React.addTransitionType pendant la transition de navigation, ce qui vous permet de déclencher différentes animations en fonction de la direction ou du contexte de la navigation.
Code Next.js : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
Cette fonctionnalité n'est prise en charge que dans l'App Router, car le Pages Router n'utilise pas les transitions React pour la navigation. La propriété transitionTypes sur les liens du Pages Router est ignorée de manière silencieuse, ce qui permet aux composants de lien partagés de fonctionner sur les deux routeurs.
ImageResponse plus rapide
ImageResponse a été mis à jour avec des améliorations significatives :
- ImageResponse deux fois plus rapide pour les images basiques, jusqu'à 20 fois plus rapide pour les images complexes
- Couverture CSS et SVG améliorée, incluant la prise en charge des variables CSS en ligne, text-indent, text-decoration-skip-ink, box-sizing, display: contents, position: static, et les valeurs en pourcentage pour gap.
- Police par défaut changée de Noto Sans à Geist Sans
Causes des erreurs dans la fenêtre contextuelle de développement
La fenêtre contextuelle d'erreur affiche désormais les chaînes Error.cause, ce qui facilite le débogage des erreurs qui en contiennent d'autres. Les causes sont présentées sous forme de liste plate sous l'erreur de niveau supérieur, sur un maximum de 5 niveaux de profondeur.
Adaptateurs
Les adaptateurs sont désormais disponibles en version stable. Il s'agit d'une nouvelle API qui permet aux plateformes de personnaliser le processus de compilation.
Cela est utile pour les plateformes de déploiement ou les intégrations de compilation personnalisées qui doivent modifier la configuration de Next.js ou traiter le résultat de la compilation.
Nous partagerons un aperçu plus détaillé des adaptateurs la semaine prochaine.
Formats d'icônes multiples
Les fichiers d'icônes multiples portant le même nom de base mais des extensions différentes sont désormais gérés automatiquement dans le répertoire de votre application (par exemple, icon.png et icon.svg). Cela est utile pour la prise en charge de la solution de secours dans les navigateurs. Les navigateurs modernes peuvent utiliser des icônes SVG tandis que les navigateurs plus anciens se rabattent sur le format PNG. Les deux formats sont rendus sous forme de balises <link> distinctes.
Source : Annonce de Next.js 16.2
Et vous ?
Pensez-vous que cette version est crédible ou pertinente ?
Voir aussi :
Répondre avec citation
Partager