跳到内容
返回博客

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，以提高应用程序的整体安全性。对于未来负责任的报告披露，请发送电子邮件至 security@vercel.com。

注意：托管在 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 Discussions 上留下反馈，如果您有改进建议。

采用基于 Rust 的 SWC

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

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

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

在早期测试中，以前使用 Babel 的代码转换从约 500 毫秒降至约 10 毫秒，而使用 Terser 的代码压缩从约 250 毫秒降至约 30 毫秒（使用 SWC）。总的来说，这使得构建速度快了两倍。

我们很高兴地宣布 DongYoon Kang，SWC 的创建者，以及 Maia Teegarden，Parcel 的贡献者，已加入 Vercel 的 Next.js 团队，致力于提高 next dev 和 next build 的性能。我们将在下一个稳定版本发布时分享更多关于 SWC 采用的结果。

性能提升

构建 & 数据获取

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

Next.js 自动 polyfills node-fetch，现在默认启用 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,
  },
};

Source Maps

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

这仅影响在其 next.config.js 文件中设置 productionBrowserSourceMaps: true 的 Next.js 应用程序。使用 Next.js 11.1，启用 source maps 后，构建时间仅增加 11%。

我们还与 Sentry 合作，以提高使用 Sentry Next.js 插件 上传 source maps 的性能，提高性能。

ESLint 改进

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

默认可访问性规则

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

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

常见拼写错误

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

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

next/image 改进

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

图像优化

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

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

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

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

在 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"。
  • 图像完成加载时的新事件：根据用户反馈，我们在 next/image 中添加了一个新的属性 onLoadingComplete。这允许注册一个回调，该回调在图像完全加载后调用。
  • 默认图像缓存 TTL（生存时间）的配置： 您现在可以在 next.config.js 中配置 images.minimumCacheTTL，以更改优化图像的默认缓存 TTL。如果可能，我们建议使用静态图像 import，因为这些导入会自动使用最大 TTL，因为图像内容哈希在 URL 中。

社区

Next.js 是超过 1,700 名个人开发者、谷歌和 Facebook 等行业合作伙伴以及我们核心团队共同努力的成果。

我们很自豪地看到社区持续发展壮大。仅在过去六个月中，我们在 NPM 上看到的 Next.js 下载量增长了 50%，从 410 万次增至 620 万次，Alexa 排名前 10,000 的主页中使用 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