Upgrade auf 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

Gut zu wissen: Wenn Sie TypeScript verwenden, stellen Sie sicher, dass Sie auch @types/react und @types/react-dom auf die entsprechenden Versionen aktualisieren.

Upgrade auf 12.2

Middleware - Falls 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 erhöht, die erste Node.js-Version mit nativer Unterstützung für ES Modules.

Minimale React-Version - Die mindestens erforderliche React-Version ist 17.0.2. Für das Upgrade können Sie den folgenden Befehl im Terminal ausführen:

npm install react@latest react-dom@latest

yarn add react@latest react-dom@latest

pnpm update react@latest react-dom@latest

bun add react@latest react-dom@latest

SWC ersetzt Babel

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

Next.js bietet volle Abwärtskompatibilität für Anwendungen mit benutzerdefinierter Babel-Konfiguration. Alle Transformationen, die Next.js standardmäßig handhabt, 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 stattdessen auf Babel zurückfallen, genau wie in Next.js 11.

Viele der 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 bei der Übernahme von SWC helfen, teilen Sie bitte Ihre .babelrc in diesem Feedback-Thread mit.

SWC ersetzt Terser für die Minifizierung

Sie können die Ersetzung von Terser durch SWC für bis zu 7x schnellere JavaScript-Minifizierung mit einem Flag in next.config.js aktivieren:

module.exports = {
  swcMinify: true,
}

Die Minifizierung mit SWC ist ein optionales Flag, um sicherzustellen, dass sie gegen mehr reale Next.js-Anwendungen getestet werden kann, bevor sie in Next.js 12.1 zum Standard wird. Falls Sie Feedback zur Minifizierung haben, hinterlassen Sie es bitte in diesem Feedback-Thread.

Verbesserungen beim Parsing von styled-jsx CSS

Zusätzlich zum Rust-basierten Compiler haben wir einen neuen CSS-Parser implementiert, der auf dem für die styled-jsx Babel-Transformation verwendeten basiert. Dieser neue Parser bietet eine verbesserte Handhabung von CSS und gibt nun Fehler aus, wenn ungültiges CSS verwendet wird, das früher durchgeschlüpft ist und unerwartetes Verhalten verursacht hat.

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

next/image ändert umschließendes Element

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

Falls Ihre Anwendung spezifisches CSS hat, das span-Elemente anspricht, wie z.B. .container span, könnte das Upgrade auf Next.js 12 fälschlicherweise das umschließende Element innerhalb der <Image>-Komponente ansprechen. Sie können dies vermeiden, indem Sie den Selektor auf eine bestimmte Klasse einschränken, wie z.B. .container span.item, und die relevante Komponente mit dieser className aktualisieren, z.B. <span className="item" />.

Falls Ihre Anwendung spezifisches CSS hat, das das <div>-Tag von next/image anspricht, z.B. .container div, könnte dies nicht mehr funktionieren. Sie können den Selektor auf .container span aktualisieren oder vorzugsweise ein neues <div className="wrapper"> um die <Image>-Komponente hinzufügen und dieses ansprechen, z.B. .container .wrapper.

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

Weitere Informationen finden Sie in der Dokumentation.

HMR-Verbindung verwendet nun WebSocket

Bisher 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 an den Next.js-Entwicklungsserver weitergeleitet werden, müssen Sie sicherstellen, dass die Upgrade-Anfrage korrekt behandelt wird. Beispielsweise müssen 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";
}

Falls 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 verwendet 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 z.B. express, müssen Sie möglicherweise app.all verwenden, um sicherzustellen, dass die Anfrage korrekt weitergeleitet wird, z.B.:

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

Webpack 4-Unterstützung wurde entfernt

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

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

Falls Ihre Anwendung noch webpack 4 mit dem Opt-out-Flag verwendet, erhalten Sie nun eine Fehlermeldung mit einem Link zur webpack 5 Upgrade-Dokumentation.

target-Option ist veraltet

Falls 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 das Tracing der für die Ausführung einer Seite benötigten Abhängigkeiten als veraltet markiert.

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

Falls Sie derzeit die target-Option auf serverless gesetzt haben, lesen Sie bitte die Dokumentation zur Nutzung der neuen Output-Konfiguration.