Version 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 实现的意外副作用。一个 codemod 可用于自动修复您意外使用 React 但未导入它的情况。

大多数应用程序已经使用了最新版本的 React，在 Next.js 11 中，最低 React 版本已更新为 17.0.2。

要升级，您可以运行以下命令

npm install react@latest react-dom@latest

或使用 yarn

yarn add react@latest react-dom@latest