Comment effectuer la mise à niveau vers la version 13

Mise à niveau 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 à niveau @types/react et @types/react-dom vers leurs dernières versions.

Résumé des changements en v13

• Les navigateurs pris en charge ont été modifiés pour abandonner Internet Explorer et cibler les navigateurs modernes.
• La version minimale de Node.js a été augmenté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 a été augmentée de 17.0.2 à 18.2.0.
• La propriété de configuration swcMinify a été changée de false à true. Consultez 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 à niveau 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 routeur 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 au 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 et automatiquement 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ées 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 avait é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, lisez 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 donne la possibilité de personnaliser votre expérience de chargement des polices tout en garantissant des performances et une confidentialité optimales.

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