如何升级至版本 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 组件、Link 组件、Script 组件 和 字体优化。

<Image/> 组件

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

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

我们提供两个代码迁移工具帮助您迁移至新的 Image 组件：

• next-image-to-legacy-image：该工具会安全地将 next/image 导入自动重命名为 next/legacy/image 以保持与 Next.js 12 相同的行为。建议首先运行此工具快速自动升级至 Next.js 13。
• 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。