Version 11

Pour effectuer la mise à niveau 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 à niveau @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 des conseils de mise à niveau.

Nettoyage du distDir maintenant activé par défaut

Le répertoire de sortie de build (par défaut .next) est maintenant vidé par défaut, à l'exception des caches Next.js. Vous pouvez consulter le 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 maintenant supporté pour next dev et next start

Next.js 11 supporte 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 supporte 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,
  },
}

Suppression de super.componentDidCatch() dans 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.

Suppression de Container dans 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 en 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.

Suppression de 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 en 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.

Suppression de 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.

Suppression de 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 consulter la documentation.

Suppression de 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 :

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 voulez pas du nouveau comportement, notez qu'il est fortement recommandé de ne pas désactiver cette nouvelle optimisation car elle réduit significativement la taille de Moment.js.

Mise à jour de l'utilisation de router.events

Si vous accédez à router.events pendant le rendu, 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 change vers ${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 également.

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 non intentionnel 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 à niveau, 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