BackRetour au blog

Next.js 15.2

Next.js 15.2 inclut des mises à jour pour le débogage des erreurs, les métadonnées, Turbopack, et plus encore.

Next.js 15.2 inclut des mises à jour pour le débogage des erreurs, les métadonnées, Turbopack et plus encore :

Mettez à jour dès aujourd'hui, ou commencez avec :

Terminal
# Utilisez l'outil de mise à jour automatisé
npx @next/codemod@canary upgrade latest
 
# ...ou mettez à jour manuellement
npm install next@latest react@latest react-dom@latest
 
# ...ou démarrez un nouveau projet
npx create-next-app@latest

Interface d'erreur repensée et traces de pile améliorées

Nous avons apporté des améliorations visuelles et qualitatives aux erreurs que vous pourriez rencontrer lors du développement de votre application. Passons en revue chaque domaine d'amélioration :

Superposition d'erreur

Un exemple de la superposition d'erreur Next.js après la version 15.2

Nous avons repensé l'interface et la présentation des messages d'erreur dans Next.js, les rendant plus faciles à comprendre. Le nouveau design met en évidence les détails clés de l'erreur - comme le message, le cadre de code pertinent et la pile d'appels - tout en réduisant le bruit provenant du code des bibliothèques ou dépendances. Cela signifie que vous pouvez rapidement identifier la source du problème et commencer à le résoudre plus vite.

En tirant parti de la nouvelle fonctionnalité owner stacks de React, nous sommes désormais capables de fournir une meilleure fidélité quant à l'origine de vos erreurs. Next.js peut maintenant afficher le sous-composant responsable du déclenchement de l'erreur, en sautant les éléments intermédiaires qui n'étaient pas responsables de la création de l'élément ayant causé l'erreur.

Nous facilitons également la personnalisation de vos préférences d'indicateur sans avoir besoin d'ajouter une configuration supplémentaire.

Un exemple des préférences des outils de développement Next.js

Nous avons ajouté une section de feedback en bas des superpositions d'erreur qui vous permet d'évaluer l'utilité du message d'erreur. Votre opinion nous aide à comprendre les points douloureux courants et à améliorer les messages d'erreur pour faciliter le débogage.

Indicateur de développement

Les différents états de l'indicateur de développement, du rendu à l'affichage d'informations supplémentaires.

Nous avons consolidé les informations de développement dans un nouvel indicateur rationalisé qui affiche des détails comme le mode de rendu et l'état de la compilation.

Pendant la compilation, vous remarquerez un logo Next.js estompé et animé lors de la navigation entre les routes. Le logo s'éclaircit une fois la compilation terminée et que React commence le rendu, fournissant un repère visuel de l'état de votre application.

L'ouverture de l'indicateur de développement affiche maintenant :

  • Le mode de rendu de votre route actuelle (statique/dynamique)
  • L'état de compilation de Turbopack
  • Les erreurs actives avec un accès rapide à la superposition d'erreur

Les futures mises à jour étendront ce menu pour inclure :

  • Outils de débogage PPR (Partial Prerendering)
  • Fonctionnalités de surveillance du cache
  • Outils de développement supplémentaires

Cette approche unifiée rassemble toutes les informations cruciales de développement en un seul endroit accessible. Nous continuerons à affiner et étendre cette fonctionnalité dans les prochaines versions en fonction de vos retours.

Métadonnées en streaming

Il est souvent nécessaire de récupérer des données dynamiques, ou d'effectuer une opération asynchrone, dans generateMetadata. Dans les versions précédentes de Next.js, ces métadonnées devaient finir de se générer avant que l'interface utilisateur initiale ne soit envoyée, afin qu'elles puissent être incluses dans le <head> du document.

Cela signifiait que pour de nombreuses pages où une interface utilisateur initiale rapide était disponible, le premier affichage était toujours retardé par des exigences de données qui n'affectaient pas ce que l'utilisateur verrait visuellement. Nous avons amélioré cela dans la version 15.2 en permettant à l'interface utilisateur initiale d'être envoyée au navigateur avant même que generateMetadata ne soit terminé.

Un exemple des préférences des outils de développement Next.js

Cependant, pour maintenir la compatibilité avec les bots et les crawlers qui s'attendent à ce que les métadonnées soient disponibles dans le <head> du document, nous continuons à retarder l'envoi du HTML à certains agents utilisateurs de bots. Si vous avez besoin d'un contrôle plus précis sur quels bots reçoivent ce traitement, vous pouvez personnaliser l'expression régulière utilisée pour les servir via l'option htmlLimitedBots dans next.config.js.

En savoir plus sur les métadonnées en streaming.

Améliorations des performances de Turbopack

Turbopack a été marqué comme stable avec Next.js 15.

Nous avons travaillé à l'amélioration des performances de Turbopack, en particulier dans les scénarios sans cache persistant. Dans le cadre de cette version, nous avons introduit les améliorations suivantes :

  • Temps de compilation plus rapides : Les premiers utilisateurs ont rapporté jusqu'à 57,6 % de temps de compilation plus rapides lors de l'accès aux routes par rapport à Next.js 15.1.
  • Utilisation mémoire réduite : Pour l'application vercel.com, nous avons observé une diminution de 30 % de l'utilisation mémoire pendant le développement local.

Avec ces améliorations, Turbopack devrait maintenant être plus rapide que Webpack dans pratiquement tous les cas. Si vous rencontrez un scénario où ce n'est pas vrai pour votre application, n'hésitez pas à nous contacter - nous voulons enquêter sur ces cas.

Nous avons également fait des progrès sur le cache persistant et les builds de production. Bien que ces fonctionnalités ne soient pas encore prêtes pour une version expérimentale, nous avons commencé à les tester sur des projets réels. Nous partagerons des métriques plus détaillées une fois qu'elles seront disponibles pour une utilisation plus large.

Transitions de vue React (expérimental)

Nous avons ajouté un drapeau de fonctionnalité pour activer la nouvelle API expérimentale View Transitions dans React. Cette nouvelle API vous permet d'animer entre différentes vues et composants dans votre application.

Pour activer cette fonctionnalité, ajoutez ce qui suit à votre next.config.js :

next.config.js
module.exports = {
  experimental: {
    viewTransition: true,
  },
};

Note : Cette fonctionnalité est hautement expérimentale et peut changer dans les futures versions.

Pour plus d'informations sur l'utilisation de cette fonctionnalité, veuillez vous référer à la pull request originale View Transition dans le dépôt React. Ce travail s'appuie sur l'implémentation native des View Transitions dans le navigateur.

Nous publierons plus de documentation et d'exemples au fur et à mesure que la stabilité progressera.

Middleware Node.js (expérimental)

Nous avons travaillé sur un nouveau drapeau expérimental pour permettre l'utilisation du runtime Node.js pour le Middleware Next.js.

Pour activer cette fonctionnalité, ajoutez ce qui suit à votre next.config.js :

next.config.js
module.exports = {
  experimental: {
    nodeMiddleware: true,
  },
};

Vous pouvez ensuite spécifier le runtime Node.js dans l'export config de votre Middleware :

middleware.js
import bcrypt from 'bcrypt';
 
const API_KEY_HASH = process.env.API_KEY_HASH; // Clé API pré-hachée dans l'environnement
 
export default async function middleware(req) {
  const apiKey = req.headers.get('x-api-key');
 
  if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
    return new Response('Forbidden', { status: 403 });
  }
 
  console.log('Clé API validée');
}
 
export const config = {
  runtime: 'nodejs',
};

Note : Cette fonctionnalité n'est pas encore recommandée pour une utilisation en production. Par conséquent, Next.js générera une erreur à moins que vous n'utilisiez la version next@canary au lieu de la version stable.

Nous prévoyons de profiter de cette opportunité pour améliorer et remodeler l'API Middleware. Si vous avez des suggestions ou des demandes, faites-le nous savoir. Le Middleware Node.js était une demande majeure de la communauté et nous sommes ravis d'y répondre.

À venir

  • "use cache" (bêta) : Nous avons travaillé à stabiliser "use cache" en tant que fonctionnalité autonome. Restez à l'écoute pour plus de détails dans les prochaines versions. En savoir plus sur "use cache".
  • Cache persistant de Turbopack (expérimental) : Nous avons testé en interne le cache persistant chez Vercel avec des améliorations de performances positives. Une fois que nous l'aurons davantage stabilisé, nous le publierons derrière un drapeau de fonctionnalité pour des retours et tests supplémentaires.

Autres changements

  • [Fonctionnalité] Ajout du drapeau --api pour créer une API sans interface avec create-next-app (PR)
  • [Fonctionnalité] Ajout du support pour images.qualities avec next/image (PR)
  • [Dépréciation] Avertissement concernant la dépréciation de la configuration i18n dans App Router (PR)
  • [Amélioration] Amélioration des performances du lint pour no-html-link-for-pages (PR)
  • [Amélioration] Émission d'une erreur de build si la directive "use action" est utilisée incorrectement (PR)
  • [Amélioration] Affichage de global-error aux côtés de la superposition de développement pendant le développement (PR)
  • [Amélioration] Possibilité de désactiver les logs de requêtes HTTP dans le serveur de développement (PR)
  • [Amélioration] Ajout de balises SEO de pagination (PR)
  • [Amélioration] Amélioration des JSDocs pour metadata et les composants <Link> (PR)
  • [Amélioration] Le Middleware devrait correspondre aux requêtes next/image (PR)
  • [Amélioration] Ajout du nom d'hôte au message d'erreur par défaut (PR)
  • [Amélioration] Envoi des erreurs non gérées par les limites d'erreur explicites via reportError (PR)

Contributeurs

Next.js est le résultat du travail combiné de plus de 3 000 développeurs individuels. Cette version vous est apportée par :

Un grand merci à @mischnic, @Marukome0743, @JamBalaya56562, @creationix, @noreiller, @styfle, @abdonrd, @ollyw, @aymericzip, @davidhu2000, @attilarepka, @devpla, @dydals3440, @huozhi, @wbinnssmith, @suu3, @PapatMayuri, @Sahil4883, @abyii, @molebox, @sokra, @maciej-ka, @abvthecity, @damiensedgwick, @alitas, @RiskyMH, @ytreister, @sommeeeer, @n1ckoates, @yongholeeme, @spidersouris, @gurkerl83, @cassiossantos, @Netail, @tknickman, @eur00t, @cseas, @nnnnoel, @Manoj-M-S, @lfades, @matmannion, @mikeboensel, @nphmuller, @apostolos, @k15a, @pavelee, @locothedev, @vexcat, @Zach-Jaensch, @decepulis, @gadcam, @lukahartwig, @jsanford8, @RobinMalfait, @raunofreiberg, @mohsen1, @skushagra, @amannn, @HQidea, @jrandolf, @smit-err, @littledivy, @k35o, @martinsione, @CvX, @msereniti, @Timer, @Iftee97, @chibicode, @RobPruzan, @PlagueFPS, @bjunix, @maximevtush, @michaelven, @sedlukha, @johannpinson, @AxelUser, @Nayeem-XTREME, @IcaroG, @blurrah, @lachlanjc, @ashi009, @conico974, @raphaelcosta, @dulmandakh, @khuezy, @Knoa0405, @wangsijie, @stefanprobst, @wentsul, @loopy-lim, @bratvanov, @hedgeday, et @cassian-goode pour leur aide !