跳到內容
指南升級版本 12

如何升級到版本 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

中介軟體 - 如果您在 12.2 之前使用中介軟體，請參閱升級指南以獲取更多資訊。

升級到 12.0

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

最低 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，並將回退到像 Next.js 11 中那樣使用 Babel。

許多目前需要自定義 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 現在在 <span> 而不是 <div> 中渲染 <img>。

如果您的應用程式具有針對 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://:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

如果您使用的是 Apache (2.x)，您可以新增以下配置以啟用伺服器的 Web 套接字。檢查埠、主機名和伺服器名稱。

<VirtualHost *:443>
 # ServerName yourwebsite.local
 ServerName "${WEBSITE_SERVER_NAME}"
 ProxyPass / https://:3000/
 ProxyPassReverse / https://: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://:3000/_next/webpack-hmr/$1 [P,L]
    ProxyPass ws://:3000/_next/webpack-hmr retry=0 timeout=30
    ProxyPassReverse ws://: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 在 Next.js 11 中已將 webpack 5 作為預設編譯工具。正如webpack 5 升級文件中所述，Next.js 12 移除了對 webpack 4 的支援。

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

target 選項已棄用

如果您的 next.config.js 中沒有 target，您可以跳過此部分。

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

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

如果您當前正在使用設定為 serverless 的 target 選項，請閱讀有關如何利用新輸出的文件。