Upgrade auf Version 11

Um auf Version 11 zu aktualisieren, führen Sie den 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

Wichtig: 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 haben, verwendet Ihre Anwendung bereits Webpack 5. Falls Sie eine benutzerdefinierte Konfiguration haben, finden Sie weitere Informationen in der Next.js Webpack 5-Dokumentation.

Bereinigung des distDir ist jetzt Standard

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

Falls Ihre Anwendung auf das bisherige Verhalten angewiesen war, können Sie die neue Standardeinstellung deaktivieren, indem Sie 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 Bildimporte

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 auf die integrierte Unterstützung mit next/image umsteigen 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 diesen entfernen, da er nicht mehr verfügbar 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 war die Verwendung von props.url in diesen Methoden bereits nicht mehr erlaubt. In Next.js 11 wurde sie vollständig entfernt.

Weitere Details 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. Verwenden Sie stattdessen layout="fill". 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 bedenkenlos 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 in der 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 verfügbar ist. 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 ist, 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-Community bringt: Das import React from 'react' ist nicht mehr erforderlich, wenn JSX verwendet wird. 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 bisherigen 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, führen Sie den folgenden Befehl aus:

npm install react@latest react-dom@latest

Oder mit yarn:

yarn add react@latest react-dom@latest