Codemods

Codemods sind Transformationen, die programmatisch auf Ihre Codebasis angewendet werden. Dadurch können eine große Anzahl von Änderungen automatisch durchgeführt werden, ohne dass jede Datei manuell bearbeitet werden muss.

Next.js stellt Codemod-Transformationen bereit, um Ihre Next.js-Codebasis zu aktualisieren, wenn eine API aktualisiert oder veraltet ist.

Verwendung

Navigieren Sie in Ihrem Terminal (cd) in den Projektordner und führen Sie dann aus:

Terminal

npx @next/codemod <transform> <path>

Ersetzen Sie <transform> und <path> durch entsprechende Werte.

transform - Name der Transformation
path - Dateien oder Verzeichnis, das transformiert werden soll
--dry - Führt einen Testlauf durch, ohne Code zu bearbeiten
--print - Gibt die geänderten Ausgaben zum Vergleich aus

Next.js Codemods

14.0

Migrieren von `ImageResponse`-Imports

`next-og-import`

Terminal

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

Dieser Codemod verschiebt Imports von next/server zu next/og für die Verwendung von Dynamischer OG-Bildgenerierung.

Beispiel:

import { ImageResponse } from 'next/server'

Wird transformiert in:

import { ImageResponse } from 'next/og'

Verwendung des `viewport`-Exports

`metadata-to-viewport-export`

Terminal

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

Dieser Codemod migriert bestimmte Viewport-Metadaten zum viewport-Export.

Beispiel:

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

Wird transformiert in:

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

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

13.2

Verwendung der integrierten Schriftart

`built-in-next-font`

Terminal

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

Dieser Codemod deinstalliert das @next/font-Paket und transformiert @next/font-Imports in die integrierte next/font.

Beispiel:

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

Wird transformiert in:

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

13.0

Umbenennen von Next-Image-Imports

`next-image-to-legacy-image`

Terminal

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

Benennt sicher next/image-Imports in bestehenden Next.js 10-, 11- oder 12-Anwendungen in next/legacy/image für Next.js 13 um. Benennt auch next/future/image in next/image um.

Beispiel:

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>
  )
}

Wird transformiert in:

pages/index.js

// 'next/image' wird zu 'next/legacy/image'
import Image1 from 'next/legacy/image'
// 'next/future/image' wird zu '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>
  )
}

Migration zur neuen Image-Komponente

`next-image-experimental`

Terminal

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

Migriert gefährlich von next/legacy/image zur neuen next/image-Komponente, indem Inline-Styles hinzugefügt und ungenutzte Props entfernt werden.

Entfernt layout-Prop und fügt style hinzu.
Entfernt objectFit-Prop und fügt style hinzu.
Entfernt objectPosition-Prop und fügt style hinzu.
Entfernt lazyBoundary-Prop.
Entfernt lazyRoot-Prop.

Entfernen von `<a>`-Tags aus Link-Komponenten

`new-link`

Terminal

npx @next/codemod@latest new-link .

Entfernt <a>-Tags innerhalb von Link-Komponenten oder fügt ein legacyBehavior-Prop zu Links hinzu, die nicht automatisch behoben werden können.

Beispiel:

<Link href="/about">
  <a>About</a>
</Link>
// wird transformiert in
<Link href="/about">
  About
</Link>

<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// wird transformiert in
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>

In Fällen, in denen eine automatische Korrektur nicht möglich ist, wird das legacyBehavior-Prop hinzugefügt. Dadurch kann Ihre App weiterhin mit dem alten Verhalten für diesen speziellen Link funktionieren.

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

<Link href="/about">
  <Component />
</Link>
// wird zu
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

Migration von CRA

`cra-to-next`

Terminal

npx @next/codemod cra-to-next

Migriert ein Create-React-App-Projekt zu Next.js; erstellt einen Pages Router und die notwendige Konfiguration, um das Verhalten abzugleichen. Client-seitiges Rendering wird zunächst genutzt, um Inkompatibilitäten aufgrund von window-Verwendung während SSR zu vermeiden, und kann schrittweise aktiviert werden, um die schrittweise Übernahme von Next.js-spezifischen Features zu ermöglichen.

Bitte teilen Sie Feedback zu dieser Transformation in dieser Diskussion.

10

Hinzufügen von React-Imports

`add-missing-react-import`

Terminal

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

Transformiert Dateien, die React nicht importieren, um den Import einzufügen, damit die neue React-JSX-Transformation funktioniert.

Beispiel:

my-component.js

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

Wird transformiert in:

my-component.js

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

9

Transformieren anonymer Komponenten in benannte Komponenten

`name-default-component`

Terminal

npx @next/codemod name-default-component

Versionen 9 und höher.

Transformiert anonyme Komponenten in benannte Komponenten, um sicherzustellen, dass sie mit Fast Refresh funktionieren.

Beispiel:

my-component.js

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

Wird transformiert in:

my-component.js

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

Die Komponente erhält einen camelCase-Namen basierend auf dem Dateinamen und funktioniert auch mit Pfeilfunktionen.

8

Transformieren der AMP-HOC in Seitenkonfiguration

`withamp-to-config`

Terminal

npx @next/codemod withamp-to-config

Transformiert die withAmp-HOC in die Next.js 9-Seitenkonfiguration.

Beispiel:

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

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

export default withAmp(Home)

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

export const config = {
  amp: true,
}

6

Verwendung von `withRouter`

`url-to-withrouter`

Terminal

npx @next/codemod url-to-withrouter

Transformiert die veraltete, automatisch injizierte url-Eigenschaft auf Top-Level-Seiten in die Verwendung von withRouter und der von ihr injizierten router-Eigenschaft. Mehr dazu hier: https://nextjs.org/docs/messages/url-deprecated

Beispiel:

Vorher

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

Nachher

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>
    }
  }
)

Dies ist ein Fall. Alle transformierten (und getesteten) Fälle finden Sie im __testfixtures__-Verzeichnis.

On this page