第 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 升級至最新版本。

v13 版本概要

• 支援的瀏覽器 已變更，不再支援 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 component)、連結元件 (Link component)、腳本元件 (Script component) 和 字體優化 (Font optimization)。

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