BackRetour au blog

Next.js 15.3

Next.js 15.3 inclut Turbopack pour les builds, de nouveaux hooks d'instrumentation client et de navigation, et plus encore.

Next.js 15.3 inclut Turbopack pour les builds, de nouveaux hooks d'instrumentation client et de navigation, 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

Turbopack Builds (alpha)

Suite à la sortie stable de next dev --turbopack, plus de 50 % des sessions de développement sur Next.js 15 utilisent désormais Turbopack.

Cette version inclut notre alpha de next build --turbopack, apportant les mêmes améliorations de performance du développement local aux builds de production.

Essayez Turbopack pour les builds de production en mettant à jour vers 15.3 et en exécutant :

Terminal
next build --turbopack

Fonctionnalités

99,3 % des tests d'intégration pour next build passent déjà. Vous pouvez suivre notre progression vers 100 % sur areweturboyet.com. Si votre application fonctionne déjà avec Turbopack pour dev, alors elle devrait fonctionner telle quelle avec build.

Les builds Turbopack sont en alpha. Nous ne recommandons pas de les utiliser en production pour des applications critiques à ce stade. Essayez-les plutôt dans un environnement de prévisualisation ou de staging, ou exécutez le build localement pour observer les différences de taille de bundle et de performance.

Nous travaillons activement à combler ces écarts de performance via le scope hoisting, un meilleur chunking et d'autres optimisations.

Performance des builds

Nous avons validé Turbopack sur le grand monorepo interne de Vercel et des bases de code de partenaires. Un avantage de l'architecture de Turbopack par rapport à notre précédente implémentation Webpack est que la performance s'améliore avec l'ajout de cœurs CPU :

  • À 4 cœurs : 28 % plus rapide que Webpack
  • À 16 cœurs : 60 % plus rapide que Webpack
  • À 30 cœurs : 83 % plus rapide que Webpack

Ces temps de build diminuent encore plus avec notre travail expérimental sur le cache persistant. Nous en dirons plus dans une future version.

Écosystème

Nous travaillons avec des intégrations couramment utilisées comme Sentry pour nous assurer de leur compatibilité avec next build --turbopack avant la version stable. Contactez @leerob sur X si vous êtes un auteur d'outil souhaitant travailler avec nous pour assurer la compatibilité.

Retours

Partagez vos retours, même si tout se passe bien, pour nous aider à préparer une version stable :

Configuration Turbopack dans next.config.ts (stable)

La configuration Turbopack dans next.config.ts est passée de experimental.turbo à la clé de premier niveau turbopack :

next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};
 
export default nextConfig;

Pour la compatibilité, l'option experimental.turbo continuera d'être supportée jusqu'à la prochaine version majeure de Next.js.

Pour une liste complète des options de configuration Turbopack, consultez la Référence API Turbopack.

Support communautaire pour Rspack (expérimental)

L'équipe Rspack a créé un plugin communautaire pour Next.js.

Cela fournit une option pour les utilisateurs de Next.js ayant besoin d'une compatibilité quasi-exacte avec l'API Webpack, mais ne pouvant pas encore passer à Turbopack, pour améliorer leurs temps de compilation et de build locaux. Nous sommes confiants dans notre progression avec Turbopack et continuerons à fournir un chemin d'évolution progressif pour les utilisateurs de Webpack.

Bien que ce ne soit pas un plugin officiel Next.js, nous collaborons avec l'équipe Rspack. Les deux équipes travailleront ensemble sur des fondations communes comme SWC et Lightning CSS, bénéficiant à tous les utilisateurs de Next.js et à l'écosystème au sens large.

Si vous souhaitez explorer l'utilisation de Rspack avec Next.js, vous pouvez utiliser l'adaptateur next-rspack. Nous exécutons l'adaptateur contre notre suite de tests d'intégration. Il passe actuellement environ 96 % des tests.

Voir un exemple ou en savoir plus dans la documentation Rspack.

Hook d'instrumentation client

Le fichier instrumentation-client.js|ts vous permet d'ajouter du code de monitoring et d'analytics qui s'exécute avant que le code frontend de votre application ne démarre.

C'est idéal pour configurer le suivi des performances, la surveillance des erreurs ou d'autres outils d'observabilité côté client aussi tôt que possible dans le cycle de vie.

instrumentation-client.js
// Configurer le suivi des performances
performance.mark('app-init');
 
// Initialiser les analytics
console.log('Analytics initialisés');
 
// Configurer le suivi des erreurs
window.addEventListener('error', (event) => {
  // Envoyer à votre service de suivi d'erreurs
  reportError(event.error);
});

Placez ce fichier à la racine de votre projet, similairement à l'instrumentation côté serveur.

En savoir plus dans la documentation du fichier instrumentation-client.

Hooks de navigation

Nous introduisons de nouveaux hooks de navigation qui améliorent les capacités de routage côté client dans Next.js 15.3, vous permettant de développer plus facilement des états de chargement localisés et d'implémenter des contrôles complexes comme l'annulation de navigation.

onNavigate

Ce gestionnaire d'événements est une nouvelle propriété du composant Link et s'exécute pendant les navigations côté client, vous donnant un contrôle précis sur le comportement de routage de votre application.

Contrairement à l'événement onClick qui se déclenche pour tous les clics, onNavigate peut être utilisé pour les navigations Single-Page App (SPA), vous permettant d'exécuter du code ou même d'annuler la navigation avec preventDefault().

Cette API peut être utilisée pour implémenter des animations de transition, des gardes de navigation ou du suivi d'analytics qui ne doivent s'exécuter que pendant les transitions de page réelles.

En savoir plus en consultant la documentation onNavigate.

useLinkStatus

Le hook useLinkStatus pour les composants clients retourne un booléen pending qui indique quand une navigation est en cours, vous donnant un contrôle localisé sur les états de chargement.

Cette API est modelée sur useFormStatus de React, et est utile pour ajouter des indicateurs de chargement personnalisés pendant les transitions de page, surtout quand le préchargement est désactivé ou quand vos routes liées n'ont pas d'états de chargement dédiés.

En plaçant un composant utilisant useLinkStatus comme descendant de votre composant <Link>, vous pouvez créer des éléments d'interface réactifs qui répondent aux événements de navigation en temps réel.

En savoir plus en consultant la documentation useLinkStatus.

Améliorations de performance du plugin TypeScript

Le plugin TypeScript du serveur de langage (LSP) de Next.js est maintenant plus rapide.

Le LSP fournit des fonctionnalités Intellisense inline comme la validation des limites serveur/client, des indications sur les props des composants, l'autocomplétion de configuration et la détection d'erreurs pour les API interdites dans les composants serveur React. Dans les très grandes bases de code, le plugin pouvait auparavant faire planter ou bloquer le service de langage TypeScript.

Nous avons apporté des améliorations significatives de performance pour résoudre ces problèmes. Dans nos tests internes, les temps de réponse du plugin se sont améliorés d'environ 60 % sans blocage ni crash.

Autres changements

  • [Fonctionnalité] Support de new URL() dans images.remotePatterns (#77692)
  • [Fonctionnalité] Les options viewport sont maintenant séparées de metadata (#77427)
  • [Fonctionnalité] Ajout de l'option unstable_dynamicOnHover (#77866)
  • [Fonctionnalité] Ajout du support pour Pinterest Rich Pins (#76988)
  • [Amélioration] Faire fonctionner revalidate lorsqu'il est suivi d'une redirection dans les Route Handlers (#77090)
  • [Amélioration] Assurer une forte cohérence après l'appel à revalidate dans les Server Actions (#76885)
  • [Amélioration] Mise à jour de sharp pour une conversion PNG vers AVIF plus rapide (#77839)

Contributeurs

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

Un immense merci à @raunofreiberg, @huozhi, @ijjk, @timneutkens, @gaojude, @leerob, @mezotv, @bgw, @samcx, @ztanner, @sokra, @mischnic, @wbinnssmith, @kdy1, @unstubbable, @ahabhgk, @ScriptedAlchemy, @SukkaW, @wyattjoh, @eps1lon, @Amirroid, @Netail, @lubieowoce, @gnoff, @jackwilson323, @acdlite, @sbougerel, @kevva, @kasperpeulen, @Cy-Tek, @dvoytenko, @husseinraoouf, @isBatak, @iamkd, @delbaoliveira, @jantimon, @padmaia, @Bernardoow, @styfle, @devjiwonchoi, @JamBalaya56562, et @Marukome0743 pour leur aide !