版本 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。有一个 codemod 可用来安全且自动地重命名你的导入。
• next/link 的子元素不能再是 <a>。添加 legacyBehavior 属性以使用旧行为，或移除 <a> 以升级。有一个 codemod 可用来自动升级你的代码。
• target 配置属性已被移除，并由输出文件跟踪取代。

迁移共享功能

Next.js 13 引入了新的 app 目录，具有新的功能和约定。但是，升级到 Next.js 13 并不需要使用新的 app 路由器。

你可以继续使用 pages，并使用在两个目录中都适用的新功能，如更新后的图像组件、链接组件、脚本组件和字体优化。

<Image/> 组件

Next.js 12 引入了许多对图像组件的改进，并提供了一个临时导入：next/future/image。这些改进包括更少的客户端 JavaScript、更简单的图像扩展和样式方式、更好的无障碍性和原生浏览器懒加载。

从 Next.js 13 开始，这种新行为现在是 next/image 的默认设置。

有两个 codemod 可帮助你迁移到新的图像组件：

• next-image-to-legacy-image：这个 codemod 将安全且自动地将 next/image 导入重命名为 next/legacy/image，以保持与 Next.js 12 相同的行为。我们建议运行此 codemod 以快速自动更新到 Next.js 13。
• next-image-experimental：运行前一个 codemod 后，你可以选择运行这个实验性 codemod 来将 next/legacy/image 升级到新的 next/image，它将删除未使用的属性并添加内联样式。请注意，此 codemod 是实验性的，仅覆盖静态使用（如 <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 codemod。

<Script> 组件

next/script 的行为已更新，以支持 pages 和 app。如果正在增量采用 app，请阅读升级指南。

字体优化

以前，Next.js 通过内联字体 CSS 来帮助你优化字体。第 13 版引入了新的 next/font 模块，使你能够自定义字体加载体验，同时确保出色的性能和隐私。

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