跳到内容
返回博客

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应用程序不受此漏洞影响（因此，您的Next.js应用程序在Vercel上运行无需采取任何措施）。

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中未使用的代码进行摇树。

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

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

我们很高兴地宣布，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，现在默认启用HTTP Keep-Alive。根据外部基准测试，这应该使预渲染速度快约2倍。

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

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中常见拼写错误的Linting现在将默认发出警告。这将有助于解决因小拼写错误导致数据获取未被调用的情况。例如，getstaticprops或getStaticprops将显示警告。

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

next/image 改进

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

图片优化

默认情况下，Next.js使用WebAssembly执行图像优化，这通过显着更小且没有安装后步骤来抵消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 prop时，可以在next.config.js中配置images.loader: "custom"。
  • 图像加载完成的新事件： 根据用户反馈，我们已将新属性onLoadingComplete添加到next/image。这允许注册一个回调，该回调在图像完全加载后调用。
  • 默认图像缓存TTL（生存时间）的配置： 您现在可以在next.config.js中配置images.minimumCacheTTL以更改优化图像的默认缓存TTL。在可能的情况下，我们建议使用静态图像import，因为这些图像会自动使用最大TTL，因为图像内容哈希位于URL中。

社区

Next.js是1700多名独立开发人员、Google和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