第 13 版

從 12 版升級至 13 版

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

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
# 或
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# 或
pnpm up next react react-dom eslint-config-next --latest
# 或
bun add next@latest react@latest react-dom@latest eslint-config-next@latest

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>About</a>
</Link>

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

若要將您的連結升級至 Next.js 13，您可以使用 new-link 代碼轉換工具。

<Script> 元件

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

字體優化

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

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