Version 13

Mise à jour de la version 12 à la version 13

Pour mettre à jour vers Next.js version 13, exécutez la commande suivante avec votre gestionnaire de paquets préféré :

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

yarn add next@13 react@latest react-dom@latest eslint-config-next@13

pnpm i next@13 react@latest react-dom@latest eslint-config-next@13

bun add next@13 react@latest react-dom@latest eslint-config-next@13

Bon à savoir : Si vous utilisez TypeScript, assurez-vous également de mettre à jour @types/react et @types/react-dom vers leurs dernières versions.

Résumé de la version 13

• Les navigateurs pris en charge ont été modifiés pour abandonner Internet Explorer et cibler les navigateurs modernes.
• La version minimale de Node.js est passée de 12.22.0 à 16.14.0, car les versions 12.x et 14.x ont atteint leur fin de vie.
• La version minimale de React est passée de 17.0.2 à 18.2.0.
• La propriété de configuration swcMinify a été changé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 automatiquement et en toute sécurité vos imports.
• L'enfant de next/link ne peut plus être <a>. Ajoutez la prop legacyBehavior pour utiliser l'ancien comportement ou supprimez la balise <a> pour effectuer la mise à niveau. Un codemod est disponible pour mettre à jour automatiquement votre code.
• La propriété de configuration target a été supprimée et remplacée par Output File Tracing.

Migration des fonctionnalités partagées

Next.js 13 introduit un nouveau répertoire app avec de nouvelles fonctionnalités et conventions. Cependant, la mise à niveau vers Next.js 13 ne nécessite pas l'utilisation du nouveau répertoire app.

Vous pouvez continuer à utiliser pages avec les nouvelles fonctionnalités qui fonctionnent dans les deux répertoires, comme le composant Image mis à jour, le composant Link, le composant Script et l'optimisation des polices.

Composant <Image/>

Next.js 12 a introduit de nombreuses améliorations pour le composant Image avec un import temporaire : next/future/image. Ces améliorations incluaient moins de JavaScript côté client, des moyens plus simples d'étendre et de styliser les images, une meilleure accessibilité et un chargement différé natif par le navigateur.

À partir de Next.js 13, ce nouveau comportement est maintenant celui par défaut pour next/image.

Deux codemods sont disponibles pour vous aider à migrer vers le nouveau composant Image :

• next-image-to-legacy-image : Ce codemod renommera automatiquement et en toute sécurité les imports next/image en next/legacy/image pour maintenir le même comportement que Next.js 12. Nous recommandons d'exécuter ce codemod pour mettre à jour rapidement vers Next.js 13.
• next-image-experimental : Après avoir exécuté le codemod précédent, vous pouvez optionnellement exécuter ce codemod expérimental pour mettre à niveau next/legacy/image vers le nouveau next/image, ce qui supprimera les props inutilisés et ajoutera des styles en ligne. Notez que ce codemod est expérimental et ne couvre que les usages statiques (comme <Image src={img} layout="responsive" />) mais pas les usages dynamiques (comme <Image {...props} />).

Alternativement, vous pouvez effectuer la mise à jour manuellement en suivant le guide de migration et consulter également la comparaison avec l'ancienne version.

Composant <Link>

Le composant <Link> ne nécessite plus d'ajouter manuellement une balise <a> comme enfant. Ce comportement a été ajouté comme option expérimentale dans la version 12.2 et est maintenant celui par défaut. Dans Next.js 13, <Link> rend toujours <a> et vous permet de transmettre les props à 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>À propos</a>
</Link>

// Next.js 13 : `<Link>` rend toujours `<a>` en interne
<Link href="/about">
  À propos
</Link>

Pour mettre à niveau vos liens vers Next.js 13, vous pouvez utiliser le codemod new-link.

Composant <Script>

Le comportement de next/script a été mis à jour pour prendre en charge à la fois pages et app. Si vous adoptez progressivement app, consultez le guide de mise à niveau.

Optimisation des polices

Auparavant, Next.js vous aidait à optimiser les polices en intégrant le CSS des polices. La version 13 introduit le nouveau module next/font qui vous permet de personnaliser votre expérience de chargement des polices tout en garantissant des performances optimales et le respect de la vie privée.

Consultez Optimisation des polices pour apprendre à utiliser next/font.