Menu

Upgrade auf Version 9

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

Terminal
npm i next@9
Terminal
yarn add next@9
Terminal
pnpm up next@9
Terminal
bun add next@9

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

Produktions-Deployment auf Vercel

Wenn Sie zuvor routes in Ihrer vercel.json-Datei für dynamische Routen konfiguriert haben, können diese Regeln entfernt werden, wenn Sie das neue Dynamische Routing-Feature von Next.js 9 nutzen.

Die dynamischen Routen von Next.js 9 werden automatisch auf Vercel konfiguriert und erfordern keine vercel.json-Anpassungen.

Sie können mehr über Dynamisches Routing hier lesen.

Überprüfen Sie Ihre Custom App-Datei (pages/_app.js)

Wenn Sie zuvor das Custom <App>-Beispiel kopiert haben, können Sie möglicherweise Ihr getInitialProps entfernen.

Das Entfernen von getInitialProps aus pages/_app.js (wenn möglich) ist wichtig, um neue Next.js-Funktionen zu nutzen!

Das folgende getInitialProps macht nichts und kann entfernt werden:

class MyApp extends App {
  // Entferne mich, ich mache nichts!
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}
 
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
 
    return { pageProps }
  }
 
  render() {
    // ... usw.
  }
}

Breaking Changes

@zeit/next-typescript ist nicht mehr notwendig

Next.js wird die Verwendung von @zeit/next-typescript jetzt ignorieren und Sie warnen, es zu entfernen. Bitte entfernen Sie dieses Plugin aus Ihrer next.config.js.

Entfernen Sie Verweise auf @zeit/next-typescript/babel aus Ihrer benutzerdefinierten .babelrc (falls vorhanden).

Die Verwendung von fork-ts-checker-webpack-plugin sollte ebenfalls aus Ihrer next.config.js entfernt werden.

TypeScript-Definitionen werden mit dem next-Paket veröffentlicht, daher müssen Sie @types/next deinstallieren, da diese in Konflikt geraten würden.

Die folgenden Typen sind unterschiedlich:

Diese Liste wurde von der Community erstellt, um Ihnen ein Upgrade zu erleichtern. Wenn Sie andere Unterschiede finden, senden Sie bitte einen Pull-Request an diese Liste, um anderen Benutzern zu helfen.

Von:

import { NextContext } from 'next'
import { NextAppContext, DefaultAppIProps } from 'next/app'
import { NextDocumentContext, DefaultDocumentIProps } from 'next/document'

zu

import { NextPageContext } from 'next'
import { AppContext, AppInitialProps } from 'next/app'
import { DocumentContext, DocumentInitialProps } from 'next/document'

Der config-Schlüssel ist jetzt ein Export auf einer Seite

Sie können nicht mehr eine benutzerdefinierte Variable mit dem Namen config von einer Seite exportieren (d. h. export { config } / export const config ...). Dieser exportierte Schlüssel wird jetzt verwendet, um Konfigurationen auf Seitenebene wie Opt-in AMP und API-Route-Funktionen anzugeben.

Sie müssen einen nicht-Next.js-bezogenen config-Export in etwas anderes umbenennen.

next/dynamic rendert nicht mehr standardmäßig "loading..." beim Laden

Dynamische Komponenten werden standardmäßig während des Ladens nichts rendern. Sie können dieses Verhalten weiterhin anpassen, indem Sie die loading-Eigenschaft setzen:

import dynamic from 'next/dynamic'
 
const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello2'),
  {
    loading: () => <p>Laden</p>,
  }
)

withAmp wurde zugunsten eines exportierten Konfigurationsobjekts entfernt

Next.js hat jetzt das Konzept der seitenspezifischen Konfiguration, daher wurde die withAmp-Higher-Order-Komponente zur Konsistenz entfernt.

Diese Änderung kann automatisch migriert werden, indem Sie die folgenden Befehle im Stammverzeichnis Ihres Next.js-Projekts ausführen:

Terminal
curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js

Um diese Migration manuell durchzuführen oder zu sehen, was der Codemod produzieren wird, lesen Sie unten:

Vorher

import { withAmp } from 'next/amp'
 
function Home() {
  return <h1>Meine AMP-Seite</h1>
}
 
export default withAmp(Home)
// oder
export default withAmp(Home, { hybrid: true })

Danach

export default function Home() {
  return <h1>Meine AMP-Seite</h1>
}
 
export const config = {
  amp: true,
  // oder
  amp: 'hybrid',
}

next export exportiert Seiten nicht mehr als index.html

Zuvor würde das Exportieren von pages/about.js zu out/about/index.html führen. Dieses Verhalten wurde geändert, um out/about.html zu erzeugen.

Sie können zum vorherigen Verhalten zurückkehren, indem Sie eine next.config.js mit folgendem Inhalt erstellen:

next.config.js
module.exports = {
  trailingSlash: true,
}

pages/api/ wird anders behandelt

Seiten in pages/api/ werden jetzt als API-Routen betrachtet. Seiten in diesem Verzeichnis enthalten keine Client-Side-Bundle mehr.

Veraltete Funktionen

next/dynamic hat das Laden mehrerer Module gleichzeitig als veraltet markiert

Die Fähigkeit, mehrere Module gleichzeitig zu laden, wurde in next/dynamic als veraltet markiert, um näher an der Implementierung von React (React.lazy und Suspense) zu sein.

Die Aktualisierung von Code, der auf diesem Verhalten basiert, ist relativ unkompliziert! Wir haben ein Beispiel für ein Vorher/Nachher bereitgestellt, um Ihnen bei der Migration Ihrer Anwendung zu helfen:

Vorher

import dynamic from 'next/dynamic'
 
const HelloBundle = dynamic({
  modules: () => {
    const components = {
      Hello1: () => import('../components/hello1').then((m) => m.default),
      Hello2: () => import('../components/hello2').then((m) => m.default),
    }
 
    return components
  },
  render: (props, { Hello1, Hello2 }) => (
    <div>
      <h1>{props.title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  ),
})
 
function DynamicBundle() {
  return <HelloBundle title="Dynamisches Bundle" />
}
 
export default DynamicBundle

Danach

import dynamic from 'next/dynamic'
 
const Hello1 = dynamic(() => import('../components/hello1'))
const Hello2 = dynamic(() => import('../components/hello2'))
 
function HelloBundle({ title }) {
  return (
    <div>
      <h1>{title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  )
}
 
function DynamicBundle() {
  return <HelloBundle title="Dynamisches Bundle" />
}
 
export default DynamicBundle