Next.js 12.3 版本发布 | Next.js

我们在 Next.js 12.3 中带来了一系列提升开发体验的改进：

增强的 Fast Refresh：.env、jsconfig.json 和 tsconfig.json 文件现在支持热重载
TypeScript 自动安装：添加 .ts 文件时自动配置 TypeScript 并安装依赖
Image 组件：next/future/image 现已稳定
SWC 压缩器：使用 Next.js 编译器进行代码压缩的功能现已稳定
新路由系统 + 布局更新：已开始实施并解释新特性

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

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

Next.js 大会

诚邀您参加 10 月 25 日的全球 Next.js 社区大会。为庆祝 Next.js 六周年，我们将发布：

利用 React 服务端组件 (Server Components)、流式渲染 (Streaming) 和 Suspense 的新特性
让开发者更易优化和扩展应用的约定规范
加速本地开发和生产构建的开源工具

领取免费门票了解 Next.js 和 React 的未来发展，关注 @nextjs 获取最新公告。我们同时征集社区演讲提案。提交演讲主题分享您使用 Next.js 构建项目的故事。

TypeScript 自动安装

Next.js 内置了自动配置 TypeScript 的支持。此前在现有项目中添加 TypeScript 需要手动安装必要依赖。

本次更新后，当检测到项目中添加了 TypeScript 文件时，Next.js 会自动安装必要依赖并创建 tsconfig.json 文件。该功能在运行 next dev 和 next build 时均会生效。

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

增强的 Fast Refresh

快速迭代对本地开发工作流至关重要。Next.js 使用 Fast Refresh 实现 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 属性以提升可访问性
修复了水合前发生错误时 onError 属性的问题
修复了静态导入图片仅设置 width 或 height 属性时的宽高比问题
改进了使用不当设置或配置时的错误提示

未来我们计划将 next/image 重命名为 next/legacy/image，并将 next/future/image 重命名为 next/image。这将为新项目提供更好的体验，现有项目可通过我们的 next/image 代码迁移工具轻松升级。我们将在下一个主要版本前提供更多细节。

当前使用方式请参考包含迁移指南的文档。

远程匹配模式（稳定版）

remotePatterns 允许在使用内置图片优化 API 时指定远程图片的通配符。相比仅支持域名精确匹配的现有 images.domains 配置，它能实现更强大的匹配功能。

该选项现已稳定，可通过以下配置使用：

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        // `src` 属性的主机名必须以 `.example.com` 结尾
        // 否则 API 将返回 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,
  },
};

新路由系统与布局更新

今年早些时候，我们发布了布局系统 RFC，这是 Next.js 自 2016 年发布以来最大规模的更新。这些变更包括基于 React 服务端组件构建的新路由系统。实现工作已经开始，我们正朝着下一个主要版本的公开测试版迈进。

今天我们分享更多即将推出的功能：

路由分组：用于将路由排除在布局外，且不影响 URL 路径地组织路由
即时加载状态：通过 Suspense 构建的新文件约定，轻松添加加载 UI
错误处理：新文件约定便于添加嵌套错误边界和错误 UI
模板：新文件约定用于添加创建独立实例且不共享状态的共享 UI
拦截路由、并行路由和条件路由：支持实现高级路由模式的新约定

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

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

其他改进

新增关于 Next.js 内置可访问性特性的文档
create-next-app 模板现在默认包含根据系统偏好自动切换的深色模式支持
使用集成 ESLint 支持时，src/ 目录现在默认作为 lint 检查目录
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。