版本 13

从版本 12 升级至 13

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

npm i next@latest react@latest react-dom@latest eslint-config-next@latest
# 或
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# 或
pnpm up next react react-dom eslint-config-next --latest
# 或
bun add next@latest react@latest react-dom@latest eslint-config-next@latest

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 配置属性已被移除，其功能由 输出文件追踪 (Output File Tracing) 取代。

迁移共享功能

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

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

<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.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。