Menu

Version 13

Upgrade von 12 auf 13

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

Terminal
npm i next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
yarn add next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
pnpm i next@13 react@latest react-dom@latest eslint-config-next@13
Terminal
bun add next@13 react@latest react-dom@latest eslint-config-next@13

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

Zusammenfassung v13

  • Die Unterstützten Browser wurden geändert, um den Internetexplorer auszuschließen und moderne Browser zu unterstützen.
  • Die minimale Node.js-Version wurde von 12.22.0 auf 16.14.0 angehoben, da 12.x und 14.x das Lebensende erreicht haben.
  • Die minimale React-Version wurde von 17.0.2 auf 18.2.0 angehoben.
  • Die Konfigurationseigenschaft swcMinify wurde von false auf true geändert. Weitere Informationen finden Sie im 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 Kind von next/link kann nicht mehr <a> sein. Fügen Sie die Eigenschaft legacyBehavior hinzu, um das Legacy-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 die Ausgabedatei-Rückverfolgung 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 z.B. die aktualisierte Bildkomponente, Link-Komponente, Script-Komponente und Schriftartoptimierung.

<Image/> Komponente

Next.js 12 führte viele Verbesserungen an der Bildkomponente mit einem temporären Import ein: next/future/image. Diese Verbesserungen umfassten weniger Client-seitiges JavaScript, einfachere Möglichkeiten zum Erweitern und Gestalten von Bildern, bessere Barrierefreiheit und natives Browser-Lazy-Loading.

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

Es gibt zwei Codemods, die Ihnen bei der Migration zur neuen Bildkomponente 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 Next.js 12 beizubehalten. Wir empfehlen, diesen Codemod auszuführen, um schnell und automatisch auf Next.js 13 zu aktualisieren.
  • next-image-experimental: Nach dem Ausführen des vorherigen Codemods können Sie optional diesen experimentellen Codemod ausführen, um next/legacy/image auf das neue next/image zu aktualisieren, was nicht verwendete Eigenschaften entfernt und Inline-Stile hinzufügt. Bitte beachten Sie, dass dieser Codemod experimentell ist und nur statische Verwendung (wie <Image src={img} layout="responsive" />) abdeckt, nicht jedoch dynamische Verwendung (wie <Image {...props} />).

Alternativ können Sie manuell aktualisieren, indem Sie dem Migrationshandbuch folgen und auch den Legacy-Vergleich betrachten.

<Link> Komponente

Die <Link>-Komponente erfordert nicht mehr das manuelle Hinzufügen eines <a>-Tags als Kind. Dieses Verhalten wurde in Version 12.2 als experimentelle Option hinzugefügt und ist jetzt Standard. In Next.js 13 rendert <Link> immer <a> und ermöglicht es Ihnen, Eigenschaften an das zugrunde liegende Tag weiterzuleiten.

Zum 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>` unter der Haube
<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. Bei schrittweiser Einführung von app lesen Sie bitte den Upgradeleitfaden.

Schriftartoptimierung

Zuvor half Next.js bei der Schriftartoptimierung durch Inline-Setzen von Schriftart-CSS. Version 13 führt das neue next/font-Modul ein, das Ihnen die Möglichkeit gibt, Ihr Schriftart-Ladeerlebnis anzupassen und gleichzeitig eine hervorragende Leistung und Privatsphäre sicherzustellen.

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