升級到版本 9

要升級到版本 9，請執行以下命令

終端機

npm i next@9

終端機

yarn add next@9

終端機

pnpm up next@9

終端機

bun add next@9

貼心小提醒：如果您使用 TypeScript，請確保同時將 @types/react 和 @types/react-dom 升級到對應的版本。

在 Vercel 上部署正式環境

如果您先前在 vercel.json 檔案中為動態路由設定了 routes，那麼在使用 Next.js 9 的新動態路由功能時，可以移除這些規則。

Next.js 9 的動態路由在 Vercel 上會**自動設定**，不需要任何 vercel.json 的客製化設定。

您可以在此處閱讀更多關於動態路由的資訊。

檢查您的自訂應用程式檔案 (`pages/_app.js`)

如果您先前複製了自訂 <App> 的範例，您或許可以移除 getInitialProps。

從 pages/_app.js 中移除 getInitialProps（如果可能）對於利用新的 Next.js 功能非常重要！

以下的 getInitialProps 沒有作用，可以移除

class MyApp extends App {
  // Remove me, I do nothing!
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}
 
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
 
    return { pageProps }
  }
 
  render() {
    // ... etc
  }
}

重大變更

不再需要 @zeit/next-typescript 的使用。

TypeScript 定義已與 next 軟體包一起發布，因此您需要卸載 @types/next，因為它們會衝突。

以下類型有所不同

此列表由社群建立，以幫助您升級，如果您發現其他差異，請向此列表發送拉取請求以幫助其他使用者。

從

import { NextContext } from 'next'
import { NextAppContext, DefaultAppIProps } from 'next/app'
import { NextDocumentContext, DefaultDocumentIProps } from 'next/document'

到

import { NextPageContext } from 'next'
import { AppContext, AppInitialProps } from 'next/app'
import { DocumentContext, DocumentInitialProps } from 'next/document'

`config` 鍵現在是頁面上的匯出項

您可能無法再從頁面匯出名為 config 的自定義變數（即 export { config } / export const config ...）。此匯出的變數現在用於指定頁面級別的 Next.js 設定，例如選擇性加入 AMP 和 API 路由功能。

您必須將非 Next.js 用途的 config 匯出項重新命名為其他名稱。

`next/dynamic` 在載入時不再預設呈現「載入中...」

動態組件在載入時預設不會呈現任何內容。您仍然可以透過設定 loading 屬性來自定義此行為。

import dynamic from 'next/dynamic'
 
const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello2'),
  {
    loading: () => <p>Loading</p>,
  }
)

已移除 withAmp，改用匯出的設定物件

終端機

curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js

要手動執行此遷移，或檢視程式碼修改將產生的內容，請參見下文

遷移前

import { withAmp } from 'next/amp'
 
function Home() {
  return <h1>My AMP Page</h1>
}
 
export default withAmp(Home)
// or
export default withAmp(Home, { hybrid: true })

遷移後

export default function Home() {
  return <h1>My AMP Page</h1>
}
 
export const config = {
  amp: true,
  // or
  amp: 'hybrid',
}

`next export` 不再將頁面匯出為 `index.html`

先前，匯出 pages/about.js 會產生 out/about/index.html。此行為已變更為產生 out/about.html。

您可以透過建立一個內容如下的 next.config.js 來恢復先前的行為

next.config.js

module.exports = {
  trailingSlash: true,
}

`pages/api/` 的處理方式不同

pages/api/ 中的頁面現在被視為 API 路由。此目錄中的頁面將不再包含用戶端套件。

已棄用的功能

`next/dynamic` 已棄用一次載入多個模組的功能

為了更接近 React 的實作方式 (React.lazy 和 Suspense)，next/dynamic 中一次載入多個模組的功能已被棄用。

更新依賴此行為的程式碼相對簡單！我們提供了一個修改前後的範例，以協助您遷移應用程式。

遷移前

import dynamic from 'next/dynamic'
 
const HelloBundle = dynamic({
  modules: () => {
    const components = {
      Hello1: () => import('../components/hello1').then((m) => m.default),
      Hello2: () => import('../components/hello2').then((m) => m.default),
    }
 
    return components
  },
  render: (props, { Hello1, Hello2 }) => (
    <div>
      <h1>{props.title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  ),
})
 
function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}
 
export default DynamicBundle

遷移後

import dynamic from 'next/dynamic'
 
const Hello1 = dynamic(() => import('../components/hello1'))
const Hello2 = dynamic(() => import('../components/hello2'))
 
function HelloBundle({ title }) {
  return (
    <div>
      <h1>{title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  )
}
 
function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}
 
export default DynamicBundle

這有幫助嗎？