版本 13
從 12 升級到 13
若要更新到 Next.js 版本 13，請使用您偏好的套件管理器執行以下命令
npm i next@13 react@latest react-dom@latest eslint-config-next@13yarn add next@13 react@latest react-dom@latest eslint-config-next@13pnpm i next@13 react@latest react-dom@latest eslint-config-next@13bun 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設定屬性已移除，並由 輸出檔案追蹤 取代。
遷移共用功能
Next.js 13 引入了新的 app 目錄，具有新的功能和慣例。然而，升級到 Next.js 13 不 需要使用新的 app 路由器。
您可以繼續使用 pages 以及在兩個目錄中都可運作的新功能，例如更新的 Image 元件、Link 元件、Script 元件 和 字體最佳化。
<Image/> 元件
Next.js 12 為 Image 元件引入了許多改進，並具有臨時匯入：next/future/image。這些改進包括減少用戶端 JavaScript、更輕鬆地擴展和設定圖片樣式、更好的協助工具和原生瀏覽器延遲載入。
從 Next.js 13 開始，此新行為現在是 next/image 的預設行為。
有兩個 codemod 可協助您遷移到新的 Image 元件
- next-image-to-legacy-image：此 codemod 將安全且自動地將
next/image匯入重新命名為next/legacy/image，以維持與 Next.js 12 相同的行為。我們建議執行此 codemod 以快速自動更新到 Next.js 13。 - next-image-experimental：在執行先前的 codemod 之後，您可以選擇性地執行此實驗性 codemod，將
next/legacy/image升級到新的next/image，這將移除未使用的屬性並新增內嵌樣式。請注意，此 codemod 是實驗性的，僅涵蓋靜態用法 (例如<Image src={img} layout="responsive" />)，但不涵蓋動態用法 (例如<Image {...props} />)。
<Link> 元件
<Link> 元件 不再需要手動新增 <a> 標籤作為子項。此行為已在 版本 12.2 中作為實驗性選項新增，現在是預設行為。在 Next.js 13 中，<Link> 始終渲染 <a>，並允許您將 props 轉發到基礎標籤。
例如
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 codemod。
<Script> 元件
next/script 的行為已更新，以同時支援 pages 和 app。如果逐步採用 app，請閱讀升級指南。
字體最佳化
先前，Next.js 透過內嵌字體 CSS 來協助您最佳化字體。版本 13 引入了新的 next/font 模組，讓您能夠自訂字體載入體驗，同時仍確保出色的效能和隱私。
請參閱 最佳化字體 以了解如何使用 next/font。
這有幫助嗎？