Version 12

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

npm install next@12

yarn add next@12

pnpm update next@12

bun add next@12

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 Mindestversion von Node.js 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 erforderliche Mindestversion von React ist 17.0.2. Zum Upgrade können Sie 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 bis zu 5x schneller bei Fast Refresh.

Next.js bietet volle Abwärtskompatibilität mit Anwendungen, die eine benutzerdefinierte Babel-Konfiguration verwenden. Alle Transformationen, die Next.js standardmäßig durchführt, 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 auf die Verwendung von 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 bei der Umstellung auf SWC helfen, teilen Sie bitte Ihre .babelrc in diesem Feedback-Thread mit.

SWC ersetzt Terser für Minifizierung

Sie können aktivieren, dass Terser durch SWC für bis zu 7x schnellere JavaScript-Minifizierung ersetzt wird, indem Sie ein Flag in next.config.js setzen:

module.exports = {
  swcMinify: true,
}

Die Minifizierung mit SWC ist ein Opt-in-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 Parsen von styled-jsx CSS

Zusätzlich zum Rust-basierten Compiler haben wir einen neuen CSS-Parser implementiert, basierend auf dem für die styled-jsx Babel-Transformation verwendeten. Dieser neue Parser hat eine verbesserte Handhabung von CSS und wirft nun Fehler bei ungültigem CSS, das zuvor 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> innerhalb eines <span> anstelle eines <div>.

Falls Ihre Anwendung spezifisches CSS hat, das span-Elemente anspricht, wie .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 spezifische Klasse einschränken, wie .container span.item, und die relevante Komponente mit diesem className aktualisieren, z.B. <span className="item" />.

Falls Ihre Anwendung spezifisches CSS hat, das das next/image <div>-Tag 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-Prop bleibt unverändert und wird weiterhin an das zugrundeliegende <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 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 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 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 Verweis auf die webpack 5 Upgrade-Dokumentation.

target-Option 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 Nachverfolgen der für eine Seite benötigten Abhängigkeiten als veraltet markiert.

Während next build verfolgt Next.js automatisch jede Seite und ihre Abhängigkeiten, 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-Funktionalität.