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.

Aktualisierung auf 12.2

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

Aktualisierung auf 12.0

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

Minimale React-Version - Die mindestens erforderliche React-Version ist 17.0.2. Um zu aktualisieren, 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 jetzt 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 vollständige Abwärtskompatibilität mit Anwendungen, die eine benutzerdefinierte Babel-Konfiguration haben. 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ückgreifen, 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 die bis zu 7x schnellere Minifizierung von JavaScript über eine 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 standardmäßig aktiviert wird. Wenn 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 hat eine verbesserte Handhabung von CSS und wirft jetzt Fehler, 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 verursachen. Diese Änderung betrifft nur die Verwendung von styled-jsx.

next/image ändert umschließendes Element

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

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

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

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

Weitere Informationen finden Sie in der Dokumentation.

HMR-Verbindung verwendet jetzt WebSocket

Bisher hat Next.js eine Server-Sent Events-Verbindung für HMR-Ereignisse verwendet. Next.js 12 verwendet jetzt eine WebSocket-Verbindung.

In einigen Fällen, wenn Sie Anfragen an den Next.js-Entwicklungsserver weiterleiten, müssen Sie sicherstellen, dass die Upgrade-Anfrage korrekt behandelt wird. Zum Beispiel 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";
}

Wenn Sie Apache (2.x) verwenden, können Sie die folgende Konfiguration hinzufügen, um WebSockets auf dem Server zu aktivieren. Überprüfen Sie den Port, den Hostnamen und die 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, 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 als Standard für die Kompilierung in Next.js 11 übernommen. Wie in der Dokumentation zur Aktualisierung auf webpack 5 mitgeteilt, entfernt Next.js 12 die Unterstützung für webpack 4.

Wenn Ihre Anwendung immer noch webpack 4 mit dem Opt-out-Flag verwendet, erhalten Sie jetzt eine Fehlermeldung, die auf die Dokumentation zur Aktualisierung auf webpack 5 verweist.

target-Option ist veraltet

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 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.

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