Next.js 12.3 | Next.js 框架

我们为 Next.js 12.3 发布了一些提升生活品质的改进

改进的快速刷新： .env、jsconfig.json 和 tsconfig.json 文件现在支持热重载。
TypeScript 自动安装： 添加 .ts 文件即可自动配置 TypeScript 并安装依赖项。
Image 组件： next/future/image 现在已稳定。
SWC Minifier： 使用 Next.js 编译器进行代码压缩现在已稳定。
新路由 + 布局更新： 实施工作已经开始，并解释了新功能。

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

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

Next.js Conf

诚邀您参加 10 月 25 日举行的全球 Next.js 社区大会。在 Next.js 六周年之际，我们将介绍

利用 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 文件。

Image 组件

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

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

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

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

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

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

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

远程模式（稳定版）

remotePatterns 允许您在使用内置 Image Optimization 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',
      },
    ],
  },
};

Image Optimization API 需要服务器按需优化请求的图像。当使用 next start 进行自托管或部署到 Vercel 等平台时，这非常有效。但是，这不适用于 next export，因为它不包含用于优化图像的服务器。以前，您需要使用 loader 属性配置第三方 Image Optimization 提供商，但现在您可以完全禁用 next.config.js 中 next/image 的所有实例的 Image Optimization。

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

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 设置为默认值。

新路由和布局更新

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

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

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

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

在 Layouts 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 和 @zanechua。