升級至第 9 版

要升級至第 9 版，請執行以下指令：

Terminal

npm install next@9

yarn add next@9

在 Vercel 上的生產部署

如果您先前在 vercel.json 檔案中為動態路由配置了 routes，當您使用 Next.js 9 的新功能動態路由 (Dynamic Routing)時，這些規則可以被移除。

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

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

檢查您的自訂 App 檔案 (`pages/_app.js`)

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

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

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

class MyApp extends App {
  // 移除我，我沒有任何作用！
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  render() {
    // ... 等等
  }
}

重大變更

不再需要 `@zeit/next-typescript`

Next.js 現在會忽略 @zeit/next-typescript 的使用並警告您將其移除。請從您的 next.config.js 中移除這個插件。

從您的自訂 .babelrc 中移除 @zeit/next-typescript/babel 的引用（如果有的話）。

也應該從您的 next.config.js 中移除 fork-ts-checker-webpack-plugin 的使用。

TypeScript 定義現在與 next 套件一起發布，因此您需要解除安裝 @types/next，因為它們會產生衝突。

以下類型有所變更：

這個清單是由社群創建以幫助您升級，如果您發現其他差異，請發送 pull-request 到這個清單以幫助其他使用者。

從：

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 配置，如 Opt-in AMP 和 API 路由功能。

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

`next/dynamic` 在載入時預設不再渲染 "loading..."

動態元件在載入時預設不會渲染任何內容。您仍然可以通過設定 loading 屬性來自訂這個行為：

import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello2'),
  {
    loading: () => <p>載入中</p>,
  }
)

`withAmp` 已被移除，改為導出配置物件

Next.js 現在有了頁面級配置的概念，因此為了保持一致性，移除了 withAmp 高階元件。

這個變更可以通過在您的 Next.js 專案根目錄執行以下指令來自動遷移：

Terminal

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

要手動執行這個遷移，或查看 codemod 會產生的結果，請參考以下內容：

之前

import { withAmp } from 'next/amp'

function Home() {
  return <h1>我的 AMP 頁面</h1>
}

export default withAmp(Home)
// 或
export default withAmp(Home, { hybrid: true })

之後

export default function Home() {
  return <h1>我的 AMP 頁面</h1>
}

export const config = {
  amp: true,
  // 或
  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 路由 (API Routes)。這個目錄中的頁面將不再包含客戶端套件。

已棄用的功能

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

next/dynamic 中一次載入多個模組的功能已被棄用，以更接近 React 的實現方式（React.lazy 和 Suspense）。

更新依賴此行為的程式碼相對簡單！我們提供了一個前後範例來幫助您遷移您的應用程式：

之前

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

On this page