跳至內容
建置您的應用程式升級版本 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，這是第一個原生支援 ES 模組的 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 倍，快速重新整理 (Fast Refresh) 則快 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 中的標記，將 Terser 替換為 SWC 來縮小 JavaScript，速度最高可提升 7 倍。

next.config.js
module.exports = {
  swcMinify: true,
}

使用 SWC 進行縮小是一個選擇性標記，以確保在 Next.js 12.1 中成為預設值之前，可以在更多實際的 Next.js 應用程式中進行測試。如果您對縮小有任何意見回饋，請在此意見回饋串中留言。

styled-jsx CSS 解析的改進

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

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

next/image 變更了包裝元素 ）來避免這種情況。

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

className 屬性保持不變，仍會傳遞到底層的 <img> 元素。

更多資訊請參閱文件。

HMR 連線現在使用 WebSocket 伺服器推送事件連線來接收 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)，您可以新增以下配置來啟用伺服器的 WebSocket。請檢查連接埠、主機名稱和伺服器名稱。

<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 11 已採用 webpack 5 作為預設編譯器。如webpack 5 升級文件中所述，Next.js 12 刪除了對 webpack 4 的支援。

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

target 選項已棄用

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

target 選項已被棄用，改以內建支援來追蹤執行頁面所需的依賴項。

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

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