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

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

Webpack 5

Webpack 5 ist jetzt der Standard für alle Next.js-Anwendungen. Wenn Sie keine benutzerdefinierte Webpack-Konfiguration haben, verwendet Ihre Anwendung bereits Webpack 5. Wenn Sie eine benutzerdefinierte Webpack-Konfiguration haben, können Sie die Next.js Webpack 5-Dokumentation für Upgrade-Hinweise konsultieren.

Bereinigung von distDir ist nun Standard

Das Build-Ausgabeverzeichnis (standardmäßig .next) wird jetzt standardmäßig gelöscht, mit Ausnahme der Next.js-Caches. Sie können die RFC zur Bereinigung von distDir für weitere Informationen konsultieren.

Wenn Ihre Anwendung zuvor auf dieses Verhalten angewiesen war, können Sie das neue Standardverhalten 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 wenn Sie -p auf irgendeine Weise nicht verwenden konnten, können Sie jetzt PORT als Alternative verwenden:

Beispiel:

PORT=4000 next start

next.config.js-Anpassung zum Importieren von Bildern

Next.js 11 unterstützt statische Bildimporte mit next/image. Diese neue Funktion basiert darauf, Bildimporte zu verarbeiten. Wenn Sie zuvor die Pakete next-images oder next-optimized-images hinzugefügt haben, können Sie entweder zur neuen 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 Wirkung hatte. In Next.js 11 wurde sie entfernt.

Wenn Ihre pages/_app.js eine benutzerdefinierte componentDidCatch-Methode hat, 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 während der Entwicklung keine Wirkung hatte. In Next.js 11 wurde er entfernt.

Wenn Ihre pages/_app.js Container aus next/app importiert, können Sie Container entfernen, da er entfernt wurde. Weitere Informationen finden Sie in der Dokumentation.

Entfernen der Verwendung von props.url aus Seitenkomponenten

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

Weitere Informationen finden Sie in der Dokumentation.

Entfernen der unsized-Eigenschaft von next/image

Die unsized-Eigenschaft von 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 von 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 heranzuführen. In Next.js 11 wurden die Optionen modules und render entfernt.

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

Wenn Ihre Anwendung modules und render verwendet, können Sie die Dokumentation konsultieren.

Entfernen von Head.rewind

Head.rewind war seit Next.js 9.5 ohne Wirkung, in Next.js 11 wurde es entfernt. Sie können Ihre Verwendung von Head.rewind problemlos 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 diesen Codeausschnitt:

import moment from 'moment'
import 'moment/locale/ja'
 
moment.locale('ja')

Sie können dieses neue Standardverhalten deaktivieren, indem Sie excludeDefaultMomentLocales: false zu next.config.js hinzufügen, wenn Sie das neue Verhalten nicht wünschen. Beachten Sie, dass es dringend empfohlen wird, diese neue Optimierung nicht zu deaktivieren, da sie die Größe von Moment.js erheblich reduziert.

Aktualisieren der Verwendung von router.events

Falls Sie router.events während des Renderings aufrufen, ist router.events in Next.js 11 während des Pre-Renderings nicht mehr verfügbar. Stellen Sie sicher, dass Sie router.events in useEffect aufrufen:

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `App is changing to ${url} ${
        shallow ? 'with' : 'without'
      } shallow routing`
    )
  }
 
  router.events.on('routeChangeStart', handleRouteChange)
 
  // Wenn die Komponente unmontiert wird, melden Sie sich
  // von der Veranstaltung mit der `off`-Methode ab:
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

Wenn Ihre Anwendung router.router.events verwendet, was eine interne Eigenschaft war, die nicht öffentlich war, stellen Sie bitte sicher, dass Sie auch router.events verwenden.

React 16 zu 17

React 17 führte eine neue JSX-Transformation ein, die eine langjährige Next.js-Funktion zur Breite des React-Ökosystems bringt: Nicht mehr import React from 'react' importieren zu müssen, wenn JSX verwendet wird. 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 React versehentlich ohne Import verwendet wurde.

Die meisten Anwendungen verwenden bereits die neueste Version von React, mit Next.js 11 wurde die Mindest-React-Version auf 17.0.2 aktualisiert.

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

npm install react@latest react-dom@latest

Oder mit yarn:

yarn add react@latest react-dom@latest