如何升级到版本 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 的新内置支持，或者禁用该功能。

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`

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

Moment.js locales 默认排除

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