跳至內容
建置您的應用程式升級版本 11

版本 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 旗標來停用新的預設行為。

PORT 現在支援 next dev 和 next start 
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 中已被棄用，因為它不再需要，而且之後一直是無效操作。在 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 預設排除 Moment.js 語系檔

Moment.js 預設包含許多語系的翻譯檔案。為了最佳化使用 Moment.js 的應用程式的 bundle 大小，Next.js 現在預設會自動排除這些語系檔。

要載入特定語系，請使用以下程式碼片段：

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

如果您不想要新的行為，可以透過在 next.config.js 中加入 excludeDefaultMomentLocales: false 來停用這個新預設值。但強烈建議不要停用這個新的最佳化功能，因為它可以顯著減少 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 16 至 17

React 17 引入了一個新的 JSX 轉換器，它將 Next.js 長期以來的功能帶到了更廣泛的 React 生態系統：在使用 JSX 時不再需要 import React from 'react'。使用 React 17 時，Next.js 將自動使用新的轉換器。此轉換器不會將 React 變數設為全域變數，這是先前 Next.js 實作中非預期的副作用。程式碼修改器 可用於自動修復您在未匯入的情況下意外使用 React 的情況。

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

要升級，您可以執行以下指令：

npm install react@latest react-dom@latest

或者使用 yarn：

yarn add react@latest react-dom@latest