Skip to main content

版本 13

从 12 升级到 13​

¥Upgrading from 12 to 13

要更新到 Next.js 版本 13，请使用你首选的包管理器运行以下命令：

¥To update to Next.js version 13, run the following command using your preferred package manager:

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 升级到最新版本。

¥Good to know: If you are using TypeScript, ensure you also upgrade @types/react and @types/react-dom to their latest versions.

v13 总结​

¥v13 Summary

  • 支持的浏览器 已更改为放弃 Internet Explorer 并针对现代浏览器。

    ¥The Supported Browsers have been changed to drop Internet Explorer and target modern browsers.

  • 由于 12.x 和 14.x 已结束生命周期，最低 Node.js 版本已从 12.22.0 升至 16.14.0。

    ¥The minimum Node.js version has been bumped from 12.22.0 to 16.14.0, since 12.x and 14.x have reached end-of-life.

  • 最低 React 版本已从 17.0.2 升至 18.2.0。

    ¥The minimum React version has been bumped from 17.0.2 to 18.2.0.

  • swcMinify 配置属性已从 false 更改为 true。请参阅 Next.js 编译器 了解更多信息。

    ¥The swcMinify configuration property was changed from false to true. See Next.js Compiler for more info.

  • next/image 导入已重命名为 next/legacy/image。next/future/image 导入已重命名为 next/image。代码模式可用 可以安全、自动地重命名你的导入。

    ¥The next/image import was renamed to next/legacy/image. The next/future/image import was renamed to next/image. A codemod is available to safely and automatically rename your imports.

  • next/link 子级不能再是 <a>。添加 legacyBehavior 属性以使用旧行为或删除 <a> 进行升级。代码模式可用 自动升级你的代码。

    ¥The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.

  • target 配置属性已被删除并由 输出文件跟踪 取代。

    ¥The target configuration property has been removed and superseded by Output File Tracing.

迁移共享功能​

¥Migrating shared features

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

¥Next.js 13 introduces a new app directory with new features and conventions. However, upgrading to Next.js 13 does not require using the new app directory.

你可以继续使用 pages 以及在两个目录中均有效的新功能，例如更新的 图片组件、链接组件、脚本组件 和 字体优化。

¥You can continue using pages with new features that work in both directories, such as the updated Image component, Link component, Script component, and Font optimization.

<Image/> 组件​

¥<Image/> Component

Next.js 12 通过临时导入对图片组件进行了许多改进：next/future/image。这些改进包括更少的客户端 JavaScript、更简单的扩展和样式图片方法、更好的可访问性以及原生浏览器延迟加载。

¥Next.js 12 introduced many improvements to the Image Component with a temporary import: next/future/image. These improvements included less client-side JavaScript, easier ways to extend and style images, better accessibility, and native browser lazy loading.

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

¥Starting in Next.js 13, this new behavior is now the default for next/image.

有两个代码模块可以帮助你迁移到新的图片组件：

¥There are two codemods to help you migrate to the new Image Component:

  • next-image-to-legacy-image：此 codemod 会安全且自动地将 next/image 导入重命名为 next/legacy/image，以保持与 Next.js 12 相同的行为。我们建议运行此 codemod 以自动快速更新到 Next.js 13。

    ¥next-image-to-legacy-image: This codemod will safely and automatically rename next/image imports to next/legacy/image to maintain the same behavior as Next.js 12. We recommend running this codemod to quickly update to Next.js 13 automatically.

  • next-image-experimental：运行之前的 codemod 后，你可以选择运行此实验性 codemod 将 next/legacy/image 升级到新的 next/image，这将删除未使用的 props 并添加内联样式。请注意，此 codemod 是实验性的，仅涵盖静态用法（例如 <Image src={img} layout="responsive" />），但不涵盖动态用法（例如 <Image {...props} />）。

    ¥next-image-experimental: After running the previous codemod, you can optionally run this experimental codemod to upgrade next/legacy/image to the new next/image, which will remove unused props and add inline styles. Please note this codemod is experimental and only covers static usage (such as <Image src={img} layout="responsive" />) but not dynamic usage (such as <Image {...props} />).

或者，你可以按照 迁移指南 手动更新，也可以查看 旧版比较。

¥Alternatively, you can manually update by following the migration guide and also see the legacy comparison.

¥<Link> Component

<Link> 组件 不再需要手动添加 <a> 标签作为子标签。此行为是在 版本 12.2 中作为实验选项添加的，现在是默认行为。在 Next.js 13 中，<Link> 始终渲染 <a> 并允许你将 props 转发到底层标签。

¥The <Link> Component no longer requires manually adding an <a> tag as a child. This behavior was added as an experimental option in version 12.2 and is now the default. In Next.js 13, <Link> always renders <a> and allows you to forward props to the underlying tag.

例如：

¥For example:

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 代码模式。

¥To upgrade your links to Next.js 13, you can use the new-link codemod.

<Script> 组件​

¥<Script> Component

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

¥The behavior of next/script has been updated to support both pages and app. If incrementally adopting app, read the upgrade guide.

字体优化​

¥Font Optimization

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

¥Previously, Next.js helped you optimize fonts by inlining font CSS. Version 13 introduces the new next/font module which gives you the ability to customize your font loading experience while still ensuring great performance and privacy.

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

¥See Optimizing Fonts to learn how to use next/font.