版本 11

要升级到版本 11，请运行以下命令：

Terminal

npm i next@11 react@17 react-dom@17

Terminal

yarn add next@11 react@17 react-dom@17

Terminal

pnpm up next@11 react@17 react-dom@17

Terminal

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(
      `应用正在切换到 ${url} ${
        shallow ? '使用' : '不使用'
      } 浅层路由`
    )
  }
 
  router.events.on('routeChangeStart', handleRouteChange)
 
  // 如果组件被卸载，使用 `off` 方法取消订阅事件：
  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