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 à jour 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 :

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

13.2

Utiliser la police intégrée

built-in-next-font

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 d'image Next

next-image-to-legacy-image

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

Renomme en toute sécurité 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 :

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 :

// '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

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

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 corrigés automatiquement.

Par exemple :

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

<Link href="/about">
  <a onClick={() => console.log('cliqué')}>À propos</a>
</Link>
// se transforme en
<Link href="/about" onClick={() => console.log('cliqué')}>
  À propos
</Link>

Dans les cas où la correction automatique 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 particulier.

const Component = () => <a>À propos</a>

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

11

Migrer depuis CRA

cra-to-next

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 de casser la compatibilité due à 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

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 :

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

Se transforme en :

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

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 :

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

Se transforme en :

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

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>Ma page AMP</h1>
}

export default withAmp(Home)

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

export const config = {
  amp: true,
}

6

Utiliser withRouter

url-to-withrouter

npx @next/codemod url-to-withrouter

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

Par exemple :

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

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

C'est un cas parmi d'autres. Tous les cas transformés (et testés) peuvent être trouvés dans le répertoire __testfixtures__.