Codemods

Les codemods sont des transformations qui s'exécutent de manière programmatique sur votre codebase. Cela permet d'appliquer un grand nombre de modifications sans avoir à parcourir manuellement chaque fichier.

Next.js fournit des transformations Codemod pour vous aider à mettre à niveau votre codebase Next.js lorsqu'une API est mise à jour ou dépréciée.

Utilisation

Dans votre terminal, naviguez (cd) dans le dossier de votre projet, puis exécutez :

Terminal

npx @next/codemod <transform> <path>

En remplaçant <transform> et <path> par les valeurs appropriées.

transform - nom de la transformation
path - fichiers ou répertoire à transformer
--dry Effectue une simulation, aucun code ne sera modifié
--print Affiche les modifications pour comparaison

Codemods Next.js

14.0

Migrer les imports `ImageResponse`

`next-og-import`

Terminal

npx @next/codemod@latest next-og-import .

Ce codemod transfère les imports de next/server vers next/og pour l'utilisation de la Génération d'images OG dynamiques.

Par exemple :

import { ImageResponse } from 'next/server'

Se transforme en :

import { ImageResponse } from 'next/og'

Utiliser l'export `viewport`

`metadata-to-viewport-export`

Terminal

npx @next/codemod@latest metadata-to-viewport-export .

Ce codemod migre certaines métadonnées viewport vers l'export viewport.

Par exemple :

export const metadata = {
  title: 'My App',
  themeColor: 'dark',
  viewport: {
    width: 1,
  },
}

Se transforme en :

export const metadata = {
  title: 'My App',
}

export const viewport = {
  width: 1,
  themeColor: 'dark',
}

13.2

Utiliser la police intégrée

`built-in-next-font`

Terminal

npx @next/codemod@latest built-in-next-font .

Ce codemod désinstalle le package @next/font et transforme les imports @next/font en next/font intégré.

Par exemple :

import { Inter } from '@next/font/google'

Se transforme en :

import { Inter } from 'next/font/google'

13.0

Renommer les imports Next Image

`next-image-to-legacy-image`

Terminal

npx @next/codemod@latest next-image-to-legacy-image .

Renomme de manière sécurisée les imports next/image dans les applications Next.js 10, 11 ou 12 existantes en next/legacy/image pour Next.js 13. Renomme également next/future/image en next/image.

Par exemple :

pages/index.js

import Image1 from 'next/image'
import Image2 from 'next/future/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

Se transforme en :

pages/index.js

// 'next/image' devient 'next/legacy/image'
import Image1 from 'next/legacy/image'
// 'next/future/image' devient 'next/image'
import Image2 from 'next/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

Migrer vers le nouveau composant Image

`next-image-experimental`

Terminal

npx @next/codemod@latest next-image-experimental .

Migre de manière risquée de next/legacy/image vers le nouveau next/image en ajoutant des styles inline et en supprimant les props inutilisés.

Supprime la prop layout et ajoute style.
Supprime la prop objectFit et ajoute style.
Supprime la prop objectPosition et ajoute style.
Supprime la prop lazyBoundary.
Supprime la prop lazyRoot.

Supprimer les balises `<a>` des composants Link

`new-link`

Terminal

npx @next/codemod@latest new-link .

Supprime les balises <a> à l'intérieur des composants Link, ou ajoute une prop legacyBehavior aux Links qui ne peuvent pas être auto-corrigés.

Par exemple :

<Link href="/about">
  <a>About</a>
</Link>
// se transforme en
<Link href="/about">
  About
</Link>

<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// se transforme en
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>

Dans les cas où l'auto-correction ne peut pas être appliquée, la prop legacyBehavior est ajoutée. Cela permet à votre application de continuer à fonctionner avec l'ancien comportement pour ce lien spécifique.

const Component = () => <a>About</a>

<Link href="/about">
  <Component />
</Link>
// devient
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

Migrer depuis CRA

`cra-to-next`

Terminal

npx @next/codemod cra-to-next

Migre un projet Create React App vers Next.js ; crée un routeur Pages et la configuration nécessaire pour correspondre au comportement. Le rendu côté client uniquement est utilisé initialement pour éviter les incompatibilités dues à l'utilisation de window pendant le SSR et peut être activé progressivement pour permettre l'adoption progressive des fonctionnalités spécifiques à Next.js.

Partagez vos retours sur cette transformation dans cette discussion.

10

Ajouter les imports React

`add-missing-react-import`

Terminal

npx @next/codemod add-missing-react-import

Transforme les fichiers qui n'importent pas React pour inclure l'import afin que la nouvelle transformation JSX de React fonctionne.

Par exemple :

my-component.js

export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

Se transforme en :

my-component.js

import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

9

Transformer les composants anonymes en composants nommés

`name-default-component`

Terminal

npx @next/codemod name-default-component

Versions 9 et supérieures.

Transforme les composants anonymes en composants nommés pour s'assurer qu'ils fonctionnent avec Fast Refresh.

Par exemple :

my-component.js

export default function () {
  return <div>Hello World</div>
}

Se transforme en :

my-component.js

export default function MyComponent() {
  return <div>Hello World</div>
}

Le composant aura un nom en camelCase basé sur le nom du fichier, et cela fonctionne également avec les fonctions fléchées.

8

Transformer le HOC AMP en configuration de page

`withamp-to-config`

Terminal

npx @next/codemod withamp-to-config

Transforme le HOC withAmp en configuration de page Next.js 9.

Par exemple :

// Avant
import { withAmp } from 'next/amp'

function Home() {
  return <h1>My AMP Page</h1>
}

export default withAmp(Home)

// Après
export default function Home() {
  return <h1>My AMP Page</h1>
}

export const config = {
  amp: true,
}

6

Utiliser `withRouter`

`url-to-withrouter`

Terminal

npx @next/codemod url-to-withrouter

Transforme la propriété url automatiquement injectée (dépréciée) sur les pages de niveau supérieur pour utiliser withRouter et la propriété router qu'elle injecte. En savoir plus ici : https://nextjs.org/docs/messages/url-deprecated

Par exemple :

Avant

import React from 'react'
export default class extends React.Component {
  render() {
    const { pathname } = this.props.url
    return <div>Current pathname: {pathname}</div>
  }
}

Après

import React from 'react'
import { withRouter } from 'next/router'
export default withRouter(
  class extends React.Component {
    render() {
      const { pathname } = this.props.router
      return <div>Current pathname: {pathname}</div>
    }
  }
)

Ceci est un exemple. Tous les cas transformés (et testés) peuvent être trouvés dans le répertoire __testfixtures__.

On this page