BackRetour au blog

Next.js 15.1

Next.js 15.1 introduit le support stable de React 19, un meilleur débogage des erreurs, de nouvelles API expérimentales d'autorisation, et plus encore.

Next.js 15.1 apporte des améliorations majeures, de nouvelles API et des optimisations pour l'expérience développeur. Les principales nouveautés incluent :

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

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

React 19 (stable)

Next.js 15.1 prend désormais pleinement en charge React 19 :

  • Pour le Pages Router : Vous pouvez utiliser React 19 stable sans avoir besoin des versions Release Candidate ou Canary, tout en conservant le support de React 18.
  • Pour l'App Router : Nous continuerons à fournir les versions Canary de React intégrées. Celles-ci incluent toutes les fonctionnalités stables de React 19 ainsi que les nouveautés en cours de validation dans les frameworks avant une nouvelle version de React.

Depuis la sortie de Next.js 15, une fonctionnalité majeure ajoutée à React 19 est le "préchauffage des composants frères (sibling pre-warming)".

Pour un aperçu complet des nouveautés de React 19, consultez l'article officiel sur React 19.

Amélioration du débogage des erreurs

Nous avons amélioré le débogage des erreurs dans Next.js pour vous permettre de localiser rapidement la source des problèmes, qu'ils apparaissent dans le terminal, le navigateur ou les débogueurs attachés. Ces améliorations s'appliquent à la fois à Webpack et Turbopack (maintenant stable avec Next.js 15).

Améliorations des source maps

Les erreurs sont désormais plus faciles à retracer grâce à une meilleure utilisation des source maps. Nous avons implémenté la propriété ignoreList des source maps, qui permet à Next.js de masquer les trames de pile pour les dépendances externes, mettant ainsi en avant votre code applicatif.

Pour une cartographie des noms de méthodes légèrement plus précise, nous recommandons d'utiliser Turbopack (maintenant stable), qui offre une meilleure gestion et détection des source maps par rapport à Webpack.

Pour les auteurs de bibliothèques : Nous recommandons de renseigner la propriété ignoreList dans les source maps lors de la publication de vos bibliothèques, surtout si elles sont configurées comme externes (par exemple dans la config serverExternalPackages).

Trames de pile réduites

Nous avons amélioré la logique de réduction des trames de pile pour mettre en évidence les parties les plus pertinentes de votre code.

  • Dans le navigateur et l'overlay d'erreur : Les trames provenant de dépendances tierces sont masquées par défaut pour se concentrer sur votre code applicatif. Vous pouvez afficher les trames masquées en cliquant sur "Afficher les trames ignorées" dans les outils de développement ou l'overlay.
  • Dans le terminal : Les trames des dépendances tierces sont également réduites par défaut, et le formatage des erreurs s'aligne désormais sur la sortie du navigateur pour une expérience de débogage cohérente. Les erreurs sont rejouées dans le navigateur pour vous assurer de ne pas manquer d'informations importantes pendant le développement si vous avez besoin de la pile d'appels complète.

Profilage amélioré

Les trames ignorées sont également reconnues par les profileurs intégrés aux navigateurs. Cela facilite le profilage de votre application, vous permettant d'identifier les fonctions lentes dans votre code sans le bruit des bibliothèques externes.

Améliorations avec l'Edge Runtime

Lors de l'utilisation de l'Edge Runtime, les erreurs s'affichent désormais de manière cohérente dans tous les environnements de développement, garantissant un débogage fluide. Auparavant, les erreurs enregistrées n'incluaient que le message sans la pile d'appels.

Avant et après

Terminal Avant :

Terminal
 ⨯ app/page.tsx (6:11) @ eval
 ⨯ Error: boom
    at eval (./app/page.tsx:12:15)
    at Page (./app/page.tsx:11:74)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at stringify (<anonymous>)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
digest: "380744807"
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |           ^
  7 |   }, [])
  8 |
  9 |   throwError()
 GET / 500 in 2354ms

Terminal Après :

Terminal
  ⨯ Error: boom
    at eval (app/page.tsx:6:10)
    at Page (app/page.tsx:5:32)
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |          ^
  7 |   }, [])
  8 |
  9 |   throwError() {
  digest: '225828171'
}

Overlay d'erreur Avant

Un exemple de l'overlay d'erreur Next.js avant la version 15.1

Overlay d'erreur Après

Un exemple de l'overlay d'erreur Next.js après la version 15.1

Ces améliorations rendent les erreurs plus claires et plus intuitives, vous permettant de consacrer votre temps à la construction de votre application plutôt qu'au débogage.

Nous sommes également ravis d'annoncer l'introduction d'une interface repensée pour l'overlay d'erreur, qui arrivera dans les prochaines versions.

after (stable)

L'API after() est désormais stable après son introduction dans la première RC de Next.js 15.

after() permet d'exécuter des tâches telles que la journalisation, l'analyse et d'autres synchronisations système après que la réponse a été envoyée en streaming à l'utilisateur, sans bloquer la réponse principale.

Changements clés

Depuis son introduction, nous avons stabilisé after() et pris en compte les retours, notamment :

  • Un meilleur support pour les serveurs Next.js auto-hébergés.
  • Des corrections de bugs pour les scénarios où after() interagissait avec d'autres fonctionnalités de Next.js.
  • Une meilleure extensibilité, permettant à d'autres plateformes d'injecter leurs propres primitives waitUntil() pour alimenter after().
  • Le support des API runtime comme cookies() et headers() dans les Server Actions et Route Handlers.
app/layout.js
import { after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Tâche secondaire
  after(() => {
    log();
  });
 
  // Tâche principale
  return <>{children}</>;
}

En savoir plus sur l'API after et comment l'utiliser dans la documentation.

forbidden et unauthorized (expérimental)

Next.js 15.1 inclut deux API expérimentales, forbidden() et unauthorized(), basées sur les retours de la communauté.

Nous aimerions avoir votre avis — essayez-les dans vos environnements de développement et partagez vos impressions dans ce fil de discussion.

Aperçu

Si vous connaissez l'App Router, vous avez probablement utilisé notFound() pour déclencher un comportement 404 avec le fichier personnalisable not-found.tsx. Avec la version 15.1, nous étendons cette approche aux erreurs d'autorisation :

• forbidden() déclenche une erreur 403 avec une interface personnalisable via forbidden.tsx.

• unauthorized() déclenche une erreur 401 avec une interface personnalisable via unauthorized.tsx.

Bon à savoir : Comme pour les erreurs notFound(), le code de statut sera 200 si l'erreur est déclenchée après l'envoi des en-têtes de réponse initiaux. En savoir plus.

Activation de la fonctionnalité

Comme cette fonctionnalité est encore expérimentale, vous devrez l'activer dans votre fichier next.config.ts :

next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
};
 
export default nextConfig;

Note : Le support de next.config.ts a été introduit dans Next.js 15. En savoir plus.

Utilisation de forbidden() et unauthorized()

Vous pouvez utiliser forbidden() et unauthorized() dans les Server Actions, Server Components, Client Components ou Route Handlers. Voici un exemple :

import { verifySession } from '@/app/lib/dal';
import { forbidden } from 'next/navigation';
 
export default async function AdminPage() {
  const session = await verifySession();
 
  // Vérifie si l'utilisateur a le rôle 'admin'
  if (session.role !== 'admin') {
    forbidden();
  }
 
  // Affiche la page admin pour les utilisateurs autorisés
  return <h1>Admin Page</h1>;
}

Création de pages d'erreur personnalisées

Pour personnaliser les pages d'erreur, créez les fichiers suivants :

app/forbidden.tsx
import Link from 'next/link';
 
export default function Forbidden() {
  return (
    <div>
      <h2>Accès interdit</h2>
      <p>Vous n'êtes pas autorisé à accéder à cette ressource.</p>
      <Link href="/">Retour à l'accueil</Link>
    </div>
  );
}
app/unauthorized.tsx
import Link from 'next/link';
 
export default function Unauthorized() {
  return (
    <div>
      <h2>Non autorisé</h2>
      <p>Veuillez vous connecter pour accéder à cette page.</p>
      <Link href="/login">Aller à la connexion</Link>
    </div>
  );
}

Nous tenons à remercier Clerk pour avoir proposé cette fonctionnalité via une PR et nous avoir aidés à prototyper l'API. Avant de stabiliser cette fonctionnalité dans la version 15.2, nous prévoyons d'ajouter plus de capacités et d'améliorations aux API pour prendre en charge un plus large éventail de cas d'utilisation.

Consultez la documentation des API unauthorized et forbidden pour plus de détails.

Autres changements

  • [Fonctionnalité] Utilisation d'ESLint 9 dans create-next-app (PR)
  • [Fonctionnalité] Augmentation du nombre maximal de tags de cache à 128 (PR)
  • [Fonctionnalité] Ajout d'une option pour désactiver le CssChunkingPlugin expérimental (PR)
  • [Fonctionnalité] Ajout du support expérimental de l'inlining CSS (PR)
  • [Amélioration] Silencement de l'avertissement Sass legacy-js-api (PR)
  • [Amélioration] Correction du rejet non géré lors de l'utilisation de rewrites (PR)
  • [Amélioration] Assurance que le processus parent se termine en cas d'échec du worker webpack (PR)
  • [Amélioration] Correction de l'interception de route sur une route catch-all (PR)
  • [Amélioration] Correction d'un problème de clonage de réponse dans la déduplication de requêtes (PR)
  • [Amélioration] Correction des redirections de Server Action entre plusieurs layouts racines (PR)
  • [Amélioration] Support de la fourniture de plugins MDX sous forme de chaînes pour la compatibilité avec Turbopack (PR)

Contributeurs

Next.js est le fruit du travail combiné de plus de 3 000 développeurs individuels. Cette version a été rendue possible par :

Un grand merci à @sokra, @molebox, @delbaoliveira, @eps1lon, @wbinnssmith, @JamBalaya56562, @hyungjikim, @adrian-faustino, @mottox2, @lubieowoce, @bgw, @mknichel, @wyattjoh, @huozhi, @kdy1, @mischnic, @ijjk, @icyJoseph, @acdlite, @unstubbable, @gaojude, @devjiwonchoi, @cena-ko, @lforst, @devpla, @samcx, @styfle, @ztanner, @Marukome0743, @timneutkens, @JeremieDoctrine, @ductnn, @karlhorky, @reynaldichernando, @chogyejin, @y-yagi, @philparzer, @alfawal, @Rhynden, @arlyon, @MJez29, @Goodosky, @themattmayfield, @tobySolutions, @kevinmitch14, @leerob, @emmanuelgautier, @mrhrifat, @lid0a, @boar-is, @nisabmohd, @PapatMayuri, @ovogmap, @Reflex2468, @LioRael, @betterthanhajin, @HerringtonDarkholme, @bpb54321, @ahmoin, @Kikobeats, @abdelrahmanAbouelkheir, @lumirlumir, @yeeed711, @petter, et @suu3 pour leur aide !