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

我们很高兴在 Next.js 12.1 中发布用户最期待的功能：

按需增量静态再生 (Beta): 即时重新验证使用 getStaticProps 的页面
扩展的 SWC 支持: 新增对 styled-components、Relay 等的支持
next/jest 插件: 通过 SWC 实现零配置 Jest 支持
SWC 极速代码压缩 (RC): 比 Terser 快 7 倍的压缩速度
自托管优化: Docker 镜像体积缩小约 80%
React 18 & 服务端组件 (Alpha): 稳定性和支持度提升
开发者调查: 通过您的反馈帮助我们改进 Next.js

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

按需增量静态再生 (Beta)

Next.js 现在提供了 unstable_revalidate() 函数，允许您重新验证使用 getStaticProps 的单个页面。这是自我们在 Next.js 9.5 中引入增量静态再生 (ISR) 以来最受期待的功能。

自 ISR 发布以来，我们看到 Tripadvisor、Parachute、HashiCorp 等公司显著缩短了构建时间，同时保持了卓越的性能。现在，我们根据用户反馈提供了更灵活的按需缓存清除方案。

此前，如果您设置了 60 秒的 revalidate 时间，所有访问者在一分钟内看到的都是相同的静态页面版本。只有当超时后有人访问该页面时，缓存才会失效。现在您可以手动按需清除特定页面的 Next.js 缓存。

这使得在以下场景中更新站点更加便捷：

无头 CMS 内容创建或更新时
电商元数据变更（价格、描述、分类、评论等）

pages/api/revalidate.js

export default async function handler(req, res) {
  // 检查密钥以确认请求有效性
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: '无效令牌' });
  }
 
  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // 出现错误时，Next.js 会继续显示
    // 上次成功生成的页面
    return res.status(500).send('重新验证时出错');
  }
}

在 getStaticProps 中，使用按需重新验证时无需指定 revalidate。如果省略 revalidate，Next.js 将使用默认值 false（不重新验证），只有在调用 unstable_revalidate() 时才会按需重新验证页面。

增量静态再生适用于所有支持 Next.js 构建 API (next build) 的提供商。在 Vercel 上部署时，按需重新验证可在约 300 毫秒内全局传播。

查看演示体验按需重新验证功能并提交反馈。Svix（企业级 Webhooks）和 Clerk（身份验证）也创建了演示展示按需 ISR。

增强的 SWC 支持

我们致力于让每个 Next.js 应用的生产构建更快，并在本地开发中获得即时反馈。Next.js 12 引入了利用原生编译的基于 Rust 的新编译器。

在 12.1 版本中，我们为 Next.js 编译器新增了对以下功能的支持：

新增这六项转换后，我们已将最常见的 Babel 插件通过新编译器移植到 Rust。如果您希望支持其他插件，请在讨论区告诉我们。此外，我们正在开发通过 SWC 实现的高性能 WebAssembly 插件系统。

零配置 Jest 插件

Next.js 现在通过基于 Rust 的 Next.js 编译器自动配置 Jest (next/jest)，包括：

自动模拟样式表 (.css、.module.css 及其 .scss 变体) 和图片导入
将 .env (及其所有变体) 加载到 process.env
从测试解析和转换中忽略 node_modules
从测试解析中忽略 .next
加载 next.config.js 以启用 Next.js 编译器转换的标志

查阅文档了解更多，或从我们的 Jest 示例开始使用。

更快的图片优化

内置图片优化 API 已更新，支持与 ISR 页面相同的模式，即先返回缓存的图片并在后台重新验证（也称为 stale-while-revalidate）。

这是图片优化性能的重大改进。详见图片缓存行为。

自托管 Next.js 优化

Next.js 现在可以自动创建 standalone 文件夹，仅复制生产部署所需的文件。这使得自托管 Next.js 应用的 Docker 镜像体积缩小了约 80%。

要启用此功能，请在 next.config.js 中配置：

next.config.js

module.exports = {
  experimental: {
    outputStandalone: true,
  },
};

这将在 .next/standalone 创建文件夹，无需安装 node_modules 即可独立部署。

查阅文档或从 Docker 示例开始使用。我们还新增了支持根据不同环境加载 .env 文件的多环境 Docker 示例。

React 18、服务端组件和 SSR 流式渲染 (Alpha)

如 Next.js Conf 所示，我们一直在努力将 React 18、服务端 Suspense、流式 SSR 和服务端组件引入 Next.js。

服务端组件是 React 的新特性，通过分离服务端和客户端代码来减少 JavaScript 包体积。开发者可以构建跨越服务端和客户端的应用，结合客户端应用的丰富交互性和传统服务端渲染的卓越性能。

对于关注 Next.js 中服务端组件从 Alpha 到 Beta 进展的开发者，以下是近期更新：

我们正在努力让您能在 Edge 运行时中完全服务端渲染整个 Next.js 应用。您可以选择哪些页面应使用 Edge 运行时，从而逐步从 Node.js 迁移页面。

我们将很快发布另一篇关于 Edge 运行时的深入文章。我们的两个演示项目 (next-server-components 和 next-rsc-demo) 都已更新至最新变更。

其他错误修复和改进

使用 <a> 和 target="blank" 时不再警告需要使用 next/link 的 ESLint 规则
.d.ts 文件不再被视为页面
向屏幕阅读器宣布页面变更时，document.title 现在优先于 h1
现在可以创建 pages/index/[...dynamic].js，此前因 index 是保留关键字而无法实现
使用 dynamic(() => import('./some-component'), { ssr: false }) 时，导入的组件会自动从服务端代码中树摇移除
为减小安装体积并提升安全性，我们正在预编译更多依赖项，最新添加的是 node-fetch
使用中间件时的快速刷新改进
支持 ESLint 8 与我们的内置 ESLint 集成
styled-jsx 升级至 5.0，为所有编译错误新增了有用的错误链接
Edge 运行时：支持 AbortController 和 AbortSignal
Edge 运行时：新增 CryptoKey 和 globalThis.CryptoKey
大型 Next.js 应用的快速刷新时间提升了约 60%（超过 1,000 个模块重新加载）
快速刷新失败导致完整页面重载时现在会显示通知
使用 React 18 严格模式时，现在能正确跳过初始页面加载的公告
自 2021 年 12 月以来，我们已解决近 300 个 Next.js 仓库中的问题（共解决近 1000 个问题）

Next.js 开发者调查

通过我们的首次开发者调查分享反馈，帮助我们改进 Next.js。

本次调查包含两部分：8 个问题的快速调查和针对各功能反馈的扩展调查。如果您有时间，我们希望能填写两部分内容，但也可以只提交第一部分的结果。

您的回答将完全匿名，但您可以选择与我们分享应用 URL。

感谢您帮助改进 Next.js！

致谢贡献者

Next.js 是 2000 多位独立开发者、Google 和 Facebook 等行业合作伙伴以及我们核心团队共同努力的成果。

为降低贡献门槛，我们已将 Next.js 仓库迁移至 Turborepo 以提升构建性能。我们还新增了测试脚手架和错误链接，方便您开始编写测试。最后，我们录制了40 分钟入门视频展示如何为 Next.js 做贡献。

本版本由以下贡献者共同打造：@MaedahBatool, @mutebg, @sokra, @huozhi, @hanford, @shuding, @sean6bucks, @jameshfisher, @devknoll, @yuta-ike, @zh-lx, @amandeepmittal, @alunyov, @stefanprobst, @leerob, @balazsorban44, @kdy1, @brittanyrw, @jord1e, @kara, @vvo, @ismaelrumzan, @dlindenkreuz, @MohammadxAli, @nguyenyou, @thibautsabot, @hanneslund, @vertti, @KateKate, @stefee, @mikinovation, @Leticijak, @mohsen1, @ncphillips, @ehowey, @lancechentw, @krychaxp, @fmacherey, @pklawansky, @RyanClementsHax, @lakbychance, @sannajammeh, @oliviertassinari, @alexander-akait, @u-yas, @Cheprer, @msp5382, @chrispat, @getspooky, @Ryz0nd, @klaasman, @midgleyc, @kumard3, @jesstelford, @neeraj3029, @glenngijsberts, @pie6k, @wouterraateland, @timneutkens, @11koukou, @thesyedbasim, @aeneasr, @ijjk, @lfades, @JuniorTour, @xavhan, @mattyocode, @padmaia, @Skn0tt, @gwer, @Nutlope, @styfle, @stipsan, @xhoantran, @eolme, @sespinosa, @zenorocha, @hjaber, @benmvp, @T-O-R-U-S, @dburrows, @atcastle, @kiriny, @molebox, @Vienio99, @kyliau, @PepijnSenders, @krystofex, @PizzaPete, @souljuse, @Schniz, @Nelsonfrank, @Mhmdrza, @hideokamoto-stripe, @Emrin, @gr-qft, @delbaoliveira, @redbar0n, @lxy-yz, @Divlo, @kachkaev, @teleaziz, @OgbeniHMMD, @goncy, @bennettdams, @hsynlms, @callumgare, @jonrosner, @karaggeorge, @rpie3, @MartijnHols, @bashunaimiroy, @NOCELL, @rishabhpoddar, @omariosouto, @theMosaad, @javivelasco, @pierrenel, @lobsterkatie, @tharakabimal, @saevarb, @nbouvrette, @paulnbrd, @ecklf, @renbaoshuo, @chozzz, @tbezman, @karlhorky, @j-mendez, @ffan0811, @arthurfiorette, @chimit, @joperron, @moh12594, @rasmusjp, @bryanrsmith, @TrySound, @josharsh, @thecrypticace, @arturparkhisenko, @segheysens, @thevinter, @AryanBeezadhur, @xiaohp, @tknickman, @oriolcp, @smakosh, @jorrit, @mix3d, @Clecio013, @michielvangendt, @intergalacticspacehighway, @jbraithwaite, @marcelocarmona, @benmerckx, @haykerman, @steven-tey, @jaredpalmer, @pi-guy-in-the-sky, @JuanM04, @apollisa, @D-Pagey, @Kikobeats, @ramosbugs, @dan-weaver, @chris-stytch, @MikevPeeren, @janpio, @emw3, @nubpro, @cmdcolin, @joostdecock, @sgallese, @housseindjirdeh, @minervabot, @cjboco, @Ryuurock, @dm430, @mkarkachov, @nvh95, @gfortaine, @zifeo, @vicente-s, @Rohithgilla12, @brookton, @skirsten, @davidfateh, @DavidBabel, @mannybecerra, @pveyes, @kaykdm, @xhiroga, @mzaien, @losfair, @ykzts, @knezevicdev, @yang-feng-yfeng, @xuchaobei, @elkevinwolf, @fabienheureux, @nilskaspersson, @Andarist, @mathcrln, @dferber90, @FranciscoMoretti, @benschwarz, @wendellhu95, @gazdagergo, @imabp, @ljosberinn, @samuliasmala, @ka2jun8, @monsonjeremy, @pqt, @leoortizz, @michel-kraemer, @ntkoopman, @iicdii, @chentsulin, @ericmatthys, @lennym, @balogunkeji, @wnr, @chemicalkosek, @KittyGiraudel, @OKinane, @KonstHardy, @BrandonRomano, @furcan, @dusanralic, @elliottsj, @hi-ogawa, @panva, @genetschneider, @thundermiracle, @stefano-rainieri, @ericbiewener, @vordgi, @stevejarvis, @ihmpavel, @matamatanot, @dyarfaradj, @iheyunfei, @ascorbic, @fytriht, @emzoumpo, @onurtemiz, @a-ursino, @mxschmitt, @bywo, @OArnarsson, @TurekBot, @gish, @vadymshymko, @kamsar, @skhaz, @Prashoon123, @IrisvanOllefen, @evan-bradley, @ntltd, @EzequielDM, @oBusk, @martpie, @BruceRodrigues, @luke-h1, @lucasvazq, @velocity23, @AkiraTsuboi, @mitheelgajare, @JamiesWhiteShirt, @leroydev, @JulienZD, @leotaku, @mattfwood 和 @kripod。