Next.js 12.3 | Next.js 框架

未来，我们计划将 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/image 实例的 next.config.js 中进行配置。

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

next.config.js

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

SWC Minifier（稳定版）

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

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

next.config.js

module.exports = {
  swcMinify: true,
};

我们计划在下一个主要版本中将 SWC minifier 设置为默认值。

新的路由和布局更新

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

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

路由组：用于使路由退出布局，并在不影响 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 为浏览器 polyfill 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, and @zanechua。