版本 12

若要升級至版本 12，請執行以下命令

終端機

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

小提示： 如果您使用 TypeScript，請確保您也將 @types/react 和 @types/react-dom 升級到對應的版本。

升級至 12.2

Middleware - 如果您在 12.2 之前使用 Middleware，請參閱升級指南以取得更多資訊。

升級至 12.0

最低 Node.js 版本 - 最低 Node.js 版本已從 12.0.0 提升至 12.22.0，這是第一個支援原生 ES Modules 的 Node.js 版本。

最低 React 版本 - 最低要求的 React 版本為 17.0.2。若要升級，您可以在終端機中執行以下命令

終端機

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 取代 Babel

Next.js 現在使用基於 Rust 的編譯器 SWC 來編譯 JavaScript/TypeScript。這個新的編譯器在編譯個別檔案時速度比 Babel 快 17 倍，快速重新整理速度快 5 倍。

Next.js 提供與具有自訂 Babel 設定的應用程式的完整回溯相容性。Next.js 預設處理的所有轉換，例如 styled-jsx 和 getStaticProps / getStaticPaths / getServerSideProps 的 tree-shaking 都已移植到 Rust。

當應用程式具有自訂 Babel 設定時，Next.js 將自動選擇不使用 SWC 來編譯 JavaScript/Typescript，並會回退到使用 Babel，就像在 Next.js 11 中使用的方式一樣。

目前許多與外部函式庫的整合需要自訂 Babel 轉換，這些整合將在不久的將來移植到基於 Rust 的 SWC 轉換。這些包括但不限於

Styled Components
Emotion
Relay

為了優先處理可協助您採用 SWC 的轉換，請在此意見回饋討論串上提供您的 .babelrc。

SWC 取代 Terser 進行最小化

您可以選擇使用 next.config.js 中的標誌，以 SWC 取代 Terser 來最小化 JavaScript，速度最多可加快 7 倍

next.config.js

module.exports = {
  swcMinify: true,
}

使用 SWC 進行最小化是一個選擇加入的標誌，以確保在 Next.js 12.1 中成為預設值之前，可以針對更多真實世界的 Next.js 應用程式進行測試。如果您對最小化有任何意見回饋，請在此意見回饋討論串上留言。

styled-jsx CSS 解析的改進

除了基於 Rust 的編譯器之外，我們還實作了一個新的 CSS 解析器，該解析器基於 styled-jsx Babel 轉換所使用的解析器。這個新的解析器改進了 CSS 的處理，並且現在在使用先前會漏掉並導致意外行為的無效 CSS 時會產生錯誤。

由於此變更，無效的 CSS 將在開發期間和 next build 期間拋出錯誤。此變更僅影響 styled-jsx 的使用。

`next/image` 變更了包裝元素

next/image 現在將 <img> 渲染在 <span> 內，而不是 <div> 內。

如果您的應用程式有針對 span 的特定 CSS，例如 .container span，則升級到 Next.js 12 可能會錯誤地匹配 <Image> 元件內的包裝元素。您可以透過將選擇器限制為特定類別（例如 .container span.item）並使用該 className 更新相關元件（例如 <span className="item" />）來避免這種情況。

如果您的應用程式具有針對 next/image <div> 標籤的特定 CSS，例如 .container div，則可能不再匹配。您可以更新選擇器 .container span，或者最好新增一個 <div className="wrapper"> 包裝 <Image> 元件，並改為針對該元件，例如 .container .wrapper。

className 屬性保持不變，仍將傳遞到基礎的 <img> 元素。

請參閱文件以取得更多資訊。

HMR 連線現在使用 WebSocket

先前，Next.js 使用伺服器發送事件連線來接收 HMR 事件。Next.js 12 現在使用 WebSocket 連線。

在某些情況下，當將請求代理到 Next.js 開發伺服器時，您需要確保正確處理升級請求。例如，在 nginx 中，您需要新增以下設定

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

如果您使用 Apache (2.x)，您可以新增以下設定以啟用 WebSockets 連線到伺服器。請檢閱連接埠、主機名稱和伺服器名稱。

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / https://127.0.0.1:3000/
 ProxyPassReverse / https://127.0.0.1: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://127.0.0.1:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://127.0.0.1:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://127.0.0.1:3000/_next/webpack-hmr
 </Location>
</VirtualHost>

對於自訂伺服器，例如 express，您可能需要使用 app.all 來確保請求正確傳遞，例如

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

已移除 Webpack 4 支援

如果您已經使用 webpack 5，則可以跳過本節。

Next.js 已採用 webpack 5 作為 Next.js 11 中編譯的預設值。如webpack 5 升級文件中所述，Next.js 12 移除對 webpack 4 的支援。

如果您的應用程式仍在使用 webpack 4 並使用選擇退出標誌，您現在將看到一個錯誤，連結到webpack 5 升級文件。

`target` 選項已棄用

如果您的 next.config.js 中沒有 target，則可以跳過本節。

target 選項已被棄用，取而代之的是內建支援，用於追蹤執行頁面所需的依賴項。

在 next build 期間，Next.js 將自動追蹤每個頁面及其依賴項，以判斷部署生產版本應用程式所需的所有檔案。

如果您目前使用設定為 serverless 的 target 選項，請閱讀關於如何利用新 output 的文件。