Next.js 13 | Next.js Français

Comme nous l'avons annoncé lors de la Next.js Conf, Next.js 13 (stable) pose les bases pour être dynamique sans limites :

Répertoire app (bêta) : Plus simple, plus rapide, moins de JS côté client.
Turbopack (alpha) : Jusqu'à 700x plus rapide que Webpack, basé sur Rust.
Nouveau next/image : Plus rapide avec un lazy loading natif du navigateur.
Nouveau @next/font (bêta) : Polices auto-hébergées sans décalage de mise en page.
Amélioration de next/link : API simplifiée avec <a> automatique.

Next.js 13 et le répertoire pages sont stables et prêts pour la production. Mettez à jour dès maintenant en exécutant :

Terminal

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

Nouveau répertoire `app` (Bêta)

Aujourd'hui, nous améliorons l'expérience de routing et de layouts dans Next.js et nous alignons sur le futur de React avec l'introduction du répertoire app. Ceci fait suite au RFC Layouts précédemment publié pour les retours de la communauté.

Le répertoire app est actuellement en bêta et nous ne recommandons pas encore son utilisation en production. Vous pouvez utiliser Next.js 13 avec le répertoire pages avec des fonctionnalités stables comme les composants next/image et next/link améliorés, et adopter le répertoire app à votre rythme. Le répertoire pages continuera d'être supporté dans un avenir prévisible.

Le répertoire app inclut le support pour :

Layouts : Partagez facilement l'UI entre les routes tout en préservant l'état et en évitant les re-renders coûteux.
Composants Serveur : Faites du serveur-first la norme pour les applications les plus dynamiques.
Streaming : Affichez des états de chargement instantanés et streamer des unités d'UI au fur et à mesure de leur rendu.
Support du fetching de données : Les composants serveur async et l'API fetch étendue permettent le fetching au niveau composant.

Le répertoire app peut être adopté progressivement depuis votre répertoire pages/ existant.

Layouts

Le répertoire app/ facilite la création d'interfaces complexes qui maintiennent l'état entre les navigations, évitent les re-renders coûteux et permettent des patterns de routing avancés. De plus, vous pouvez imbriquer des layouts et colocaliser le code applicatif avec vos routes, comme les composants, tests et styles.

Le répertoire app/ peut être adopté progressivement depuis votre répertoire pages/ existant.

Créer des routes dans app/ nécessite un seul fichier, page.js :

app/page.js

// Ce fichier correspond à la route index (/)
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Vous pouvez ensuite définir des layouts via le système de fichiers. Les layouts partagent l'UI entre plusieurs pages. Lors de la navigation, les layouts préservent l'état, restent interactifs et ne se re-rendent pas.

app/blog/layout.js

export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

En savoir plus sur les layouts et pages ou déployer un exemple pour essayer.

Composants Serveur

Le répertoire app/ introduit le support de la nouvelle architecture Composants Serveur de React. Les composants Serveur et Client utilisent respectivement le serveur et le client pour ce qu'ils font de mieux - vous permettant de construire des applications rapides et hautement interactives avec un seul modèle de programmation offrant une excellente expérience développeur.

Avec les Composants Serveur, nous posons les bases pour construire des interfaces complexes tout en réduisant la quantité de JavaScript envoyée au client, permettant des chargements de page initiaux plus rapides.

Lorsqu'une route est chargée, le runtime Next.js et React sera chargé, qui est cachable et de taille prévisible. Ce runtime n'augmente pas en taille à mesure que votre application grandit. De plus, le runtime est chargé de manière asynchrone, permettant à votre HTML côté serveur d'être progressivement amélioré côté client.

En savoir plus sur les Composants Serveur ou déployer un exemple pour essayer.

Streaming

Le répertoire app/ introduit la capacité de rendre progressivement et de streamer de manière incrémentale des unités rendues de l'UI vers le client.

Avec les Composants Serveur et les layouts imbriqués dans Next.js, vous pouvez rendre instantanément les parties de la page qui ne nécessitent pas spécifiquement de données, et afficher un état de chargement pour les parties de la page qui fetch des données. Avec cette approche, l'utilisateur n'a pas à attendre que toute la page soit chargée avant de pouvoir interagir avec elle.

Vous pouvez colocaliser votre code applicatif, comme les composants, tests et styles, avec vos routes.

Lorsqu'il est déployé sur Vercel, les applications Next.js 13 utilisant le répertoire app/ streameront les réponses par défaut dans les runtimes Node.js et Edge pour une meilleure performance.

En savoir plus sur le streaming ou déployer un exemple pour essayer.

Fetching de données

Le récent RFC Support for Promises de React introduit une nouvelle manière puissante de fetcher des données et gérer des promesses dans les composants :

app/page.js

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // La valeur retournée n'est *pas* sérialisée
  // Vous pouvez retourner Date, Map, Set, etc.
  return res.json();
}
 
// Ceci est un composant serveur async
export default async function Page() {
  const data = await getData();
 
  return <main>{/* ... */}</main>;
}

L'API Web native fetch a également été étendue dans React et Next.js. Elle dédoublonne automatiquement les requêtes fetch et fournit une manière flexible de fetcher, cacher et revalider les données au niveau composant. Cela signifie que tous les bénéfices du Static Site Generation (SSG), Server-Side Rendering (SSR) et Incremental Static Regeneration (ISR) sont maintenant disponibles via une seule API :

// Cette requête devrait être cachée jusqu'à invalidation manuelle.
// Similaire à `getStaticProps`.
// `force-cache` est la valeur par défaut et peut être omise.
fetch(URL, { cache: 'force-cache' });
 
// Cette requête devrait être re-fetchée à chaque requête.
// Similaire à `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
 
// Cette requête devrait être cachée avec une durée de vie de 10 secondes.
// Similaire à `getStaticProps` avec l'option `revalidate`.
fetch(URL, { next: { revalidate: 10 } });

Dans le répertoire app, vous pouvez fetcher des données dans les layouts, pages, et composants - incluant le support des réponses streamées depuis le serveur.

Nous permettons des manières ergonomiques de gérer les états de chargement et d'erreur et de streamer l'UI au fur et à mesure de son rendu. Dans une future version, nous améliorerons et simplifierons également les mutations de données.

Avec le répertoire app/, vous pouvez utiliser un nouveau fichier spécial loading.js pour créer automatiquement une UI de chargement instantané avec des limites Suspense.

Nous sommes enthousiastes de travailler avec la communauté open-source, les mainteneurs de packages et d'autres entreprises contribuant à l'écosystème React pour construire cette nouvelle ère de React et Next.js. La capacité à colocaliser le fetching de données dans les composants et d'envoyer moins de JavaScript au client étaient deux retours importants de la communauté que nous sommes heureux d'inclure avec le répertoire app/.

En savoir plus sur le fetching de données ou déployer un exemple pour essayer.

Présentation de Turbopack (Alpha)

Next.js 13 inclut Turbopack, le nouveau successeur de Webpack basé sur Rust.

Webpack a été téléchargé plus de 3 milliards de fois. Bien qu'il ait été une partie intégrante de la construction du Web, nous avons atteint les limites de performance maximales possibles avec des outils basés sur JavaScript.

Dans Next.js 12, nous avons commencé notre transition vers des outils natifs basés sur Rust. Nous avons commencé par migrer depuis Babel, ce qui a résulté en une transpilation 17x plus rapide. Puis, nous avons remplacé Terser, résultant en une minification 6x plus rapide. Il est temps de passer entièrement au natif pour le bundling.

Utiliser Turbopack alpha avec Next.js 13 résulte en :

700x plus rapide que Webpack pour les mises à jour
10x plus rapide que Vite pour les mises à jour
4x plus rapide que Webpack pour les démarrages à froid

Turbopack est notre successeur basé sur Rust à Webpack, avec un HMR 700x plus rapide pour les grosses applications.

Turbopack ne bundle que les assets minimum requis en développement, donc le temps de démarrage est extrêmement rapide. Sur une application avec 3 000 modules, Turbopack prend 1.8 secondes pour démarrer. Vite prend 11.4 secondes et Webpack prend 16.5 secondes.

Turbopack a un support natif pour les Composants Serveur, TypeScript, JSX, CSS, et plus. Durant l'alpha, de nombreuses fonctionnalités ne sont pas encore supportées. Nous aimerions avoir vos retours sur l'utilisation de Turbopack pour accélérer vos itérations locales.

Note : Turbopack dans Next.js supporte actuellement seulement next dev. Voir les fonctionnalités supportées. Nous travaillons également à ajouter le support pour next build via Turbopack.

Essayez Turbopack alpha dès aujourd'hui dans Next.js 13 avec next dev --turbo.

`next/image`

Next.js 13 introduit un nouveau composant Image puissant, vous permettant d'afficher facilement des images sans décalage de mise en page et d'optimiser les fichiers à la demande pour une meilleure performance.

Lors du sondage de la communauté Next.js, 70% des répondants nous ont dit qu'ils utilisaient le composant Image de Next.js en production, et en retour, ont vu une amélioration des Core Web Vitals. Avec Next.js 13, nous améliorons encore next/image.

Le nouveau composant Image :

Envoie moins de JavaScript côté client
Plus facile à styler et configurer
Plus accessible en requérant des balises alt par défaut
Aligné avec la plateforme Web
Plus rapide car le lazy loading natif ne nécessite pas d'hydratation

app/page.js

import Image from 'next/image';
import avatar from './lee.png';
 
export default function Home() {
  // "alt" est maintenant requis pour une meilleure accessibilité
  // optionnel : les fichiers image peuvent être colocalisés dans le répertoire app/
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

En savoir plus sur le composant Image ou déployer un exemple pour essayer.

Mise à niveau de `next/image` vers Next.js 13

L'ancien composant Image a été renommé en next/legacy/image. Nous fournissons un codemod qui mettra automatiquement à jour votre utilisation existante de next/image vers next/legacy/image. Par exemple, cette commande exécuterait le codemod sur votre répertoire ./pages lorsqu'elle est lancée depuis la racine :

Terminal

npx @next/codemod next-image-to-legacy-image ./pages

En savoir plus sur le codemod.

`@next/font`

Next.js 13 introduit un tout nouveau système de polices qui :

Optimise automatiquement vos polices, y compris les polices personnalisées
Supprime les requêtes réseau externes pour une meilleure confidentialité et performance
Auto-hébergement natif intégré pour n'importe quel fichier de police
Zéro décalage de mise en page automatiquement en utilisant la propriété CSS size-adjust

Ce nouveau système de polices vous permet d'utiliser commodément toutes les Google Fonts avec performance et confidentialité en tête. Les fichiers CSS et de police sont téléchargés au moment du build et auto-hébergés avec le reste de vos assets statiques. Aucune requête n'est envoyée à Google par le navigateur.

app/layout.js / pages/_app.js

import { Inter } from '@next/font/google';
 
const inter = Inter();
 
<html className={inter.className}></html>;

Les polices personnalisées sont également supportées, incluant le support de l'auto-hébergement automatique, du caching et du préchargement des fichiers de police.

app/layout.js / pages/_app.js

import localFont from '@next/font/local';
 
const myFont = localFont({ src: './my-font.woff2' });
 
<html className={myFont.className}></html>;

Vous pouvez personnaliser chaque partie de l'expérience de chargement des polices tout en garantissant une excellente performance et aucun décalage de mise en page, incluant le font-display, préchargement, fallbacks, et plus.

En savoir plus sur le nouveau composant Police ou déployer un exemple pour essayer.

`next/link`

next/link ne nécessite plus d'ajouter manuellement <a> comme enfant.

Ceci a été ajouté comme option expérimentale dans 12.2 et est maintenant la valeur par défaut. Dans Next.js 13, <Link> rend toujours un <a> et vous permet de transférer les props vers la balise sous-jacente. Par exemple :

import Link from 'next/link'
 
// Next.js 12 : `<a>` doit être imbriqué sinon il est exclu
<Link href="/about">
  <a>About</a>
</Link>
 
// Next.js 13 : `<Link>` rend toujours `<a>`
<Link href="/about">
  About
</Link>

En savoir plus sur le composant Link amélioré ou déployer un exemple pour essayer.

Mise à niveau de `next/link` vers Next.js 13

Pour mettre à niveau vos liens vers Next.js 13, nous avons fourni un codemod qui mettra automatiquement à jour votre base de code. Par exemple, cette commande exécutera le codemod sur votre répertoire ./pages lorsqu'elle est lancée depuis la racine :

Terminal

npx @next/codemod new-link ./pages

En savoir plus sur le codemod ou consultez la documentation.

Génération d'image OG

Les cartes sociales, également connues sous le nom d'images Open Graph, peuvent considérablement augmenter le taux d'engagement des clics sur votre contenu, certaines expériences montrant jusqu'à 40 % de conversions en plus.

Les cartes sociales statiques prennent du temps, sont sujettes aux erreurs et difficiles à maintenir. Pour cette raison, les cartes sociales sont souvent négligées voire complètement omises. Jusqu'à présent, les cartes sociales dynamiques nécessitant une personnalisation et un calcul en temps réel étaient difficiles et coûteuses à réaliser.

Nous avons créé une nouvelle bibliothèque @vercel/og qui fonctionne parfaitement avec Next.js pour générer des cartes sociales dynamiques.

pages/api/og.jsx

import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    ),
  );
}

Cette approche est 5 fois plus rapide que les solutions existantes grâce à l'utilisation des Vercel Edge Functions, de WebAssembly et d'une toute nouvelle bibliothèque centrale pour convertir HTML et CSS en images, tout en tirant parti de l'abstraction des composants React.

En savoir plus sur la génération d'images OG ou déployez un exemple pour l'essayer.

Mises à jour de l'API Middleware

Dans Next.js 12, nous avons introduit Middleware pour offrir une flexibilité totale avec le routeur Next.js. Nous avons entendu vos retours sur la conception initiale de l'API et avons apporté des ajouts pour améliorer l'expérience des développeurs et ajouter de nouvelles fonctionnalités puissantes.

Vous pouvez maintenant définir plus facilement des en-têtes sur la requête :

middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  // Clone les en-têtes de la requête et définit un nouvel en-tête `x-version`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13');
 
  // Vous pouvez également définir des en-têtes de requête dans NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // Nouveaux en-têtes de requête
      headers: requestHeaders,
    },
  });
 
  // Définit un nouvel en-tête de réponse `x-version`
  response.headers.set('x-version', '13');
  return response;
}

Vous pouvez maintenant également fournir une réponse directement depuis Middleware, sans avoir à utiliser rewrite ou redirect.

middleware.ts

import { NextRequest, NextResponse } from 'next/server';
import { isAuthenticated } from '@lib/auth';
 
// Limite le middleware aux chemins commençant par `/api/`
export const config = {
  matcher: '/api/:function*',
};
 
export function middleware(request: NextRequest) {
  // Appelle notre fonction d'authentification pour vérifier la requête
  if (!isAuthenticated(request)) {
    // Répond avec un JSON indiquant un message d'erreur
    return NextResponse.json(
      {
        success: false,
        message: 'Échec de l\'authentification',
      },
      {
        status: 401,
      },
    );
  }
}

L'envoi de réponses depuis Middleware nécessite actuellement l'option de configuration experimental.allowMiddlewareResponseBody dans next.config.js.

Changements cassants

La version minimale de React est passée de 17.0.2 à 18.2.0.
La version minimale de Node.js est passée de 12.22.0 à 14.6.0, car la version 12.x a atteint sa fin de vie (PR).
La propriété de configuration swcMinify est passée de false à true. Voir Next.js Compiler pour plus d'informations.
L'import next/image a été renommé en next/legacy/image. L'import next/future/image a été renommé en next/image. Un codemod est disponible pour renommer vos imports de manière sûre et automatique.
L'enfant de next/link ne peut plus être <a>. Ajoutez la prop legacyBehavior pour utiliser le comportement hérité ou supprimez la balise <a> pour effectuer la mise à niveau. Un codemod est disponible pour mettre à niveau automatiquement votre code.
Les routes ne sont plus préchargées lorsque le User-Agent est un bot.
L'option obsolète target de next.config.js a été supprimée.
Les navigateurs pris en charge ont été modifiés pour abandonner Internet Explorer et cibler les navigateurs modernes. Vous pouvez toujours utiliser Browserslist pour modifier les navigateurs ciblés.
- Chrome 64+
- Edge 79+
- Firefox 67+
- Opera 51+
- Safari 12+

Pour en savoir plus, consultez le guide de mise à niveau.

Communauté

Il y a six ans, nous avons publié Next.js au public. Nous nous étions fixés pour objectif de créer un framework React sans configuration qui simplifie votre expérience de développement. Avec le recul, il est incroyable de voir comment la communauté a grandi et ce que nous avons pu livrer ensemble. Continuons sur cette lancée.

Next.js est le fruit du travail combiné de plus de 2 400 développeurs individuels, de partenaires industriels comme Google et Meta, et de notre équipe centrale. Avec plus de 3 millions de téléchargements npm par semaine et 94 000 étoiles sur GitHub, Next.js est l'une des façons les plus populaires de construire le Web.

Un merci spécial à l'équipe Aurora de Google Chrome qui a aidé à la recherche fondamentale et aux expériences qui ont conduit à cette version.

Cette version a été rendue possible grâce aux contributions de : @ijjk, @huozhi, @HaNdTriX, @iKethavel, @timneutkens, @shuding, @rishabhpoddar, @hanneslund, @balazsorban44, @devknoll, @anthonyshew, @TomerAberbach, @philippbosch, @styfle, @mauriciomutte, @hayitsdavid, @abdennor, @Kikobeats, @cjdunteman, @Mr-Afonso, @kdy1, @jaril, @abdallah-nour, @North15, @feedthejim, @brunocrosier, @Schniz, @sedlukha, @hashlash, @Ethan-Arrowood, @fireairforce, @migueloller, @leerob, @janicklas-ralph, @Trystanr, @atilafassina, @nramkissoon, @kasperadk, @valcosmos, @henriqueholtz, @nip10, @jesstelford, @lorensr, @AviAvinav, @SukkaW, @jaycedotbin, @saurabhburade, @notrab, @kwonoj, @sanruiz, @angeloashmore, @falsepopsky, @fmontes, @Gebov, @UltiRequiem, @p13lgst, @Simek, @mrkldshv, @thomasballinger, @kyliau, @AdarshKonchady, @endymion1818, @pedro757, @perkinsjr, @gnoff, @jridgewell, @silvioprog, @mabels, @nialexsan, @feugy, @jackromo888, @crazyurus, @EarlGeorge, @MariaSolOs, @lforst, @maximbaz, @maxam2017, @teobler, @Nutlope, @sunwoo0706, @WestonThayer, @Brooooooklyn, @Nsttt, @charlypoly, @aprendendofelipe, @sviridoff, @jackton1, @nuta, @Rpaudel379, @marcialca, @MarDi66, @ismaelrumzan, @javivelasco, @eltociear, et @hiro0218.