Comment effectuer la mise à jour vers la version 9

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

npm i next@9

yarn add next@9

pnpm up next@9

bun add next@9

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

Vérifiez votre fichier App personnalisé (pages/_app.js)

Si vous avez précédemment copié l'exemple de l'<App> personnalisé, vous pourrez peut-être supprimer votre getInitialProps.

Supprimer getInitialProps de pages/_app.js (quand c'est possible) est important pour bénéficier des nouvelles fonctionnalités de Next.js !

Le getInitialProps suivant ne fait rien et peut être supprimé :

class MyApp extends App {
  // Supprimez-moi, je ne fais rien !
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  render() {
    // ... etc
  }
}

Changements cassants

@zeit/next-typescript n'est plus nécessaire

Next.js ignorera désormais l'utilisation de @zeit/next-typescript et vous avertira de le supprimer. Veuillez supprimer ce plugin de votre next.config.js.

Supprimez les références à @zeit/next-typescript/babel de votre .babelrc personnalisé (si présent).

L'utilisation de fork-ts-checker-webpack-plugin doit également être supprimée de votre next.config.js.

Les définitions TypeScript sont publiées avec le package next, vous devez donc désinstaller @types/next car ils entreraient en conflit.

Les types suivants sont différents :

Cette liste a été créée par la communauté pour vous aider à effectuer la mise à jour. Si vous trouvez d'autres différences, veuillez envoyer une pull-request pour aider les autres utilisateurs.

De :

import { NextContext } from 'next'
import { NextAppContext, DefaultAppIProps } from 'next/app'
import { NextDocumentContext, DefaultDocumentIProps } from 'next/document'

Vers :

import { NextPageContext } from 'next'
import { AppContext, AppInitialProps } from 'next/app'
import { DocumentContext, DocumentInitialProps } from 'next/document'

La clé config est maintenant une exportation dans une page

Vous ne pouvez plus exporter une variable personnalisée nommée config depuis une page (c'est-à-dire export { config } / export const config ...). Cette variable exportée est maintenant utilisée pour spécifier la configuration Next.js au niveau de la page, comme les fonctionnalités AMP opt-in et les routes API.

Vous devez renommer une exportation config qui n'est pas destinée à Next.js en quelque chose de différent.

next/dynamic ne rend plus "loading..." par défaut pendant le chargement

Les composants dynamiques ne rendront plus rien par défaut pendant le chargement. Vous pouvez toujours personnaliser ce comportement en définissant la propriété loading :

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello2'),
  {
    loading: () => <p>Chargement</p>,
  }
)

withAmp a été supprimé au profit d'un objet de configuration exporté

Next.js a maintenant le concept de configuration au niveau de la page, donc le composant d'ordre supérieur withAmp a été supprimé pour plus de cohérence.

Cette modification peut être automatiquement migrée en exécutant les commandes suivantes à la racine de votre projet Next.js :

curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js

Pour effectuer cette migration manuellement, ou voir ce que le codemod produira, consultez ci-dessous :

Avant

import { withAmp } from 'next/amp'

function Home() {
  return <h1>Ma page AMP</h1>
}

export default withAmp(Home)
// ou
export default withAmp(Home, { hybrid: true })

Après

export default function Home() {
  return <h1>Ma page AMP</h1>
}

export const config = {
  amp: true,
  // ou
  amp: 'hybrid',
}

next export n'exporte plus les pages sous forme de index.html

Auparavant, l'exportation de pages/about.js donnait out/about/index.html. Ce comportement a été modifié pour donner out/about.html.

Vous pouvez revenir au comportement précédent en créant un next.config.js avec le contenu suivant :

module.exports = {
  trailingSlash: true,
}

pages/api/ est traité différemment

Les pages dans pages/api/ sont maintenant considérées comme des routes API. Les pages de ce répertoire ne contiendront plus de bundle côté client.

Fonctionnalités dépréciées

next/dynamic a déprécié le chargement de plusieurs modules à la fois

La capacité à charger plusieurs modules à la fois a été dépréciée dans next/dynamic pour se rapprocher de l'implémentation de React (React.lazy et Suspense).

Mettre à jour le code qui repose sur ce comportement est relativement simple ! Nous avons fourni un exemple avant/après pour vous aider à migrer votre application :

Avant

import dynamic from 'next/dynamic'

const HelloBundle = dynamic({
  modules: () => {
    const components = {
      Hello1: () => import('../components/hello1').then((m) => m.default),
      Hello2: () => import('../components/hello2').then((m) => m.default),
    }

    return components
  },
  render: (props, { Hello1, Hello2 }) => (
    <div>
      <h1>{props.title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  ),
})

function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}

export default DynamicBundle

Après

import dynamic from 'next/dynamic'

const Hello1 = dynamic(() => import('../components/hello1'))
const Hello2 = dynamic(() => import('../components/hello2'))

function HelloBundle({ title }) {
  return (
    <div>
      <h1>{title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  )
}

function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}

export default DynamicBundle