如何升级到版本 13
从 12 升级到 13
要更新到 Next.js 13 版本，请使用您首选的包管理器运行以下命令
npm i next@13 react@latest react-dom@latest eslint-config-next@13yarn add next@13 react@latest react-dom@latest eslint-config-next@13pnpm i next@13 react@latest react-dom@latest eslint-config-next@13bun 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>。添加legacyBehaviorprop 以使用旧行为，或者删除<a>以进行升级。提供了 codemod 以自动升级您的代码。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 的默认行为。
有两个 codemod 可以帮助您迁移到新的 Image 组件
- 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，这将删除未使用的 prop 并添加内联样式。请注意，此 codemod 是实验性的，仅涵盖静态用法（例如<Image src={img} layout="responsive" />），而不涵盖动态用法（例如<Image {...props} />）。
或者，您可以手动更新，遵循 迁移指南，也可以查看 旧版比较。
<Link> 组件
<Link> 组件 不再需要手动添加 <a> 标签作为子级。此行为在 12.2 版本 中作为实验性选项添加，现在是默认行为。在 Next.js 13 中，<Link> 始终渲染 <a> 并允许您将 prop 转发到底层标签。
例如
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 codemod。
<Script> 组件
next/script 的行为已更新，以支持 pages 和 app。如果增量采用 app，请阅读 升级指南。
字体优化
此前，Next.js 通过内联字体 CSS 帮助您优化字体。版本 13 引入了新的 next/font 模块，使您能够自定义字体加载体验，同时仍确保出色的性能和隐私。
请参阅 优化字体 以了解如何使用 next/font。
这有帮助吗？