BackRetour au blog

Next.js 13.1

Next.js 13.1 introduit des améliorations pour le répertoire app, la transpilation intégrée de modules, le runtime Edge stable pour les routes API, et de nombreuses améliorations pour le support de Turbopack.

Next.js 13.1 inclut des améliorations pour les répertoires pages/ (stable) et app/ (bêta) :

Mettez à jour dès aujourd'hui en exécutant :

Terminal
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Améliorations de fiabilité et support pour le répertoire app

Dans Next.js 13, nous avons annoncé le nouveau répertoire app (bêta). Ce nouveau système de routage et de récupération de données peut être adopté progressivement aux côtés de votre répertoire pages existant.

Le répertoire app offre de nombreux avantages, notamment des layouts améliorés, la colocalisation de composants, tests et styles, la récupération de données au niveau des composants, et plus encore. Grâce à vos retours et tests précoces, nous avons apporté plusieurs améliorations à la fiabilité du répertoire app :

  • Pas de divs de Layout : Auparavant, le répertoire app ajoutait des éléments <div> supplémentaires pour faire défiler les layouts lors de la navigation. Avec 13.1, ces éléments supplémentaires ne sont plus créés. Le comportement de défilement est conservé.
  • Plugin TypeScript : Nous avons créé un nouveau plugin TypeScript qui fournit des suggestions pour les options de configuration de page et de layout, intègre la documentation directement dans votre IDE, et offre des conseils utiles sur les composants Serveur et Client (comme empêcher l'utilisation de useState dans les composants Serveur). En savoir plus.
  • Améliorations de fiabilité : Nous avons corrigé de nombreux bugs, notamment un meilleur support des modules CSS, la déduplication correcte de cache() et fetch() pour les layouts et pages, des fuites mémoire, et plus encore.
  • Moins de JavaScript côté client : Le répertoire app inclut désormais 9.3kB de moins en JavaScript côté client que le répertoire pages. Ce seuil n'augmente pas que vous ajoutiez 1 ou 1000 composants Serveur à votre application. Le runtime React est temporairement légèrement plus grand, cette augmentation est causée par le runtime des composants Serveur React, qui gère des mécanismes que Next.js gérait auparavant. Nous travaillons à réduire cela davantage.
pages/app/delta
Total First Load JSBaseline-9.3kB12.1% plus petit
Runtime Next.jsBaseline-12kB56.8% plus petit
Runtime ReactBaseline+2.7kB5.2% plus grand

Nous sommes enthousiastes à l'idée de continuer à progresser sur la stabilité du répertoire app. La documentation bêta pour le répertoire app a eu des centaines de mises à jour basées sur vos retours.

Transpilation intégrée de modules (stable)

Vous pouvez maintenant marquer des dépendances provenant de packages locaux (comme des monorepos) ou de dépendances externes (node_modules) pour qu'elles soient transpilées et bundlées. Ce support intégré remplace le package populaire next-transpile-modules.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
};
 
module.exports = nextConfig;

Nous remercions Pierre de la Martinière (@martpie) pour son travail sur ce package et son aide pour s'assurer que le support intégré répondait aux besoins de la communauté.

Résolution d'import pour des bundles plus petits

De nombreux packages npm populaires utilisent des "barrel files" pour fournir un seul fichier qui réexporte d'autres modules. Par exemple :

@acme/ui/index.ts
export { default as Button } from './dist/Button';
export { default as Slider } from './dist/Slider';
export { default as Dropdown } from './dist/Dropdown';

Cela permet aux utilisateurs du package d'utiliser des exports nommés en une seule ligne :

import { Button, Slider, Dropdown } from '@acme/ui';

Bien que les bundlers comprennent ces barrel files et puissent supprimer les réexports inutilisés (appelés "élimination de code mort"), ce processus implique l'analyse/compilation de tous les fichiers réexportés. Dans le cas des bibliothèques publiées, certains packages npm livrent des barrel files qui ont des milliers de modules réexportés, ce qui ralentit les temps de compilation. Ces bibliothèques recommandaient babel-plugin-transform-imports pour éviter ce problème, mais pour ceux utilisant SWC, il n'y avait pas de support précédent. Nous avons ajouté une nouvelle transformation SWC intégrée à Next.js appelée modularizeImports.

Ce nouveau paramètre active la transformation SWC qui modifie vos instructions d'import en fonction d'un modèle défini. Par exemple, le code ci-dessus utilisant trois composants serait automatiquement converti pour utiliser des imports directs, sans que le développeur n'ait besoin d'écrire ce code manuellement :

// Avant (avec barrel file)
import { Button, Slider, Dropdown } from '@acme/ui';
 
// Après (avec imports modularisés du plugin)
import Button from '@acme/ui/dist/Button';
import Slider from '@acme/ui/dist/Slider';
import Dropdown from '@acme/ui/dist/Dropdown';

Cette transformation est possible avec l'option modularizeImports dans next.config.js :

next.config.js
module.exports = {
  modularizeImports: {
    '@acme/ui': {
      transform: '@acme/ui/dist/{{member}}',
    },
  },
};

L'utilisation de cette transformation avec @mui/icons-material ou lodash permet de sauter la compilation des fichiers inutilisés. En savoir plus.

Voir une démo pour voir cela en action.

Un runtime Node.js léger pour le Edge, maintenant stable pour les routes API

Le runtime Edge dans Next.js utilise un sous-ensemble strict des APIs Node.js (comme Request, Response, et plus) qui sont compatibles avec les plateformes de calcul Edge comme Vercel ou lors d'un auto-hébergement. Ces APIs fonctionnent partout, y compris dans le navigateur, permettant aux développeurs de les apprendre une fois et de les écrire partout.

pages/api/hello.ts
// Le préfixe "experimental-" n'est plus nécessaire
export const config = {
  runtime: 'edge',
};
 
export default function handler(req: Request) {
  return new Response('Hello World');
}

Le Middleware Next.js utilise déjà ce runtime Edge léger par défaut pour de meilleures performances. Comme le Middleware peut s'exécuter avant chaque requête dans votre application, avoir un runtime léger est essentiel pour garantir une faible latence. Dans Next.js 12.2, nous avons ajouté la possibilité d'utiliser optionnellement ce runtime pour les routes API également.

Avec 13.1, le runtime Edge dans Next.js est maintenant stable pour les routes API. Lors d'un auto-hébergement, le Middleware et les routes API utilisant le runtime Edge s'exécuteront comme une charge de travail single-region par défaut dans le cadre de next start. Sur Vercel, le Middleware Next.js et les routes API sont déployés globalement en utilisant les fonctions Edge de Vercel pour la latence la plus faible possible. Les fonctions Edge de Vercel sont également maintenant généralement disponibles.

Améliorations de Turbopack

Après la sortie de Turbopack en alpha avec Next.js 13, nous nous sommes concentrés sur l'amélioration de la fiabilité, l'ajout de support pour les fonctionnalités les plus demandées, et la définition de plans pour les plugins et l'utilisation dans d'autres frameworks.

Depuis Next.js 13.0.0, Turbopack :

  • Supporte PostCSS, y compris Tailwind CSS
  • Supporte next/image
  • Supporte @next/font (Google Fonts)
  • Supporte le chargement de CSS à partir d'instructions import() dynamiques
  • Supporte les source maps CSS (merci à @ahabhgk pour leur contribution)
  • Amélioration de la gestion des erreurs dans l'overlay d'erreur de next dev
  • Amélioration de l'utilisation mémoire
  • Amélioration du support des modules CSS
  • Amélioration de l'algorithme de chunking pour les mises à jour HMR
  • Amélioration de la fiabilité des source maps HMR

Nous remercions Evan You et la communauté Vite pour leurs retours et contributions afin de s'assurer que les benchmarks Turbopack sont aussi précis que possible. Nous avons travaillé avec l'équipe Vite pour valider les derniers benchmarks Turbopack et apporter de nombreuses améliorations à notre méthodologie de test.

Grâce à cette collaboration, nous utilisons maintenant une métrique plus précise qui inclut le temps passé dans le mécanisme de mise à jour de React. Nous avons pu améliorer le temps de React Fast Refresh de 30ms dans Turbopack ainsi que dans Next.js 13.1 sur webpack. Nous avons également ajouté un nouveau benchmark pour l'utilisation de Vite avec SWC, qui montre des performances améliorées par rapport à l'utilisation de Vite par défaut avec Babel. Voir les benchmarks mis à jour ou lire sur la méthodologie de test.

Essayez la version alpha de Turbopack dès aujourd'hui dans Next.js 13 avec next dev --turbo. Si vous avez des retours, faites-le nous savoir sur la Discussion GitHub.

Middleware avancé de Next.js

Grâce à vos retours, nous rendons le Middleware Next.js plus puissant que jamais. Avec 13.1, vous pouvez maintenant retourner des réponses depuis le Middleware, ainsi que définir des en-têtes sur la requête.

Ces améliorations d'API vous offrent une nouvelle flexibilité puissante pour personnaliser chaque partie du cycle de vie du routage Next.js. L'option de configuration experimental.allowMiddlewareResponseBody dans next.config.js n'est plus nécessaire.

Vous pouvez maintenant plus facilement définir des en-têtes sur la requête, ainsi que répondre directement sans avoir à rewrite ou redirect :

middleware.ts
import { NextResponse } from 'next/server';
 
export function middleware(request: Request) {
  // Vérifier si un utilisateur a accès...
  if (!isAuthorized(request)) {
    return NextResponse.json({ message: 'Unauthorized' });
  }
 
  // Ajouter un nouvel en-tête, cela modifiera les en-têtes de requête entrants
  // que vous pouvez lire dans getServerSideProps et les routes API
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13.1');
 
  return NextResponse.next({
    request: {
      // Appliquer les nouveaux en-têtes de requête
      headers: requestHeaders,
    },
  });
}

En savoir plus sur le Middleware avancé de Next.js.

Autres améliorations

  • @next/font supporte maintenant l'ajout de plusieurs poids et styles de police dans la même déclaration de police. En savoir plus.
  • next/dynamic utilise maintenant les primitives React lazy() et <Suspense>. L'option précédente suspense n'est plus nécessaire. Avec ces changements, next/dynamic est maintenant compatible avec le répertoire app.
  • create-next-app a été mis à jour avec un nouveau design, incluant maintenant @next/font par défaut pour l'auto-hébergement automatique des polices sans décalage de layout. Essayez-le avec npx create-next-app@latest ou déployez le template.
  • Nous avons apporté de nombreuses améliorations au Playground du répertoire App, qui met en avant certaines des dernières fonctionnalités et conventions du répertoire app (bêta) dans Next.js 13. Déployez le vôtre.
  • Nous avons créé un template de galerie d'images haute performance, qui inclut des placeholders d'images, du lazy loading, une optimisation automatique, un support clavier, et plus encore. Déployez le vôtre.
  • Nous avons créé une ressource pour comprendre comment migrer une grande application open-source React et Express.js vers Next.js, incluant une marche à suivre détaillée et des liens vers des commits spécifiques.

Communauté

Next.js est le résultat du travail combiné de plus de 2 400 développeurs individuels, de partenaires industriels comme Google et Meta, et de notre équipe principale chez Vercel. Avec plus de 3,6 millions de téléchargements npm par semaine et 97 900+ étoiles GitHub, Next.js est l'une des façons les plus populaires de construire le Web.

Rejoignez la communauté sur GitHub Discussions, Reddit, et Discord.

Cette version a été rendue possible par :

Et les contributions de : @aarnadlr, @aaronbrown-vercel, @aaronjy, @abayomi185, @ademilter, @adictonator, @adilansari, @adtc, @alantoa, @aleksa-codes, @alfred-mountfield, @alpha-xek, @andarist, @andykenward, @anujssstw, @artdevgame, @artechventure, @arturbien, @aziyatali, @bennettdams, @bertho-zero, @blue-devil1134, @bot08, @brkalow, @brvnonascimento, @chanceaclark, @chibicode, @chrisipanaque, @chunsch, @colinking, @craigwheeler, @ctjlewis, @cvolant, @danmindru, @davidnx, @delbaoliveira, @devvspaces, @dtinth, @ducanhgh, @duncanogle, @ethomson, @fantaasm, @feugy, @fomichroman, @gruz0, @haschikeks, @hughlilly, @idoob, @iiegor, @imranbarbhuiya, @ingovals, @inokawa, @ishaqibrahimbot, @ismaelrumzan, @jakemstar, @janicklas-ralph, @jaredpalmer, @jaykch, @jimcresswell, @joliss, @josephcsoti, @joshuaslate, @joulev, @jueungrace, @juliusmarminge, @karlhorky, @kikobeats, @kleintorres, @koenpunt, @koltong, @kosai106, @labyrinthitis, @lachlanjc, @laityned, @leerob, @leoortizz, @lorenzobloedow, @lucasassisrosa, @m7yue, @manovotny, @marcus-rise, @matthew-heath, @mattpr, @maxleiter, @maxproske, @meenie, @mmaaaaz, @mnajdova, @moetazaneta, @mrkldshv, @nathanhammond, @nekochantaiwan, @nfinished, @niedziolkamichal, @nocell, @notrab, @nuta, @nutlope, @obusk, @orionmiz, @peraltafederico, @reshmi-sriram, @reyrodrigez, @rightones, @rishabhpoddar, @saseungmin, @serkanbektas, @sferadev, @silvioprog, @sivtu, @soonoo, @sqve, @steven-tey, @sukkaw, @superbahbi, @teobler, @theevilhead, @thomasballinger, @timeyoutakeit, @valentinh, @ws-jm, @wxh06, @yasath, @yutsuten, et @zekicaneksi.