跳至内容
返回博客

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 进行更新。

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

Next.js 大会

我们诚挚邀请您参加 10 月 25 日举行的全球 Next.js 社区大会。为庆祝 Next.js 六周年，我们将推出

  • 利用 React 服务器组件、流和 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中，我们分享了一个新的Image组件的实验性预览，该组件简化了图像样式设置，并通过使用原生浏览器延迟加载来提高性能。

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

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

  • 添加了对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代码模块轻松迁移。我们将在下一个主要版本发布之前提供更多详细信息。

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

远程模式（稳定版）

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.config.js完全禁用所有next/image实例的图像优化。

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

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，其中介绍了自 2016 年发布以来 Next.js 的最大更新。这些更改包括一个构建在 React 服务器组件之上的新路由器。实施工作已经开始，我们正在努力在下一个主要版本中发布公开测试版。

今天，我们分享了有关即将推出的功能的更多信息，包括：

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

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

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

其他改进

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

社区

Next.js 是 **超过 2000 位开发人员**、谷歌 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。