跳到内容
返回博客

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 Build 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 示例开始。

使用 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 示例开始。我们现在还有一个多环境 Docker 示例，支持根据环境加载不同的 .env 文件。

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) 已使用最新更改进行了更新。

其他错误修复和改进

  • 将 <a> 与 target="blank" 一起使用不再警告使用带有 ESLint 的 next/link。
  • .d.ts 文件不再被视为页面。
  • 当向屏幕阅读器播报页面更改时，document.title 现在优先于 h1。
  • 创建 pages/index/[...dynamic].js 现在可以正常工作，这在以前由于 index 是保留关键字而无法实现。
  • 当使用 dynamic(() => import('./some-component'), { ssr: false }) 时，导入将自动从服务器代码中进行 tree-shaking。
  • 为了创建更小的安装尺寸并提高安全性，我们正在努力预编译更多依赖项。最新的添加是 node-fetch。
  • 改进了使用中间件时的快速刷新。
  • 支持将 ESLint 8 与我们的内置 ESLint 集成一起使用。
  • styled-jsx 已升级到 5.0，包括所有 styled-jsx 编译错误的新帮助错误链接。
  • Edge Runtime：支持 AbortController 和 AbortSignal
  • Edge Runtime：添加了 CryptoKey 和 globalThis.CryptoKey。
  • 大型 Next.js 应用程序在最近的改进中，Fast Refresh 时间缩短了约 60%（重新加载超过 1,000 个模块）。
  • 现在，如果 Fast Refresh 失败并导致整页重新加载，则会显示通知。
  • 现在，当使用 React 18 严格模式时，已声明的路由可以正确跳过声明初始页面加载。
  • 与 2021 年 12 月相比，我们已将 Next.js 仓库中未解决问题的数量减少了近 300 个（已解决近 1000 个问题）。

Next.js 开发者调查

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

本次调查分为两个部分：一个包含八个问题的快速调查，以及一个深入了解各个功能反馈的扩展调查。如果您有时间，我们非常希望您能填写两个部分，如果时间不允许，您也可以在完成第一部分后提交答案。

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

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

感谢贡献者

Next.js 是超过 2,000 名个人开发者、谷歌和 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, and @kripod。