Next.js 16.3 est désormais disponible et apporte des gains de performances majeurs, réduisant l’utilisation de la mémoire du serveur de développement jusqu’à 90 % et offrant des builds jusqu’à 5,5 fois plus rapides grâce à une mise en cache sur disque améliorée. Le rendu côté serveur gère désormais jusqu’à 22 % de requêtes en plus en charge, et la prise en charge de TypeScript 7 permet une vérification des types plus rapide lors des builds.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 dans le navigateur côté client, Next.js étend cette fonctionnalité pour inclure des applications rendues côté serveur.
Next.js prend en charge la mise en forme via CSS, ainsi que les fichiers SCSS et Sass précompilés, le CSS-in-JS et le JSX stylisé. De plus, il intègre la prise en charge de TypeScript et un système de regroupement intelligent. Le transpileur open source SWC est utilisé pour transformer et compiler le code en JavaScript utilisable par un navigateur. Webpack, un autre outil open source, sert ensuite à regrouper les modules, mais il est actuellement en cours de remplacement par TurboPack. Tous ces outils s’utilisent avec npm dans un terminal.
La principale caractéristique de Next.js réside dans son utilisation du rendu côté serveur afin de réduire la charge pesant sur les navigateurs web et d’offrir une sécurité renforcée. Cela peut s’appliquer à n’importe quelle partie de l’application ou à l’ensemble du système, ce qui permet de sélectionner des pages riches en contenu pour un rendu côté serveur. Cette fonctionnalité peut également être réservée aux nouveaux visiteurs, afin de réduire la charge pesant sur les navigateurs web qui n’ont encore téléchargé aucun des ressources du site.
Next.js 16.3 est désormais disponible et apporte des gains de performances majeurs, réduisant l’utilisation de la mémoire du serveur de développement jusqu’à 90 % et offrant des builds jusqu’à 5,5 fois plus rapides grâce à une mise en cache sur disque améliorée. Le rendu côté serveur gère désormais jusqu’à 22 % de requêtes en plus en charge, et la prise en charge de TypeScript 7 permet une vérification des types plus rapide lors des builds. Cette version inclut également la suite « Instant Navigations » (à activer manuellement) pour une réactivité de type SPA, ainsi que d’autres améliorations destinées aux développeurs.
Voici un extrait de la présentation de Next.js 16.3 :
Next.js 16.3
Le mois dernier, nous avons publié une version préliminaire de la version 16.3 qui vous permettait de tester des navigations de type SPA, des outils d’IA améliorés et un serveur de développement beaucoup moins gourmand en mémoire.
Aujourd’hui, nous sommes ravis d’annoncer que Next.js 16.3 est disponible !
Cette version regorge d’améliorations pour toutes les applications Next.js existantes :
- Moins de consommation de mémoire en développement. Les longues sessions de développement utilisent désormais jusqu’à 90 % de RAM en moins.
- Des builds plus rapides. Les builds répétés peuvent lire les artefacts inchangés à partir du cache.
- Une vérification des types plus rapide. next build peut utiliser TypeScript 7 pour la vérification des types.
- Un rendu côté serveur plus rapide. Next.js gère désormais jusqu’à 22 % de requêtes en plus sous charge.
- Documentation versionnée pour les agents IA. Les agents de codage lisent la documentation correspondant à leur version sans aucune configuration.
- Moins de requêtes de préchargement. Les liens génèrent moins de requêtes en regroupant des charges utiles plus petites.
- Meilleure mise en cache des ressources statiques. Les ressources immuables peuvent, en option, être réutilisées d’un déploiement à l’autre.
- Limites d’erreur personnalisées. Récupérez les données ayant échoué en les récupérant à nouveau après une erreur serveur.
- Importations glob intégrées. Importez plusieurs fichiers grâce à une nouvelle API Turbopack.
- Paramètres racine. Accédez facilement aux paramètres de niveau racine tels que [lang] depuis n’importe quel composant serveur.
Il inclut également Instant Navigations, une suite d’outils optionnelle qui apporte à Next.js la réactivité des SPA pilotées par le client, sans sacrifier les avantages liés à son modèle piloté par le serveur :
- Instant Insights. Un nouvel outil de développement qui met automatiquement en évidence les navigations lentes.
- Préchargement partiel. Contrôle précis de la quantité de contenu qu’un lien doit précharger.
- Meilleure régénération statique incrémentielle. Les URL omises lors du pré-rendu à la compilation peuvent désormais servir une page de chargement instantanée au premier visiteur.
- Inspecteur de navigation. Un nouvel outil de développement qui vous permet d’inspecter visuellement la page de chargement d’une navigation.
- Assistant de test Playwright. Écrivez des tests de régression qui empêchent les refactorisations de ralentir la navigation.
Les comportements sous-jacents à Instant Navigations deviendront la norme dans une future version majeure, car ils s’inscrivent dans le cadre de notre travail de l’année dernière visant à ramener Next.js à ses fondamentaux : dynamique par défaut, sans mise en cache cachée ou implicite.
La version 16.3 inclut également des fonctionnalités expérimentales que vous pouvez essayer dès aujourd’hui, telles que le compilateur React basé sur Rust et la résilience réseau.
Il s'agit de notre plus importante mise à jour du framework depuis la sortie de Next.js 16.0 en novembre dernier, et nous avons hâte que vous la testiez.
Pour effectuer la mise à jour, installez la dernière version de Next depuis npm :
| Code : | Sélectionner tout |
npm install next@latest
Améliorations pour les applications actuelles
Next.js 16.3 apporte des améliorations à tous les projets existants, notamment une réduction de la consommation de mémoire du serveur de développement, un rendu plus rapide et de meilleures performances d’exécution, le tout sans aucune modification de votre code d’application.
Nous recommandons à toutes les applications de passer à la version 16.3 pour commencer à bénéficier de ces avantages dès aujourd’hui.
Réduction de la consommation de mémoire en développement
Dans la version 16.3, Turbopack utilise jusqu’à 90 % de mémoire en moins lors de l’exécution de `next dev`. Cette réduction est due à deux nouvelles fonctionnalités désormais activées par défaut : la mise en cache sur disque pour le développement (introduite pour la première fois dans la version 16.1) et l’éviction de mémoire.
Nous avons reçu d’excellents retours de la part des premiers utilisateurs, et nous sommes ravis d’apporter ces améliorations de performances à toutes les applications Next.
Des builds plus rapides
La fonctionnalité de mise en cache sur disque, qui accélère le développement depuis la version 16.1, fonctionne désormais avec Next Build et est activée par défaut. Nous l’utilisons en interne chez Vercel depuis des mois et constatons que certains projets bénéficient de builds 5,5 fois plus rapides en CI.
Vérification des types plus rapide avec TypeScript 7
TypeScript 7 a été lancé le mois dernier. Il s'agit d'un portage natif de TypeScript 10 fois plus rapide, offrant une vérification des types nettement plus rapide.
Pour commencer à utiliser TypeScript 7 pour la vérification des types lors de la prochaine compilation, il suffit de mettre à jour la dépendance locale de votre projet :
| Code : | Sélectionner tout |
pnpm add -D typescript@^7
Rendu côté serveur plus rapide
Nous avons remplacé les flux Web par des flux Node.js natifs dans la couche de rendu de l'App Router, supprimant ainsi la surcharge liée à la conversion entre les deux lors du rendu côté serveur.
D’après nos tests de performance, les applications traitent jusqu’à 22 % de requêtes en plus sous charge, sans aucune modification du code de l’application.
Documentation adaptée à la version pour les agents IA
Les agents de codage IA lisent désormais automatiquement la documentation correspondant à la version de Next.js utilisée par votre projet.
L'exécution de next dev génère et met à jour un bloc AGENTS.md adapté à la version, qui pointe directement vers la documentation intégrée dans les modules Node locaux de votre projet. Ces informations étant désormais directement accessibles aux agents, nous retirons nos anciennes compétences qui existaient uniquement pour fournir la documentation à jour à vos applications.
Moins de requêtes de préchargement
Dans la version 16.3, les préchargements dont la taille de charge utile est inférieure à un certain seuil sont automatiquement regroupés afin de réduire le nombre total de requêtes de préchargement effectuées par votre application.
Les préchargements pour les segments partagés plus volumineux restent toutefois séparés, afin de pouvoir être réutilisés sur plusieurs routes.
Meilleure mise en cache des ressources statiques
Les ressources statiques immuables peuvent désormais être réutilisées d’un déploiement à l’autre. Comme elles sont immuables, elles ne peuvent pas être affectées par des problèmes liés au décalage.
Limites d’erreur personnalisées
Auparavant, les limites d’erreur React dans Next.js interféraient avec le code de l’application qui appelait notFound ou redirect. Elles ne pouvaient également réinitialiser que l’état côté client et ne vous offraient aucun moyen de réessayer les composants serveur ayant échoué lors du rendu.
Dans Next.js 16.3, vous pouvez utiliser catchError pour définir une limite d’erreur personnalisée qui n’interfère pas avec notFound ou redirect :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 'use client'; import { catchError, type ErrorInfo } from 'next/error'; function ErrorFallback(props: { title: string }, { error, retry }: ErrorInfo) { return ( <div> <h2>{props.title}</h2> <p>{error.message}</p> <button onClick={() => retry()}>Try again</button> </div> ); } export default catchError(ErrorFallback); |
La limite reçoit également une fonction retry() que vous pouvez appeler pour récupérer à nouveau les enfants de la limite, ce qui peut inclure le ré-rendu de n’importe quel composant serveur.
Importations glob intégrées
Turbopack prend désormais en charge le chargement de plusieurs modules à partir du système de fichiers à l’aide de l’API import.meta.glob compatible avec Vite, ce qui apporte le rechargement à chaud des modules et d’autres avantages aux composants serveur qui lisent des fichiers locaux :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import matter from 'gray-matter'; export default function Page() { // .md needs a loader registered in next.config.js const posts = import.meta.glob('./posts/*.md', { eager: true }); return ( <ul> {Object.entries(posts).map(([path, mod]) => { const { data } = matter(mod.default); return <li key={path}>{data.title}</li>; })} </ul> ); } |
Paramètres de la racine
Auparavant, la seule façon d’accéder aux paramètres d’une route dynamique consistait à les transmettre en tant que props depuis la page de la route.
Cela entraînait un « prop-drilling » excessif pour les paramètres définis...
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.