版本 13 (Version 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。您可以使用程式碼修改工具安全地自動重新命名您的導入。
• next/link 的子項不能再是 <a>。新增 legacyBehavior 屬性以使用舊版行為，或移除 <a> 進行升級。您可以使用程式碼修改工具自動升級您的程式碼。
• target 設定屬性已被移除，並由輸出檔案追蹤取代。

遷移共用功能app 目錄，其中包含新的功能和慣例。然而，升級到 Next.js 13 並**不需要**使用新的app 目錄。

您可以繼續使用 pages 目錄，並使用同時適用於兩個目錄的新功能，例如更新的圖片元件、連結元件、Script 元件和字體最佳化。

<Image/> 元件：這個程式碼修改器會安全且自動地將 next/image 導入重新命名為 next/legacy/image，以維持與 Next.js 12 相同的行為。我們建議執行這個程式碼修改器，以便快速自動更新至 Next.js 13。

next-image-experimental：執行前一個程式碼修改器後，您可以選擇性地執行這個實驗性程式碼修改器，將 next/legacy/image 升級到新的 next/image，這將移除未使用的屬性並新增 inline 樣式。請注意，這個程式碼修改器是實驗性的，僅涵蓋靜態使用方式（例如 <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>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>
 
// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
  About
</Link>

要將您的連結升級到 Next.js 13，您可以使用 new-link 程式碼修改器。

<Script> 元件

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

字體最佳化

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

請參閱字型最佳化以了解如何使用 next/font。