Codemods

Codemods sind Transformationen, die programmatisch auf Ihrer Codebasis ausgeführt werden. Dadurch können zahlreiche Änderungen automatisch angewendet werden, ohne jede Datei manuell durchgehen zu müssen.

Next.js stellt Codemod-Transformationen bereit, um Ihre Next.js-Codebasis bei API-Updates oder -Veraltungen zu aktualisieren.

Verwendung

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

npx @next/codemod <transform> <pfad>

Ersetzen Sie <transform> und <pfad> mit den entsprechenden Werten.

• transform - Name der Transformation
• pfad - Dateien oder Verzeichnis zu transformieren
• --dry Trockenlauf, kein Code wird bearbeitet
• --print Gibt die geänderten Ausgaben zum Vergleich aus

Next.js Codemods

13.2

Integrierte Schriftarten verwenden

built-in-next-font

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

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

Beispiel:

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

Wird transformiert in:

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

13.0

Next Image Imports umbenennen

next-image-to-legacy-image

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:

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:

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

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

Migriert gefährlich von next/legacy/image zur neuen next/image durch Hinzufügen von Inline-Styles und Entfernen ungenutzter Props.

• 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.

<a>-Tags aus Link-Komponenten entfernen

new-link

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>Über uns</a>
</Link>
// wird zu
<Link href="/about">
  Über uns
</Link>

<Link href="/about">
  <a onClick={() => console.log('geklickt')}>Über uns</a>
</Link>
// wird zu
<Link href="/about" onClick={() => console.log('geklickt')}>
  Über uns
</Link>

In Fällen, wo automatische Korrekturen nicht angewendet werden können, wird das legacyBehavior-Prop hinzugefügt. Dies ermöglicht Ihrer App, das alte Verhalten für diesen spezifischen Link beizubehalten.

const Component = () => <a>Über uns</a>

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

11

Migration von CRA

cra-to-next

npx @next/codemod cra-to-next

Migriert ein Create React App-Projekt zu Next.js; erstellt einen Pages Router und notwendige Konfiguration, um das Verhalten abzubilden. Client-seitiges Rendering wird zunächst genutzt, um Inkompatibilitäten durch window-Verwendung während SSR zu vermeiden und kann nahtlos 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

React-Imports hinzufügen

add-missing-react-import

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:

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

Wird transformiert in:

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

9

Anonyme Komponenten in benannte Komponenten transformieren

name-default-component

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:

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

Wird transformiert in:

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

AMP HOC in Seitenkonfiguration transformieren

withamp-to-config

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>Meine AMP-Seite</h1>
}

export default withAmp(Home)

// Nachher
export default function Home() {
  return <h1>Meine AMP-Seite</h1>
}

export const config = {
  amp: true,
}

6

withRouter verwenden

url-to-withrouter

npx @next/codemod url-to-withrouter

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

Beispiel:

import React from 'react'
export default class extends React.Component {
  render() {
    const { pathname } = this.props.url
    return <div>Aktueller Pfadname: {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>Aktueller Pfadname: {pathname}</div>
    }
  }
)

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