如何升級至第 13 版

從第 12 版升級至第 13 版

若要更新至 Next.js 第 13 版，請使用您偏好的套件管理員執行以下指令：

npm i next@13 react@latest react-dom@latest eslint-config-next@13

yarn add next@13 react@latest react-dom@latest eslint-config-next@13

pnpm i next@13 react@latest react-dom@latest eslint-config-next@13

bun add next@13 react@latest react-dom@latest eslint-config-next@13

小提醒： 如果您使用 TypeScript，請確保同時將 @types/react 和 @types/react-dom 升級至最新版本。

第 13 版摘要

• 支援的瀏覽器 已變更為移除 Internet Explorer 並鎖定現代瀏覽器。
• 最低 Node.js 版本已從 12.22.0 提升至 16.14.0，因為 12.x 和 14.x 已達生命週期終止。
• 最低 React 版本已從 17.0.2 提升至 18.2.0。
• swcMinify 設定屬性已從 false 變更為 true。詳情請參閱 Next.js 編譯器。
• next/image 導入已更名為 next/legacy/image。next/future/image 導入則更名為 next/image。我們提供了一個 自動重命名工具 (codemod) 來安全且自動地重命名您的導入。
• next/link 的子元素不再允許是 <a>。請添加 legacyBehavior 屬性以使用舊版行為，或移除 <a> 來升級。我們提供了一個 自動升級工具 (codemod) 來自動升級您的程式碼。
• target 設定屬性已被移除，並由 輸出檔案追蹤 (Output File Tracing) 取代。

遷移共用功能

Next.js 13 引入了新的 app 目錄，其中包含新功能和慣例。然而，升級至 Next.js 13 不 強制要求使用新的 app 路由器。

您可以繼續使用 pages 目錄，同時享受適用於兩個目錄的新功能，例如更新後的 圖片元件、連結元件、腳本元件 和 字體優化。

<Image/> 元件

Next.js 12 透過臨時導入 next/future/image 為圖片元件帶來了許多改進。這些改進包括減少客戶端 JavaScript、更易於擴展和樣式化圖片、更好的無障礙性，以及原生瀏覽器延遲載入。

從 Next.js 13 開始，此新行為已成為 next/image 的預設設定。

我們提供了兩個自動遷移工具來協助您升級至新的圖片元件：

• next-image-to-legacy-image：此工具會安全且自動地將 next/image 導入重命名為 next/legacy/image，以保持與 Next.js 12 相同的行為。我們建議執行此工具以快速自動更新至 Next.js 13。
• next-image-experimental：在執行前一個工具後，您可以選擇性地執行此實驗性工具，將 next/legacy/image 升級至新的 next/image，這將移除未使用的屬性並添加行內樣式。請注意此工具目前處於實驗階段，僅涵蓋靜態用法（例如 <Image src={img} layout="responsive" />），不支援動態用法（例如 <Image {...props} />）。

或者，您也可以手動更新，請參閱 遷移指南 和 舊版比較。

<Link> 元件

<Link> 元件 不再需要手動添加 <a> 標籤作為子元素。此行為在 第 12.2 版 中作為實驗性選項引入，現已成為預設設定。在 Next.js 13 中，<Link> 始終會渲染 <a>，並允許您將屬性傳遞至底層標籤。

例如：

import Link from 'next/link'

// Next.js 12: 必須嵌套 `<a>` 否則會被排除
<Link href="/about">
  <a>關於我們</a>
</Link>

// Next.js 13: `<Link>` 始終會在底層渲染 `<a>`
<Link href="/about">
  關於我們
</Link>

若要將您的連結升級至 Next.js 13，您可以使用 new-link 自動遷移工具。

<Script> 元件

next/script 的行為已更新，以同時支援 pages 和 app 目錄。若您正逐步採用 app 目錄，請閱讀 升級指南。

字體優化

先前，Next.js 透過內嵌字體 CSS 來協助您優化字體。第 13 版引入了新的 next/font 模組，讓您能夠自訂字體載入體驗，同時確保卓越的效能和隱私保護。

請參閱 優化字體 以了解如何使用 next/font。