升级到版本 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 自定义设置。

你可以在此处阅读有关动态路由的更多信息。

检查你的自定义 App 文件 (`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` 已不再必要

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，因为它们会冲突。

以下类型有所不同

此列表由社区创建，以帮助你升级，如果你发现其他差异，请发送拉取请求到此列表以帮助其他用户。

从

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...”

动态组件在加载时默认情况下不会渲染任何内容。你仍然可以通过设置 loading 属性来自定义此行为

import dynamic from 'next/dynamic'
 
const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello2'),
  {
    loading: () => <p>Loading</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

要手动执行此迁移，或查看 codemod 将生成的内容，请参见下文

之前

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