版本 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 并将目标转向现代浏览器。
- 由于 12.x 和 14.x 已达到使用寿命，因此 Node.js 的最低版本已从 12.22.0 提升到 16.14.0。
- 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 引入了许多对 Image 组件的改进，并使用了临时的导入：next/future/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>` has to be nested otherwise it's excluded
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
About
</Link>要将您的链接升级到 Next.js 13，您可以使用new-link 代码修改。
<Script> 组件
next/script 的行为已更新，以支持pages和app。如果正在逐步采用app，请阅读升级指南。
字体优化
以前，Next.js 通过内联字体 CSS 来帮助您优化字体。13 版本引入了新的next/font模块，使您能够自定义字体加载体验，同时仍确保出色的性能和隐私。
请参阅优化字体，了解如何使用next/font。
这有帮助吗？