版本 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`

Next.js 11 支持PORT环境变量来设置应用程序运行的端口。仍然建议使用-p/--port，但如果您以任何方式被禁止使用-p，您现在可以使用PORT作为替代方案。

示例

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`

Head.rewind 自 Next.js 9.5 以来一直是空操作，在 Next.js 11 中它被移除。您可以安全地移除您对 Head.rewind 的使用。

默认情况下排除 Moment.js 本地化文件

Moment.js 默认情况下包含许多本地化的翻译。Next.js 现在默认自动排除这些本地化文件，以优化使用 Moment.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 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