跳到内容
返回博客

2022年9月8日，星期四

Next.js 12.3

发布者
Balázs Orbán
Balázs Orbán@balazsorban44
DongYoon Kang
DongYoon Kang@kdy1dev
Jiachi Liu
Jiachi Liu@huozhi
JJ Kasper
JJ Kasper@_ijjk
Maia Teegarden
Maia Teegarden@padmaia
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens

我们已在 Next.js 12.3 中带来了一些生活质量改进

立即运行 npm i next@latest 进行更新。

宣布第三届全球 Next.js 社区大会将于 10 月 25 日举行。立即注册 →

Next.js Conf

您受邀参加将于 10 月 25 日举行的全球 Next.js 社区大会。为庆祝 Next.js 诞生 6 周年，我们将推出

  • 利用 React Server Components、Streaming 和 Suspense 的功能。
  • 让开发者更容易优化和扩展应用的约定。
  • 开源工具，让本地开发和生产构建更快。

领取您的免费门票，了解 Next.js 和 React 的未来，并关注 @nextjs 以获取更多即将发布的公告。我们也在征集社区演讲。提交演讲提案并分享您使用 Next.js 构建项目的故事。

TypeScript 自动安装

Next.js 内置支持自动配置 TypeScript。以前，将 TypeScript 添加到现有项目需要手动安装必要的依赖项。

在此版本中，Next.js 会在项目添加 TypeScript 文件时自动检测，安装必要的依赖项，并添加一个 tsconfig.json 文件。这在运行 next dev 和 next build 时均有效。

视频展示 Next.js 自动安装 TypeScript。

改进的快速刷新

快速迭代对于您的本地开发工作流程至关重要。Next.js 使用 快速刷新 来即时反馈对 React 组件的编辑。保存后，无需重新加载页面即可在浏览器中看到您的更改。

使用 Next.js 12.3，现在一些配置文件在编辑时也会热重载，包括：

  • .env 和 env.* 变体
  • jsconfig.json
  • tsconfig.json

现在，当您修改这些配置文件时，无需重新启动本地开发服务器。

视频演示 Next.js 热重载 .env 文件。

图像组件

next/future/image 组件（稳定版）

在Next.js 12.2中，我们发布了一个新的图像组件的实验性预览，它通过使用原生浏览器延迟加载来简化图像样式并提高性能。

新的图像组件现在已稳定，不再需要实验性标志。

自上次发布以来，我们又进行了进一步改进

  • 增加了对 fill 布局模式的支持，使图像填充父元素。
  • 改进了模糊占位符，使其适用于透明图像，不再需要 <noscript>，并且 next dev 与 next start 匹配。
  • 通过在图像加载时隐藏 alt 文本，防止了细微的布局偏移（Chrome 以外的浏览器）。
  • 为了更好的可访问性，要求提供 alt 属性。
  • 修复了水合作用前发生错误时 onError 属性的问题。
  • 修复了仅包含 width 或仅包含 height 属性的静态导入图像的宽高比。
  • 改进了使用不当设置或配置时的错误消息。

将来，我们计划将 next/image 重命名为 next/legacy/image，并将 next/future/image 重命名为 next/image。这将为新的 Next.js 项目提供出色的体验，现有项目将能够使用我们的 next/image codemod 轻松迁移。我们将在下一个主要版本发布前提供更多详细信息。

有关今天如何使用它的更多信息，请参阅包含迁移指南的文档。

远程模式（稳定版）

remotePatterns 允许您在使用内置图像优化 API 时为远程图像指定通配符。它允许比现有 images.domains 配置更强大的匹配，后者只对域名执行精确匹配。

此选项现在已稳定，可与以下配置选项一起使用

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        // The `src` property hostname must end with `.example.com`,
        // otherwise the API will respond with 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

禁用图像优化（稳定版）

图像优化 API 需要一个服务器来根据请求动态优化图像。这在使用 next start 自托管或部署到 Vercel 等平台时效果很好。然而，这不适用于 next export，因为它不包含用于优化图像的服务器。以前，您需要使用 loader 属性配置第三方图像优化提供程序，但现在您可以为所有 next/image 实例使用 next.config.js 完全禁用图像优化。

此先前实验性的选项现在已稳定，可与以下配置选项一起使用

next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

SWC 压缩器（稳定版）

在 Next.js 12 中，我们引入了使用 SWC 进行代码压缩，作为 Next.js 编译器 实验性功能的一部分。早期结果表明，SWC 的压缩速度比之前使用 Terser 的版本 快 7 倍。

此版本中，该功能已稳定，您可以使用以下 next.config.js 选项启用它

next.config.js
module.exports = {
  swcMinify: true,
};

我们计划在下一个主要版本中将 SWC 压缩器设为默认。

新路由和布局更新

今年早些时候，我们发布了布局 RFC，其中介绍了 Next.js 自 2016 年发布以来最大的更新。这些更改包括基于 React Server Components 构建的新路由。实现工作已经开始，我们正在努力在下一个主要版本中发布公开测试版。

今天，我们正在分享更多关于即将推出的功能的信息，包括

  • 路由组：用于将路由排除在布局之外，并组织路由而不影响 URL 路径。
  • 即时加载状态：新的文件约定，用于轻松添加加载 UI，使用 Suspense 构建。
  • 错误处理：新的文件约定，用于轻松添加嵌套错误边界和错误 UI。
  • 模板：新的文件约定，用于添加共享 UI，该 UI 创建不同的实例且不共享状态。
  • 拦截路由、并行路由和条件路由：允许您实现高级路由模式的新约定。

此外，在另一份 RFC中，我们正在探索在新的 app 目录中添加对 全局 CSS 导入 的支持。这将允许您使用导入自己的 .css 文件的包，而无需额外配置。

在 布局 RFC 中阅读有关这些新功能的更多信息。

其他改进

  • 关于 Next.js 内置可访问性功能的新文档。
  • create-next-app 模板现在会自动根据您的系统偏好包含暗模式支持。
  • 使用集成 ESLint 支持时，src/ 现在是默认的 linting 目录。
  • next.config.js 现在包含使用 ajv 进行的模式验证，有助于防止误用配置选项。
  • next.config.js 现在有一个实验性配置标志 fallbackNodePolyfills: false，以防止 Next.js 为浏览器填充 Node.js API（这会导致捆绑包大小增加）。此选项将导致 Next.js 显示构建时错误，指示不必要的导入来源。

社区

Next.js 是由 **2,000 多名独立开发者**、Google Chrome 和 Meta 等行业合作伙伴以及我们 Vercel 核心团队共同努力的成果。

此版本由以下人员的贡献实现：@pthomas931, @madmed88, @sanjaiyan-dev, @balazsorban44, @DonghyukJacobJang, @chaiwattsw, @styfle, @dunglas, @ahkhanjani, @promer94, @terrierscript, @shawncal, @insik-han, @QuiiBz, @ykzts, @JoshuaKGoldberg, @lucasassisrosa, @dikwickley, @Brooooooklyn, @sicarius97, @FourwingsY, @manovotny, @SukkaW, @pepoeverton, @jdeniau, @sumiren, @anthonyshew, @pekarja5, @huozhi, @leerob, @fediev, @atcastle, @shuding, @feugy, @jonohewitt, @zakiego, @Schniz, @timneutkens, @wyattjoh, @MaedahBatool, @X7Becka, @nnnnoel, @dcdev67, @alvinometric, @timothympace, @jeferson-sb, @ijjk, @theMosaad, @Yuddomack, @msquitieri, @andreizanik, @nix6839, @thomasballinger, @ziishaned, @xyeres, @nyedidikeke, @maxproske, @sokra, @titusdmoore, @thebergamo, @fikrikarim, @Kikobeats, @clearlyTHUYDOAN, @nasso, @qutek, @kdy1, @kyliau, @housseindjirdeh, @barissayil, @seveibar, @Jessidhia, @santidalmasso, @JohnDaly, @Nikhilnama18, @mduleone, @colinhacks, @ductnn, @josh, @hiro0218, @eltociear, @kwonoj, @valcosmos, @mihaic195, @stefanprobst, @KATT, @thiagomorales, @danielcavanagh, @steven-tey, @hellomhc, @trevor-fauna, @nguyenyou, @eminvergil, @lobsterkatie, @dorian-davis, @sambecker, @isaac-martin, @lfades, @amorimr, @javivelasco, @mongolyy, @Thisen, @zorrolisto, @ethomson, @padmaia, @thisisjofrank, @dominiksipowicz, @awareness481, @pakaponk, @apledger, @longzheng, @tknickman, @rbrcsk, @emersonlaurentino, @carstenlebek, @edusig, @riccardogiorato, @hanneslund, @ryanhaticus, @j-mendez, @armandabric, @WinmezzZ, @andershagbard, @dammy001, @MarDi66, @okmttdhr, @rishabhpoddar, @marjorg, @dustinsgoodman, 和 @zanechua。