Version 11

Um auf Version 11 zu aktualisieren, führen Sie folgenden Befehl aus:

npm i next@11 react@17 react-dom@17

yarn add next@11 react@17 react-dom@17

pnpm up next@11 react@17 react-dom@17

bun add next@11 react@17 react-dom@17

Gut zu wissen: Wenn Sie TypeScript verwenden, stellen Sie sicher, dass Sie auch @types/react und @types/react-dom auf die entsprechenden Versionen aktualisieren.

Webpack 5

Webpack 5 ist jetzt die Standardeinstellung für alle Next.js-Anwendungen. Wenn Sie keine benutzerdefinierte Webpack-Konfiguration hatten, verwendet Ihre Anwendung bereits webpack 5. Falls Sie eine benutzerdefinierte Konfiguration haben, können Sie sich in der Next.js Webpack 5-Dokumentation über das Upgrade informieren.

Bereinigung des distDir ist jetzt Standard

Das Build-Ausgabeverzeichnis (standardmäßig .next) wird jetzt standardmäßig bereinigt, mit Ausnahme der Next.js-Caches. Weitere Informationen finden Sie im RFC zur Bereinigung von distDir.

Falls Ihre Anwendung zuvor auf dieses Verhalten angewiesen war, können Sie die neue Standardeinstellung deaktivieren, indem Sie das Flag cleanDistDir: false in der next.config.js hinzufügen.

PORT wird jetzt für next dev und next start unterstützt

Next.js 11 unterstützt die Umgebungsvariable PORT, um den Port festzulegen, auf dem die Anwendung läuft. Die Verwendung von -p/--port wird weiterhin empfohlen, aber falls Sie -p aus irgendeinem Grund nicht verwenden konnten, steht jetzt PORT als Alternative zur Verfügung:

Beispiel:

PORT=4000 next start

Anpassung der next.config.js für den Import von Bildern

Next.js 11 unterstützt den statischen Import von Bildern mit next/image. Diese neue Funktion setzt voraus, dass Bildimporte verarbeitet werden können. Falls Sie zuvor die Pakete next-images oder next-optimized-images verwendet haben, können Sie entweder zur integrierten Unterstützung mit next/image wechseln oder die Funktion deaktivieren:

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Entfernen von super.componentDidCatch() aus pages/_app.js

Die componentDidCatch-Methode der next/app-Komponente wurde in Next.js 9 als veraltet markiert, da sie nicht mehr benötigt wird, und war seitdem eine No-Op. In Next.js 11 wurde sie entfernt.

Falls Ihre pages/_app.js eine benutzerdefinierte componentDidCatch-Methode enthält, können Sie super.componentDidCatch entfernen, da es nicht mehr benötigt wird.

Entfernen von Container aus pages/_app.js

Dieser Export wurde in Next.js 9 als veraltet markiert, da er nicht mehr benötigt wird, und war seitdem eine No-Op mit einer Warnung während der Entwicklung. In Next.js 11 wurde er entfernt.

Falls Ihre pages/_app.js Container aus next/app importiert, können Sie Container entfernen, da es nicht mehr vorhanden ist. Weitere Informationen finden Sie in der Dokumentation.

Entfernen der Verwendung von props.url in Seitenkomponenten

Diese Eigenschaft wurde in Next.js 4 als veraltet markiert und zeigte seitdem eine Warnung während der Entwicklung. Mit der Einführung von getStaticProps / getServerSideProps wurde die Verwendung von props.url in diesen Methoden bereits untersagt. In Next.js 11 wurde sie vollständig entfernt.

Weitere Informationen finden Sie in der Dokumentation.

Entfernen der unsized-Eigenschaft in next/image

Die unsized-Eigenschaft in next/image wurde in Next.js 10.0.1 als veraltet markiert. Sie können stattdessen layout="fill" verwenden. In Next.js 11 wurde unsized entfernt.

Entfernen der modules-Eigenschaft in next/dynamic

Die Optionen modules und render für next/dynamic wurden in Next.js 9.5 als veraltet markiert. Dies geschah, um die next/dynamic-API näher an React.lazy anzupassen. In Next.js 11 wurden die Optionen modules und render entfernt.

Diese Option wurde seit Next.js 8 nicht mehr in der Dokumentation erwähnt, daher ist es unwahrscheinlich, dass Ihre Anwendung sie verwendet.

Falls Ihre Anwendung modules und render verwendet, finden Sie weitere Informationen in der Dokumentation.

Entfernen von Head.rewind

Head.rewind war seit Next.js 9.5 eine No-Op. In Next.js 11 wurde es entfernt. Sie können die Verwendung von Head.rewind sicher entfernen.

Moment.js-Lokalisierungen standardmäßig ausgeschlossen

Moment.js enthält standardmäßig Übersetzungen für viele Lokalisierungen. Next.js schließt diese Lokalisierungen jetzt standardmäßig aus, um die Bundle-Größe für Anwendungen, die Moment.js verwenden, zu optimieren.

Um eine bestimmte Lokalisierung zu laden, verwenden Sie folgenden Code:

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

Sie können diese neue Standardeinstellung deaktivieren, indem Sie excludeDefaultMomentLocales: false zur next.config.js hinzufügen. Beachten Sie jedoch, dass es dringend empfohlen wird, diese Optimierung nicht zu deaktivieren, da sie die Größe von Moment.js erheblich reduziert.

Aktualisierung der Verwendung von router.events

Falls Sie router.events während des Renderings verwenden, beachten Sie, dass router.events in Next.js 11 während des Pre-Renderings nicht mehr bereitgestellt wird. Stellen Sie sicher, dass Sie router.events in useEffect verwenden:

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `App wechselt zu ${url} ${
        shallow ? 'mit' : 'ohne'
      } shallow Routing`
    )
  }

  router.events.on('routeChangeStart', handleRouteChange)

  // Wenn die Komponente demontiert wird, abonnieren Sie
  // das Ereignis mit der `off`-Methode ab:
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

Falls Ihre Anwendung router.router.events verwendet, was eine interne Eigenschaft war und nicht öffentlich dokumentiert wurde, stellen Sie sicher, dass Sie stattdessen router.events verwenden.

React 16 auf 17

React 17 führte eine neue JSX-Transformation ein, die eine langjährige Next.js-Funktion in das React-Ökosystem bringt: Das Fehlen von import React from 'react' bei der Verwendung von JSX. Bei Verwendung von React 17 verwendet Next.js automatisch die neue Transformation. Diese Transformation macht die React-Variable nicht global, was ein unbeabsichtigter Nebeneffekt der vorherigen Next.js-Implementierung war. Ein Codemod ist verfügbar, um Fälle automatisch zu korrigieren, in denen Sie versehentlich React ohne Import verwendet haben.

Die meisten Anwendungen verwenden bereits die neueste Version von React. Mit Next.js 11 wurde die Mindestversion von React auf 17.0.2 aktualisiert.

Um zu aktualisieren, können Sie folgenden Befehl ausführen:

npm install react@latest react-dom@latest

Oder mit yarn:

yarn add react@latest react-dom@latest