Comment mettre à jour vers la version 11

Pour effectuer la mise à jour vers la version 11, exécutez la commande suivante :

npm i next@11 react@17 react-dom@17

yarn add next@11 react@17 react-dom@17

pnpm up next@11 react@17 react-dom@17

bun add next@11 react@17 react-dom@17

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

Webpack 5

Webpack 5 est maintenant la configuration par défaut pour toutes les applications Next.js. Si vous n'aviez pas de configuration webpack personnalisée, votre application utilise déjà webpack 5. Si vous avez une configuration webpack personnalisée, vous pouvez consulter la documentation webpack 5 de Next.js pour obtenir des conseils de mise à jour.

Nettoyage de distDir désormais activé par défaut

Le répertoire de sortie de construction (par défaut .next) est maintenant vidé par défaut, à l'exception des caches Next.js. Vous pouvez vous référer au RFC sur le nettoyage de distDir pour plus d'informations.

Si votre application dépendait de ce comportement auparavant, vous pouvez désactiver ce nouveau comportement par défaut en ajoutant le flag cleanDistDir: false dans next.config.js.

PORT est maintenant supporté pour next dev et next start

Next.js 11 prend en charge la variable d'environnement PORT pour définir le port sur lequel l'application s'exécute. L'utilisation de -p/--port est toujours recommandée, mais si vous étiez empêché d'utiliser -p d'une manière ou d'une autre, vous pouvez maintenant utiliser PORT comme alternative :

Exemple :

PORT=4000 next start

Personnalisation de next.config.js pour importer des images

Next.js 11 prend en charge l'importation d'images statiques avec next/image. Cette nouvelle fonctionnalité repose sur la capacité à traiter les imports d'images. Si vous aviez précédemment ajouté les packages next-images ou next-optimized-images, vous pouvez soit passer à la nouvelle prise en charge intégrée utilisant next/image, soit désactiver la fonctionnalité :

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Supprimer super.componentDidCatch() de pages/_app.js

La méthode componentDidCatch du composant next/app a été dépréciée dans Next.js 9 car elle n'est plus nécessaire et est depuis devenue une opération sans effet. Dans Next.js 11, elle a été supprimée.

Si votre pages/_app.js a une méthode componentDidCatch personnalisée, vous pouvez supprimer super.componentDidCatch car elle n'est plus nécessaire.

Supprimer Container de pages/_app.js

Cette exportation a été dépréciée dans Next.js 9 car elle n'est plus nécessaire et est depuis devenue une opération sans effet avec un avertissement pendant le développement. Dans Next.js 11, elle a été supprimée.

Si votre pages/_app.js importe Container depuis next/app, vous pouvez le supprimer car il a été retiré. Apprenez-en plus dans la documentation.

Supprimer l'utilisation de props.url dans les composants de page

Cette propriété a été dépréciée dans Next.js 4 et affichait depuis un avertissement pendant le développement. Avec l'introduction de getStaticProps / getServerSideProps, ces méthodes interdisaient déjà l'utilisation de props.url. Dans Next.js 11, elle a été complètement supprimée.

Vous pouvez en apprendre plus dans la documentation.

Supprimer la propriété unsized sur next/image

La propriété unsized sur next/image a été dépréciée dans Next.js 10.0.1. Vous pouvez utiliser layout="fill" à la place. Dans Next.js 11, unsized a été supprimée.

Supprimer la propriété modules sur next/dynamic

Les options modules et render pour next/dynamic ont été dépréciées dans Next.js 9.5. Cela a été fait pour rapprocher l'API next/dynamic de React.lazy. Dans Next.js 11, les options modules et render ont été supprimées.

Cette option n'a pas été mentionnée dans la documentation depuis Next.js 8, il est donc peu probable que votre application l'utilise.

Si votre application utilise modules et render, vous pouvez vous référer à la documentation.

Supprimer Head.rewind

Head.rewind était une opération sans effet depuis Next.js 9.5. Dans Next.js 11, elle a été supprimée. Vous pouvez supprimer en toute sécurité votre utilisation de Head.rewind.

Locales Moment.js exclues par défaut

Moment.js inclut des traductions pour de nombreuses locales par défaut. Next.js exclut maintenant automatiquement ces locales par défaut pour optimiser la taille du bundle pour les applications utilisant Moment.js.

Pour charger une locale spécifique, utilisez cet extrait de code :

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

Vous pouvez désactiver ce nouveau comportement par défaut en ajoutant excludeDefaultMomentLocales: false à next.config.js si vous ne souhaitez pas ce nouveau comportement. Notez qu'il est fortement recommandé de ne pas désactiver cette nouvelle optimisation car elle réduit considérablement la taille de Moment.js.

Mettre à jour l'utilisation de router.events

Si vous accédez à router.events pendant le rendu, sachez que dans Next.js 11, router.events n'est plus fourni pendant le pré-rendu. Assurez-vous d'accéder à router.events dans useEffect :

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `L'application passe à ${url} ${
        shallow ? 'avec' : 'sans'
      } routage superficiel`
    )
  }

  router.events.on('routeChangeStart', handleRouteChange)

  // Si le composant est démonté, désabonnez-vous
  // de l'événement avec la méthode `off` :
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

Si votre application utilise router.router.events, qui était une propriété interne non publique, assurez-vous d'utiliser router.events à la place.

React 16 vers 17

React 17 a introduit une nouvelle Transformation JSX qui apporte une fonctionnalité de longue date de Next.js à l'écosystème React élargi : ne pas avoir à import React from 'react' lors de l'utilisation de JSX. Lors de l'utilisation de React 17, Next.js utilisera automatiquement la nouvelle transformation. Cette transformation ne rend pas la variable React globale, ce qui était un effet secondaire involontaire de l'implémentation précédente de Next.js. Un codemod est disponible pour corriger automatiquement les cas où vous avez accidentellement utilisé React sans l'importer.

La plupart des applications utilisent déjà la dernière version de React. Avec Next.js 11, la version minimale de React a été mise à jour vers 17.0.2.

Pour effectuer la mise à jour, vous pouvez exécuter la commande suivante :

npm install react@latest react-dom@latest

Ou en utilisant yarn :

yarn add react@latest react-dom@latest