Version 12

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

npm i next@12 react@17 react-dom@17 eslint-config-next@12

yarn add next@12 react@17 react-dom@17 eslint-config-next@12

pnpm up next@12 react@17 react-dom@17 eslint-config-next@12

bun add next@12 react@17 react-dom@17 eslint-config-next@12

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

Upgrade auf 12.2

Middleware - Wenn Sie Middleware vor 12.2 verwendet haben, lesen Sie bitte den Upgrade-Leitfaden für weitere Informationen.

Upgrade auf 12.0

Minimale Node.js-Version - Die minimale Node.js-Version wurde von 12.0.0 auf 12.22.0 angehoben, was die erste Version von Node.js mit nativer Unterstützung für ES-Module ist.

Minimale React-Version - Die minimal erforderliche React-Version ist 17.0.2. Um zu aktualisieren, können Sie folgenden Befehl im Terminal ausführen:

npm install react@latest react-dom@latest
# or
yarn add react@latest react-dom@latest
# or
pnpm update react@latest react-dom@latest
# or
bun add react@latest react-dom@latest

SWC ersetzt Babel

Next.js verwendet nun den Rust-basierten Compiler SWC, um JavaScript/TypeScript zu kompilieren. Dieser neue Compiler ist bis zu 17x schneller als Babel bei der Kompilierung einzelner Dateien und bis zu 5x schneller bei Fast Refresh.

Next.js bietet volle Abwärtskompatibilität mit Anwendungen, die eine benutzerdefinierte Babel-Konfiguration haben. Alle Transformationen, die Next.js standardmäßig verarbeitet, wie styled-jsx und Tree-Shaking von getStaticProps / getStaticPaths / getServerSideProps, wurden nach Rust portiert.

Wenn eine Anwendung eine benutzerdefinierte Babel-Konfiguration hat, wird Next.js automatisch die Verwendung von SWC für die Kompilierung von JavaScript/TypeScript deaktivieren und auf Babel zurückgreifen, genau wie in Next.js 11.

Viele Integrationen mit externen Bibliotheken, die derzeit benutzerdefinierte Babel-Transformationen erfordern, werden in naher Zukunft auf Rust-basierte SWC-Transformationen portiert. Dazu gehören unter anderem:

• Styled Components
• Emotion
• Relay

Um Transformationen zu priorisieren, die Ihnen die Einführung von SWC erleichtern, geben Sie bitte Ihre .babelrc in diesem Feedback-Thread an.

SWC ersetzt Terser für Minifizierung

Sie können die Ersetzung von Terser durch SWC zur Minifizierung von JavaScript mit bis zu 7x Geschwindigkeit in next.config.js aktivieren:

module.exports = {
  swcMinify: true,
}

Die Minifizierung mit SWC ist ein optionales Flag, um sicherzustellen, dass es an mehr realen Next.js-Anwendungen getestet werden kann, bevor es in Next.js 12.1 zum Standard wird. Wenn Sie Feedback zur Minifizierung haben, geben Sie dieses bitte in diesem Feedback-Thread an.

Verbesserungen beim styled-jsx CSS-Parsing

Zusätzlich zum Rust-basierten Compiler haben wir einen neuen CSS-Parser implementiert, der auf dem für die styled-jsx Babel-Transformation basiert. Dieser neue Parser behandelt CSS besser und löst nun Fehler aus, wenn ungültiges CSS verwendet wird, das zuvor durchgerutscht wäre und unerwartetes Verhalten verursacht hätte.

Aufgrund dieser Änderung wird ungültiges CSS während der Entwicklung und beim next build einen Fehler auslösen. Diese Änderung betrifft nur die Verwendung von styled-jsx.

next/image hat das Wrapper-Element geändert

next/image rendert nun das <img> innerhalb eines <span> anstelle eines <div>.

Wenn Ihre Anwendung spezifisches CSS hat, das auf span abzielt, z.B. .container span, kann die Aktualisierung auf Next.js 12 fälschlicherweise das Wrapper-Element innerhalb der <Image>-Komponente treffen. Sie können dies vermeiden, indem Sie den Selektor auf eine bestimmte Klasse beschränken, z.B. .container span.item und die relevante Komponente mit dieser Klasse aktualisieren, z.B. <span className="item" />.

Wenn Ihre Anwendung spezifisches CSS hat, das auf das next/image <div>-Tag abzielt, z.B. .container div, wird es möglicherweise nicht mehr übereinstimmen. Sie können den Selektor auf .container span aktualisieren oder besser einen neuen <div className="wrapper"> um die <Image>-Komponente hinzufügen und diesen stattdessen als Ziel verwenden, z.B. .container .wrapper.

Die className-Eigenschaft bleibt unverändert und wird weiterhin an das zugrunde liegende <img>-Element übergeben.

Weitere Informationen finden Sie in der Dokumentation.

HMR-Verbindung verwendet nun einen WebSocket

Zuvor verwendete Next.js eine Server-Sent-Events-Verbindung zum Empfang von HMR-Ereignissen. Next.js 12 verwendet nun eine WebSocket-Verbindung.

In einigen Fällen, wenn Anfragen zum Next.js-Entwicklungsserver weitergeleitet werden, müssen Sie sicherstellen, dass die Upgrade-Anfrage korrekt behandelt wird. Beispielsweise müssten Sie in nginx die folgende Konfiguration hinzufügen:

location /_next/webpack-hmr {
    proxy_pass http://localhost:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Wenn Sie Apache (2.x) verwenden, können Sie die folgende Konfiguration hinzufügen, um WebSockets auf dem Server zu aktivieren. Überprüfen Sie Port, Hostname und Servernamen.

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / http://localhost:3000/
 ProxyPassReverse / http://localhost:3000/
 # Next.js 12 uses websocket
 <Location /_next/webpack-hmr>
    RewriteEngine On
    RewriteCond %{QUERY_STRING} transport=websocket [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
 </Location>
</VirtualHost>

Für benutzerdefinierte Server wie express müssen Sie möglicherweise app.all verwenden, um sicherzustellen, dass die Anfrage korrekt weitergeleitet wird, zum Beispiel:

app.all('/_next/webpack-hmr', (req, res) => {
  nextjsRequestHandler(req, res)
})

Webpack 4-Unterstützung wurde entfernt

Wenn Sie bereits webpack 5 verwenden, können Sie diesen Abschnitt überspringen.

Next.js hat webpack 5 in Next.js 11 als Standard für die Kompilierung eingeführt. Wie in der webpack 5 Upgrade-Dokumentation mitgeteilt, entfernt Next.js 12 die Unterstützung für webpack 4.

Wenn Ihre Anwendung webpack 4 mit dem Opt-out-Flag verwendet, erhalten Sie nun einen Fehler mit einem Link zur webpack 5 Upgrade-Dokumentation.

target-Option als veraltet gekennzeichnet

Wenn Sie target nicht in next.config.js haben, können Sie diesen Abschnitt überspringen.

Die target-Option wurde zugunsten der integrierten Unterstützung für die Verfolgung der für eine Seite benötigten Abhängigkeiten als veraltet gekennzeichnet.

Während next build wird Next.js automatisch jede Seite und ihre Abhängigkeiten verfolgen, um alle Dateien zu bestimmen, die für die Bereitstellung einer Produktionsversion Ihrer Anwendung benötigt werden.

Wenn Sie die target-Option derzeit auf serverless gesetzt haben, lesen Sie bitte die Dokumentation zur Nutzung der neuen Ausgabe.