跳至内容
返回博客

2021年8月11日，星期三

Next.js 11.1

发布者
DongYoon Kang
DongYoon Kang@kdy1dev
Jiachi Liu
Jiachi Liu@huozhi
JJ Kasper
JJ Kasper@_ijjk
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 11.1 提升了整个栈的构建性能，其中包括

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

安全补丁

Next.js 团队与安全研究人员和审计员合作，以防止漏洞。我们感谢 Robinhood 的 Gabriel Benmergui 对 pages/_error.js 的开放重定向进行调查和发现，以及随后负责任的披露。

报告的问题没有直接危害用户，但它可能允许通过从受信任的域重定向到攻击者的域来进行网络钓鱼攻击。我们在 Next.js 11.1 中发布了一个补丁，以防止此开放重定向发生，以及 安全回归测试。

有关更多详细信息，请阅读 公开的 CVE。我们建议升级到最新版本的 Next.js，以提高应用程序的整体安全性。对于未来负责任的披露报告，请发送电子邮件至 [email protected]。

注意：托管在 Vercel 上的 Next.js 应用程序不受此漏洞的影响（因此，无需对在 Vercel 上运行的 Next.js 应用程序采取任何措施）。

ES 模块支持

我们正在 Next.js 中努力实现广泛的 ES 模块 支持，包括作为输入模块和作为输出目标。从 Next.js 11.1 开始，您现在可以使用实验性标志通过 ES 模块导入 npm 包（例如，其 package.json 中的 "type": "module"）。

next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true },
};

ES 模块支持包括向后兼容性，以支持之前 CommonJS 的导入行为。在 Next.js 12 中，esmExternals: true 将成为默认值。我们建议尝试新的选项并 在 GitHub 讨论中留下反馈，如果您有任何改进建议。

采用基于 Rust 的 SWC

我们正在集成 SWC，一个用 Rust 编写的超高速 JavaScript 和 TypeScript 编译器，它将取代 Next.js 中使用的两个工具链：Babel 用于单个文件，Terser 用于最小化输出包。

作为用 SWC 替换 Babel 的一部分，我们正在将 Next.js 使用的所有自定义代码转换移植到用 Rust 编写的 SWC 转换中，以最大限度地提高性能。例如，在 getStaticProps、getStaticPaths 和 getServerSideProps 中剔除未使用的代码。

作为用 SWC 替换 Terser 的一部分，我们正在努力确保 SWC 最小化器具有与 Terser 类似的输出，同时大幅提高最小化的性能和并行化。

在早期的测试中，以前使用 Babel 的代码转换从 ~500ms 降至 ~10ms，而使用 Terser 的代码最小化从 ~250ms 降至 ~30ms（使用 SWC）。总的来说，这使得构建速度提高了一倍。

我们很高兴地宣布 DongYoon Kang（SWC 的创建者）和 Maia Teegarden（Parcel 的贡献者）加入了 Vercel 的 Next.js 团队，致力于改进 next dev 和 next build 的性能。当 SWC 稳定并发布时，我们将分享更多关于 SWC 集成的结果。

性能改进

构建和数据获取

当使用 next build 并发出大量 HTTP 请求时，我们平均将性能提高了约 2 倍。例如，如果您使用 getStaticProps 和 getStaticPaths 从无头 CMS 获取内容，您应该会看到构建速度明显加快。

Next.js 自动为 node-fetch 提供 polyfill，并且现在默认启用 HTTP Keep-Alive。根据 外部基准测试，这应该会使预渲染速度提高约 2 倍。

要为某些 fetch() 调用禁用 HTTP Keep-Alive，您可以添加 agent 选项

import { Agent } from 'https';
const url = '<https://example.com>';
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

要全局覆盖所有 fetch() 调用，您可以使用 next.config.js

next.config.js
module.exports = {
  httpAgentOptions: {
    keepAlive: false,
  },
};

源代码映射

由于 webpack 资产和源代码映射处理方面的优化，在 Next.js 应用程序中包含浏览器源代码映射的性能成本现在降低了约 70%，内存成本降低了约 67%。

这仅影响在 next.config.js 文件中设置了 productionBrowserSourceMaps: true 的 Next.js 应用程序。使用 Next.js 11.1，启用源代码映射时构建时间仅增加 11%。

我们还与 Sentry 合作 提高了 使用 Sentry Next.js 插件 上传源代码映射的性能。

ESLint 改进

在 Next.js 11 中，我们通过 next lint 引入了内置的 ESLint 支持。自首次发布以来，我们一直在添加规则，帮助开发人员修复应用程序中常见的错误。

默认的可访问性规则

现在默认包含了更好的可访问性规则，可以防止 ARIA 属性不匹配以及使用不存在的 ARIA 属性等问题。这些规则默认会发出警告。

特别感谢社区贡献者 JeffersonBledsoe 添加了这些规则。

常见错别字

现在，对 getStaticProps、getStaticPaths 和 getServerSideProps 中常见的错别字进行 lint 会默认发出警告。这将有助于解决一些由于小错误导致数据获取未被调用的情况。例如，getstaticprops 或 getStaticprops 将显示警告。

特别感谢社区贡献者 kaykdm 创建了此规则。

next/image 改进

我们一直在收集社区关于 next/image 和内置的 图像优化 的反馈，并很高兴分享对性能、开发者体验和用户体验的多项改进。

图像优化

默认情况下，Next.js 使用 WebAssembly 执行图像优化，这通过显著减小体积且无需安装后步骤来抵消 Next.js 包的安装时间。使用 Next.js 11.1，您可以选择安装 sharp，它可以优化未缓存图像的生成时间，但代价是安装速度较慢。

基于 WebAssembly 的图像优化器已更新，以支持使用 Node.js 16 的 ARM 芯片（如 Apple M1）。

内置图像优化器现在可以根据响应主体的内容自动检测外部图像的内容类型。这允许 Next.js 优化托管在 AWS S3 上的图像，即使响应头为 Content-Type: application/octet-stream 。

开发环境中模糊占位符的延迟生成

在 next dev 中，使用 placeholder="blur" 的 静态图像导入 现在会自动延迟生成，从而改善了包含大量静态图像导入的应用程序的开发服务器启动时间。

pages/index.js
import Image from 'next/image';
import author from '../public/me.png';
 
export default function Home() {
  return (
    // The placeholder for this image is lazy-generated during development
    <Image src={author} alt="Picture of the author" placeholder="blur" />
  );
}

其他图像改进

  • 先前已加载的图像不再延迟加载：当图像之前已在页面上加载过时，无论是通过客户端导航还是在页面的其他位置加载，Next.js 现在将自动跳过延迟加载，以避免在显示图像之前出现短暂的闪烁。
  • 支持使用 next export 的自定义图像加载器：next/image 现在支持与任何 第三方图像优化服务 一起使用 next export。当您打算向 next/image 提供 自定义 loader 属性 时，可以在 next.config.js 中配置 images.loader: "custom"。
  • 图像加载完成时的全新事件：根据用户反馈，我们添加了一个新的属性 onLoadingComplete 到 next/image。这允许注册一个回调函数，该函数在图像完全加载后调用。
  • 默认图像缓存 TTL（生存时间）的配置：您现在可以在 next.config.js 中配置 images.minimumCacheTTL 以更改优化图像的默认缓存 TTL。在可能的情况下，我们建议使用 静态图像 import，因为它们会自动使用最大 TTL，因为图像内容哈希位于 URL 中。

社区

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

我们很自豪地看到社区持续发展。仅在过去六个月中，我们看到 Next.js 在 NPM 上的下载量增长了 50%，从 410 万次增长到 620 万次，Alexa 前 10000 名中使用 Next.js 的主页数量也增长了 50%。

此版本由以下人员贡献：@abotsi, @adam-cowley, @afbarbaro, @akellbl4, @AndreVarandas, @andys-github, @angeloashmore, @apuyou, @arturmuller, @AryanBeezadhur, @atcastle, @borekb, @brandonchinn178, @breyed, @brijendravarma, @ctbarna, @ctjlewis, @darshkpatel, @delbaoliveira, @destruc7i0n, @devknoll, @enesakar, @enzoferey, @euess, @fabb, @gnbaron, @hiro0218, @housseindjirdeh, @huozhi, @ijjk, @JacobLey, @jameshoward, @jamsinclair, @janicklas-ralph, @jarvelov, @javivelasco, @jaybekster, @JeffersonBledsoe, @jflayhart, @johnrackles, @jviide, @karlsander, @kasipavankumar, @kaykdm, @kdy1, @kylemh, @leerob, @LetItRock, @lsndr, @lucleray, @m-abdelwahab, @mandarons, @markkaylor, @mastoj, @michalbundyra, @michielvangendt, @Munawwar, @mvasilkov, @NickCrews, @NickKelly1, @noahweingand, @noreiller, @nyedidikeke, @omasher, @orta, @pa-rang, @padmaia, @papaponmx, @PaulvdDool, @petermekhaeil, @phocks, @pranavp10, @qwertyforce, @raon0211, @reod, @rishabhpoddar, @roim, @Ryz0nd, @sa3dany, @sachinraja, @samrobbins85, @schoenwaldnils, @schultzp2020, @sedlukha, @sergioalvz, @shibe23, @smitssjors, @sohamsshah, @sokra, @stefanprobst, @stovmascript, @stuymedova, @styfle, @tanys123, @ThangHuuVu, @theostrahlen, @thomasmarshall, @tigger9flow, @timneutkens, @Timvdv, @tmcgann, @tomchen, @UniqueNL, @Vadorequest, @vitalybaev, @yunger7, @zackdotcomputer, @zeekrey