Version 11

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

npm install next@11

yarn add next@11

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, finden Sie Anleitungen zur Aktualisierung in der Next.js Webpack 5-Dokumentation.

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 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 aus irgendeinem Grund -p nicht verwenden konnten, können Sie nun stattdessen PORT nutzen:

Beispiel:

PORT=4000 next start

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

Next.js 11 unterstützt statische Bildimporte 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 seitdem keine Funktion mehr hatte. 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 seitdem keine Funktion mehr hatte, 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 er 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 hatte seit Next.js 9.5 keine Funktion mehr. 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 automatisch 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 zu 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 aufrufen, 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 aufrufen:

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 die breitere React-Ökosystem bringt: Das Vermeiden von import React from 'react' bei der Verwendung von JSX. Bei Verwendung von React 17 wird Next.js automatisch die neue Transformation verwenden. 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 minimale React-Version 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