跳到内容
返回博客

2022年2月17日 星期四

Next.js 12.1

发布者
Balázs Orbán
Balázs Orbán@balazsorban44
DongYoon Kang
DongYoon Kang@kdy1dev
Gerald Monaco
Gerald Monaco@devknoll
Javi Velasco
Javi Velasco@javivelasco
Jiachi Liu
Jiachi Liu@huozhi
JJ Kasper
JJ Kasper@_ijjk
Joe Haddad
Joe Haddad@timer150
Kara Erickson
Kara Erickson@karaforthewin
Maia Teegarden
Maia Teegarden@padmaia
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens
Tobias Koppers
Tobias Koppers@wSokra

我们很高兴发布 Next.js 12.1 中最受期待的功能之一

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

按需增量静态生成 (Beta)

Next.js 现在公开了一个函数 `unstable_revalidate()`，允许您重新验证使用 `getStaticProps` 的单个页面。这是自我们在 Next.js 9.5 中引入 增量静态生成 (ISR) 以来，我们最受请求的功能之一。

自 ISR 发布以来，我们看到 Tripadvisor、Parachute、HashiCorp 等公司大幅缩短了构建时间，同时保持了令人难以置信的性能。然而，我们听取了您关于基于时间间隔的重新验证的反馈，并很高兴提供更大的灵活性。

目前，如果您将 `revalidate` 时间设置为 `60`，所有访问者将在一分钟内看到您网站的相同生成版本。使缓存失效的唯一方法是有人在一分钟后访问该页面。您现在可以按需手动清除特定页面的 Next.js 缓存。

这使得在以下情况下更新您的网站变得更加容易

  • 无头 CMS 的内容已创建或更新
  • 电子商务元数据更改（价格、描述、类别、评论等）
pages/api/revalidate.js
export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }
 
  try {
    await res.unstable_revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating');
  }
}

在 `getStaticProps` 内部，您无需指定 `revalidate` 即可使用按需重新验证。如果省略 `revalidate`，Next.js 将使用默认值 `false`（不重新验证），并且仅在调用 `unstable_revalidate()` 时按需重新验证页面。

增量静态生成适用于任何支持 Next.js 构建 API（`next build`）的提供商。从今天开始，部署到 Vercel 时，按需重新验证在将页面推送到边缘时，将在约 300 毫秒内全局传播。

查看我们的演示，了解按需重新验证的实际效果并提供反馈。Svix（企业级 webhook）和 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 示例 开始使用。

使用 SWC 实现更快压缩

Next.js 12 引入了使用 SWC 作为 Next.js 编译器一部分的压缩功能。早期结果显示，它比 Terser 快 7 倍。 使用 SWC 的压缩功能现在在 12.1 版本中达到了发布候选 (RC) 阶段，并将成为 12.2 版本的默认设置。

您可以在 `next.config.js` 中选择使用 SWC 进行压缩

next.config.js
module.exports = {
  swcMinify: true,
};

请在讨论区中告诉我们您的反馈。

更快的图片优化

内置的图像优化 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 Runtime，这样您就可以在准备好时逐步将页面从 Node.js 迁移。

我们将很快发布另一篇文章，深入探讨 Edge Runtime。我们的两个演示（next-server-components 和 next-rsc-demo) 都已更新到最新更改。

其他错误修复和改进

Next.js 开发者调查

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

本次调查分为两部分：一个包含八个问题的快速调查和一个深入探讨单个功能反馈的扩展调查。如果您有时间，我们非常希望您能填写这两个部分，但如果没有时间，请随时在第一部分之后提交您的答案。

您的答案将完全匿名，但如果您愿意，可以选择与我们分享您的应用程序 URL。

感谢您帮助我们改进 Next.js！

感谢贡献者

Next.js 是 超过 2,000 名独立开发者、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。