跳到内容
返回博客

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
刘嘉麒@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，则所有访问者将在 1 分钟内看到您网站的相同生成版本。 使缓存失效的唯一方法是在一分钟过后有人访问该页面。 现在，您可以按需手动清除特定页面的 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（企业级 Webhook）和 Clerk（身份验证）也创建了一个按需 ISR 的演示。

改进的 SWC 支持

我们希望让每个 Next.js 应用程序在生产环境中构建得更快，并在本地开发中获得即时反馈。 Next.js 12 引入了一个新的基于 Rust 的编译器，它利用了原生编译的优势。

在 12.1 版本中，我们为 Next.js 编译器添加了对以下内容的支持

通过添加上述六种转换，我们现在已经使用新编译器将最常用的 Babel 插件移植到 Rust。 如果您希望看到其他插件，请在讨论区上告诉我们。 此外，我们正在开发一个用于高性能 WebAssembly 插件的系统，该系统通过 SWC 启用。

零配置 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) 已更新至最新版本。

其他错误修复和改进

  • 使用带有 target="blank" 的 <a> 标签不再警告需要使用 next/link 和 ESLint。
  • `.d.ts` 文件不再被视为页面 (Pages)。
  • 当向屏幕阅读器播报页面更改时，document.title 现在优先于 h1。
  • 现在可以创建 pages/index/[...dynamic].js，这在以前由于 index 是保留关键字而无法实现。
  • 当使用 dynamic(() => import('./some-component'), { ssr: false }) 时，该导入将自动从服务器代码中进行 tree-shaking。
  • 为了减小安装包体积并提高安全性，我们正在努力预编译更多依赖项。 最新添加的是 node-fetch。
  • 使用中间件 (Middleware) 时，快速刷新 (Fast Refresh) 得到改进。
  • 支持 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 月相比（已解决近 1000 个问题），我们在 Next.js 仓库上减少了近 300 个未解决问题。

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。