版本 11

若要升級至版本 11，請執行以下命令

終端機

npm i next@11 react@17 react-dom@17

終端機

yarn add next@11 react@17 react-dom@17

終端機

pnpm up next@11 react@17 react-dom@17

終端機

bun add next@11 react@17 react-dom@17

小知識： 如果您使用 TypeScript，請確保您也將 @types/react 和 @types/react-dom 升級到對應的版本。

Webpack 5

Webpack 5 現在是所有 Next.js 應用程式的預設設定。如果您沒有自訂 webpack 配置，您的應用程式已經在使用 webpack 5。如果您有自訂 webpack 配置，您可以參考 Next.js webpack 5 文件以取得升級指南。

清理 `distDir` 現在是預設行為

建置輸出目錄（預設為 .next）現在預設會被清除，但 Next.js 快取除外。您可以參考清理 distDir RFC 以取得更多資訊。

如果您的應用程式先前依賴此行為，您可以透過在 next.config.js 中新增 cleanDistDir: false 標誌來停用新的預設行為。

現在 `next dev` 和 `next start` 支援 `PORT`

Next.js 11 支援 PORT 環境變數來設定應用程式運行的端口。仍然建議使用 -p/--port，但如果您被禁止以任何方式使用 -p，您現在可以使用 PORT 作為替代方案

範例

PORT=4000 next start

next.config.js 自訂匯入圖片

Next.js 11 支援使用 next/image 靜態匯入圖片。這項新功能依賴於能夠處理圖片匯入。如果您先前新增了 next-images 或 next-optimized-images 套件，您可以改用新的內建支援 next/image，或停用此功能

next.config.js

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

從 `pages/_app.js` 移除 `super.componentDidCatch()`

next/app 元件的 componentDidCatch 在 Next.js 9 中已被棄用，因為不再需要它，並且從那時起就變成了 no-op。在 Next.js 11 中，它被移除。

如果您的 pages/_app.js 有自訂的 componentDidCatch 方法，您可以移除 super.componentDidCatch，因為不再需要它。

從 `pages/_app.js` 移除 `Container`

此匯出在 Next.js 9 中已被棄用，因為不再需要它，並且從那時起在開發期間發出警告。在 Next.js 11 中，它被移除。

如果您的 pages/_app.js 從 next/app 匯入 Container，您可以移除 Container，因為它已被移除。在文件中了解更多資訊。

從頁面元件移除 `props.url` 用法

此屬性在 Next.js 4 中已被棄用，並且從那時起在開發期間顯示警告。隨著 getStaticProps / getServerSideProps 的引入，這些方法已經不允許使用 props.url。在 Next.js 11 中，它被完全移除。

您可以在文件中了解更多資訊。

移除 `next/image` 上的 `unsized` 屬性

next/image 上的 unsized 屬性在 Next.js 10.0.1 中已被棄用。您可以使用 layout="fill" 來代替。在 Next.js 11 中，unsized 被移除。

移除 `next/dynamic` 上的 `modules` 屬性

next/dynamic 的 modules 和 render 選項在 Next.js 9.5 中已被棄用。這樣做是為了使 next/dynamic API 更接近 React.lazy。在 Next.js 11 中，modules 和 render 選項被移除。

自 Next.js 8 以來，此選項未在文件中提及，因此您的應用程式不太可能使用它。

如果您的應用程式確實使用 modules 和 render，您可以參考文件。

移除 `Head.rewind`

自 Next.js 9.5 以來，Head.rewind 一直是 no-op，在 Next.js 11 中，它被移除。您可以安全地移除您對 Head.rewind 的使用。

Moment.js 地區設定預設排除

Moment.js 預設包含許多地區設定的翻譯。Next.js 現在預設自動排除這些地區設定，以優化使用 Moment.js 的應用程式的捆綁大小。

若要載入特定地區設定，請使用此程式碼片段

import moment from 'moment'
import 'moment/locale/ja'
 
moment.locale('ja')

如果您不想要新的行為，您可以將 excludeDefaultMomentLocales: false 新增至 next.config.js 來選擇退出此新預設設定，但請注意，強烈建議不要停用此新優化，因為它可以顯著減少 Moment.js 的大小。

更新 `router.events` 的用法

如果您在渲染期間存取 router.events，在 Next.js 11 中，預先渲染期間不再提供 router.events。請確保您在 useEffect 中存取 router.events

useEffect(() => {
  const handleRouteChange = (url, { shallow }) => {
    console.log(
      `App is changing to ${url} ${
        shallow ? 'with' : 'without'
      } shallow routing`
    )
  }
 
  router.events.on('routeChangeStart', handleRouteChange)
 
  // If the component is unmounted, unsubscribe
  // from the event with the `off` method:
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [router])

如果您的應用程式使用 router.router.events（這是一個非公開的內部屬性），請確保也使用 router.events。

React 17 引入了一個新的 JSX 轉換，它將 Next.js 長期以來的特性帶給更廣泛的 React 生態系統：使用 JSX 時不必 import React from 'react'。使用 React 17 時，Next.js 將自動使用新的轉換。此轉換不會使 React 變數成為全域變數，這是先前 Next.js 實作的意外副作用。有一個 codemod 可用於自動修復您意外使用 React 但未匯入它的情況。

大多數應用程式已經使用最新版本的 React，在 Next.js 11 中，最低 React 版本已更新至 17.0.2。

若要升級，您可以執行以下命令

npm install react@latest react-dom@latest

或使用 yarn

yarn add react@latest react-dom@latest