版本 13

从 12 升级至 13

要更新至 Next.js 版本 13，请使用您偏好的包管理器运行以下命令：

npm i next@13 react@latest react-dom@latest eslint-config-next@13

yarn add next@13 react@latest react-dom@latest eslint-config-next@13

pnpm i next@13 react@latest react-dom@latest eslint-config-next@13

bun add next@13 react@latest react-dom@latest eslint-config-next@13

须知： 如果您使用 TypeScript，请确保同时升级 @types/react 和 @types/react-dom 至最新版本。

v13 更新摘要

• 支持的浏览器 已变更，不再支持 Internet Explorer 并转向现代浏览器。
• 最低 Node.js 版本要求从 12.22.0 提升至 16.14.0，因为 12.x 和 14.x 已终止维护。
• 最低 React 版本要求从 17.0.2 提升至 18.2.0。
• swcMinify 配置属性默认值从 false 改为 true。详情参阅 Next.js 编译器。
• next/image 导入已重命名为 next/legacy/image，而 next/future/image 导入重命名为 next/image。我们提供了 代码迁移工具 来安全自动地重命名导入。
• next/link 的子元素不再允许是 <a> 标签。如需保留旧版行为请添加 legacyBehavior 属性，或移除 <a> 标签进行升级。提供有 代码迁移工具 可自动升级代码。
• 已移除 target 配置属性，其功能由 输出文件追踪 替代。

迁移共享功能

Next.js 13 引入了全新的 app 目录 及配套的新特性和约定。但升级至 Next.js 13 无需 强制使用新的 app 目录。

您可以继续使用 pages 目录，同时享受两个目录通用的新特性，例如更新的 图片组件、链接组件、脚本组件 和 字体优化。

<Image/> 组件

Next.js 12 通过临时导入路径 next/future/image 为图片组件带来了多项改进，包括减少客户端 JavaScript、更简便的图片扩展与样式设置、更好的可访问性以及原生浏览器懒加载。

从 Next.js 13 开始，这些新行为已成为 next/image 的默认实现。

我们提供两个代码迁移工具帮助您升级图片组件：

• next-image-to-legacy-image：此工具会将 next/image 导入安全自动地重命名为 next/legacy/image 以保持与 Next.js 12 相同的行为。推荐首先运行此工具实现快速自动升级。
• next-image-experimental：运行前一个迁移工具后，您可选择运行此实验性工具将 next/legacy/image 升级为新版 next/image，它将移除未使用的属性并添加内联样式。请注意此工具目前仅支持静态用法（如 <Image src={img} layout="responsive" />），不支持动态用法（如 <Image {...props} />）。

您也可以参考 迁移指南 手动更新，或查看 新旧版本对比。

<Link> 组件

<Link> 组件 不再需要手动添加 <a> 标签作为子元素。该行为最初作为实验性功能在 12.2 版本 引入，现已成为默认行为。在 Next.js 13 中，<Link> 会自动渲染 <a> 标签并允许您传递属性至底层标签。

例如：

import Link from 'next/link'

// Next.js 12: 必须嵌套 `<a>` 标签否则会被忽略
<Link href="/about">
  <a>关于</a>
</Link>

// Next.js 13: `<Link>` 自动在底层渲染 `<a>` 标签
<Link href="/about">
  关于
</Link>

要升级至 Next.js 13 的链接组件，可使用 new-link 代码迁移工具。

<Script> 组件

next/script 的行为已更新以同时支持 pages 和 app 目录。如需逐步迁移至 app 目录，请阅读 升级指南。

字体优化

此前 Next.js 通过内联字体 CSS 实现优化。版本 13 引入了全新的 next/font 模块，让您在保持卓越性能和隐私性的同时，自定义字体加载体验。

参阅 字体优化 了解如何使用 next/font。