Version 13

Upgrade von Version 12 auf 13

Um auf Next.js Version 13 zu aktualisieren, führen Sie den folgenden Befehl mit Ihrem bevorzugten Paketmanager aus:

npm i next@13 react@latest react-dom@latest eslint-config-next@13

yarn add next@13 react@latest react-dom@latest eslint-config-next@13

pnpm i next@13 react@latest react-dom@latest eslint-config-next@13

bun add next@13 react@latest react-dom@latest eslint-config-next@13

Wissenswert: Wenn Sie TypeScript verwenden, stellen Sie sicher, dass Sie auch @types/react und @types/react-dom auf die neuesten Versionen aktualisieren.

Zusammenfassung der Änderungen in v13

• Die unterstützten Browser wurden geändert, um Internet Explorer auszuschließen und moderne Browser zu unterstützen.
• Die minimale Node.js-Version wurde von 12.22.0 auf 16.14.0 erhöht, da Version 12.x und 14.x das Ende ihres Lebenszyklus erreicht haben.
• Die minimale React-Version wurde von 17.0.2 auf 18.2.0 erhöht.
• Die Konfigurationseigenschaft swcMinify wurde von false auf true geändert. Weitere Informationen finden Sie unter Next.js Compiler.
• Der Import next/image wurde in next/legacy/image umbenannt. Der Import next/future/image wurde in next/image umbenannt. Ein Codemod ist verfügbar, um Ihre Importe sicher und automatisch umzubenennen.
• Das Kindelement von next/link kann nicht mehr <a> sein. Fügen Sie die Eigenschaft legacyBehavior hinzu, um das alte Verhalten zu verwenden, oder entfernen Sie <a>, um zu aktualisieren. Ein Codemod ist verfügbar, um Ihren Code automatisch zu aktualisieren.
• Die Konfigurationseigenschaft target wurde entfernt und durch Output File Tracing ersetzt.

Migration gemeinsamer Funktionen

Next.js 13 führt ein neues app-Verzeichnis mit neuen Funktionen und Konventionen ein. Die Aktualisierung auf Next.js 13 erfordert jedoch nicht die Verwendung des neuen app-Verzeichnisses.

Sie können weiterhin pages mit neuen Funktionen verwenden, die in beiden Verzeichnissen funktionieren, wie die aktualisierte Image-Komponente, Link-Komponente, Script-Komponente und Schriftoptimierung.

<Image/>-Komponente

Next.js 12 führte viele Verbesserungen an der Image-Komponente mit einem temporären Import ein: next/future/image. Diese Verbesserungen umfassten weniger clientseitiges JavaScript, einfachere Möglichkeiten zur Erweiterung und Gestaltung von Bildern, bessere Barrierefreiheit und natives Lazy Loading im Browser.

Ab Next.js 13 ist dieses neue Verhalten nun standardmäßig für next/image aktiviert.

Es gibt zwei Codemods, die Ihnen bei der Migration zur neuen Image-Komponente helfen:

• next-image-to-legacy-image: Dieser Codemod benennt next/image-Importe sicher und automatisch in next/legacy/image um, um das gleiche Verhalten wie in Next.js 12 beizubehalten. Wir empfehlen, diesen Codemod auszuführen, um schnell und automatisch auf Next.js 13 zu aktualisieren.
• next-image-experimental: Nachdem Sie den vorherigen Codemod ausgeführt haben, können Sie optional diesen experimentellen Codemod ausführen, um next/legacy/image auf das neue next/image zu aktualisieren. Dadurch werden ungenutzte Eigenschaften entfernt und Inline-Styles hinzugefügt. Bitte beachten Sie, dass dieser Codemod experimentell ist und nur statische Verwendungen (wie <Image src={img} layout="responsive" />) abdeckt, nicht jedoch dynamische Verwendungen (wie <Image {...props} />).

Alternativ können Sie manuell aktualisieren, indem Sie der Migrationsanleitung folgen und auch den Legacy-Vergleich ansehen.

<Link>-Komponente

Die <Link>-Komponente erfordert nicht mehr manuell ein <a>-Tag als Kindelement. Dieses Verhalten wurde als experimentelle Option in Version 12.2 eingeführt und ist jetzt Standard. In Next.js 13 rendert <Link> immer ein <a> und ermöglicht es Ihnen, Eigenschaften an das zugrunde liegende Tag weiterzugeben.

Beispiel:

import Link from 'next/link'

// Next.js 12: `<a>` muss verschachtelt sein, sonst wird es ausgeschlossen
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` rendert immer ein `<a>` im Hintergrund
<Link href="/about">
  About
</Link>

Um Ihre Links auf Next.js 13 zu aktualisieren, können Sie den new-link-Codemod verwenden.

<Script>-Komponente

Das Verhalten von next/script wurde aktualisiert, um sowohl pages als auch app zu unterstützen. Wenn Sie app schrittweise einführen, lesen Sie die Upgrade-Anleitung.

Schriftoptimierung

Bisher half Next.js Ihnen, Schriften zu optimieren, indem CSS für Schriften inline eingebettet wurde. Version 13 führt das neue next/font-Modul ein, das Ihnen die Möglichkeit gibt, Ihre Schriftladeerfahrung anzupassen und gleichzeitig eine hervorragende Leistung und Privatsphäre zu gewährleisten.

Weitere Informationen zur Verwendung von next/font finden Sie unter Optimierung von Schriften.