Upgrade auf 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

Wichtig: 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 zu entfernen und moderne Browser zu unterstützen.
• Die minimale Node.js-Version wurde von 12.22.0 auf 16.14.0 erhöht, da 12.x und 14.x das Ende ihrer Lebensdauer erreicht haben.
• Die minimale React-Version wurde von 17.0.2 auf 18.2.0 erhöht.
• Die swcMinify-Konfigurationseigenschaft wurde von false auf true geändert. Weitere Informationen finden Sie unter Next.js Compiler.
• Der next/image-Import wurde in next/legacy/image umbenannt. Der next/future/image-Import wurde in next/image umbenannt. Ein Codemod ist verfügbar, um Ihre Imports sicher und automatisch umzubenennen.
• Das Kind von next/link kann nicht mehr <a> sein. Fügen Sie die legacyBehavior-Prop hinzu, um das alte Verhalten zu nutzen, oder entfernen Sie <a>, um zu aktualisieren. Ein Codemod ist verfügbar, um Ihren Code automatisch zu aktualisieren.
• Die target-Konfigurationseigenschaft 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. Das Upgrade auf Next.js 13 erfordert jedoch nicht die Verwendung des neuen app-Routers.

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 jetzt 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, 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 Props entfernt und Inline-Styles hinzugefügt. Beachten Sie, dass dieser Codemod experimentell ist und nur statische Verwendungen (wie <Image src={img} layout="responsive" />) abdeckt, nicht aber 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 Kind. Dieses Verhalten wurde in Version 12.2 als experimentelle Option hinzugefügt und ist jetzt der Standard. In Next.js 13 rendert <Link> immer <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 sein, sonst wird es ausgeschlossen
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` rendert immer `<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 den Upgrade-Leitfaden.

Font-Optimierung

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

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