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@latest react@latest react-dom@latest eslint-config-next@latest
# oder
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# oder
pnpm up next react react-dom eslint-config-next --latest
# oder
bun add next@latest react@latest react-dom@latest eslint-config-next@latest

Zusammenfassung der Änderungen in v13

• Die unterstützten Browser wurden angepasst, wobei Internet Explorer nicht mehr unterstützt wird und moderne Browser im Fokus stehen.
• 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 steht zur Verfügung, um Ihre Imports sicher und automatisch umzubenennen.
• Das Kind-Element von next/link kann nicht mehr <a> sein. Fügen Sie die Prop legacyBehavior hinzu, um das alte Verhalten zu nutzen, oder entfernen Sie <a>, um zu aktualisieren. Ein Codemod steht zur Verfügung, 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 Font-Optimierung.

<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 Browser-Lazy-Loading.

Ab Next.js 13 ist dieses neue Verhalten nun der Standard für next/image.

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

• next-image-to-legacy-image: Dieser Codemod benennt next/image-Imports sicher und automatisch in next/legacy/image um, um das gleiche Verhalten wie in Next.js 12 beizubehalten. Wir empfehlen die Ausführung dieses Codemods, um schnell und automatisch auf Next.js 13 zu aktualisieren.
• next-image-experimental: Nach der Ausführung des vorherigen Codemods können Sie optional diesen experimentellen Codemod ausführen, um next/legacy/image auf das neue next/image zu aktualisieren, wodurch ungenutzte Props entfernt und Inline-Styles hinzugefügt werden. Bitte beachten Sie, dass dieser Codemod experimentell ist und nur statische Verwendungen abdeckt (wie <Image src={img} layout="responsive" />), 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 das manuelle Hinzufügen eines <a>-Tags als Kind-Element. Dieses Verhalten wurde als experimentelle Option in Version 12.2 eingeführt und ist nun der Standard. In Next.js 13 rendert <Link> immer ein <a> und ermöglicht es Ihnen, Props an das zugrunde liegende Tag weiterzuleiten.

Beispiel:

import Link from 'next/link'

// Next.js 12: `<a>` muss verschachtelt werden, 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.

Font-Optimierung

Bisher half Next.js bei der Optimierung von Schriftarten durch das Inline-Einbinden von Font-CSS. Version 13 führt das neue next/font-Modul ein, das Ihnen die Möglichkeit gibt, Ihre Font-Ladeerfahrung anzupassen und gleichzeitig eine hervorragende Leistung und Privatsphäre zu gewährleisten.

Weitere Informationen zur Verwendung von next/font finden Sie unter Optimieren von Schriftarten.