跳至内容
返回博客

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。

按需增量静态再生（测试版）

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。如果您希望看到其他插件，请在讨论中告诉我们。此外，我们正在开发一个高性能 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,
};

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

更快的图像优化 ISR 页面相同的模式，在该模式下，图像以过时的形式提供服务，并在后台进行_重新验证_（也称为 stale-while-revalidate）。

这是对优化图像的重大性能改进。请参阅图像缓存行为了解更多信息。

自托管 Next.js 改进
next.config.js
module.exports = {
  experimental: {
    outputStandalone: true,
  },
};

这将在 .next/standalone 中创建一个文件夹，然后可以单独部署该文件夹，而无需安装 node_modules。

查看文档或从Docker 示例开始。我们现在还有一个多环境 Docker 示例，它支持根据环境加载不同的 .env 文件。

React 18、服务器组件和 SSR 流式传输（Alpha 版） Next.js 大会上展示的那样，我们一直在努力将 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> 不再警告使用 ESLint 的 next/link。
  • .d.ts 文件不再被视为页面。
  • 在向屏幕阅读器宣布页面更改时，document.title 现在优先于 h1。
  • 现在可以创建 pages/index/[...dynamic].js，这在以前是不可能的，因为 index 是保留关键字。
  • 当使用 dynamic(() => import('./some-component'), { ssr: false }) 时，导入将自动从服务器代码中摇树。
  • 为了创建更小的安装大小并提高安全性，我们正在努力预编译更多依赖项。最新添加的是 node-fetch。
  • 使用中间件时，快速刷新的改进。
  • 我们内置的 ESLint 集成支持 ESLint 8。
  • styled-jsx 已升级到 5.0，包括针对所有 styled-jsx 编译错误的新增有用错误链接。
  • Edge Runtime：支持 AbortController 和 AbortSignal
  • Edge Runtime：添加了 CryptoKey 和 globalThis.CryptoKey。
  • 大型 Next.js 应用程序在最近的改进（重新加载了 1,000 多个模块）后，快速刷新时间缩短了约 60%。
  • 如果快速刷新失败并导致整页重新加载，现在会显示通知。
  • 当使用 React 18 严格模式时，宣布的路由现在可以正确跳过宣布初始页面加载。
  • 与 2021 年 12 月相比，我们已将未解决问题的数量减少了近 300 个（已解决近 1000 个问题）。

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。