升级至版本 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 的新功能动态路由 (Dynamic Routing) 时，这些规则可以移除。

Next.js 9 的动态路由在 Vercel 上会自动配置，无需任何 vercel.json 定制。

您可以阅读更多关于动态路由的信息。

检查您的自定义应用文件 (`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 项目根目录运行以下命令自动迁移：

终端

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>我的 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 路由。此目录中的页面将不再包含客户端包。

弃用功能

`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="动态 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="动态 Bundle" />
}

export default DynamicBundle

On this page