Next.js 10.2

我们很高兴地推出 Next.js 10.2，其特色包括

• 更快的构建速度：使用缓存后，后续构建速度最多可提升约 60%。
• 更快的刷新速度：刷新速度提高了 100 毫秒到 200 毫秒。
• 更快的启动速度：next dev 的速度最多可提升约 24%。
• 改进的辅助功能：屏幕阅读器现在会宣布路由更改。
• 更灵活的重定向和重写规则：匹配任何标头、Cookie 或查询字符串。
• 自动 Web 字体优化：通过内联字体 CSS 提高性能。

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

Webpack 5

在 Next.js 10.1 中，我们改进了 快速刷新 并 缩短了安装时间。我们很高兴能分享通过 webpack 5 实现的其他性能改进。

今天，我们将 webpack 5 的推出范围扩展到 Next.js 应用程序。从 Next.js 10.2 开始，所有未在其 next.config.js 中使用自定义 webpack 配置的应用程序都将自动使用 webpack 5。

启用 webpack 5 后，您将自动获得新的功能和改进，例如

• 改进的磁盘缓存：磁盘缓存允许编译器在 next build 运行之间保留工作。仅重新编译已更改的文件，从而提高性能。Vercel 客户 Scale 观察到后续构建速度提高了 63%。
• 改进的快速刷新：Next.js 现在优先处理与快速刷新相关的编译，每次刷新速度提高了 100 毫秒到 200 毫秒。
• 改进的资产长期缓存：多个 next build 运行之间的输出现在是确定性的，从而提高了生产环境中 JavaScript 资产的浏览器缓存。当页面的内容没有更改时，哈希值将保持不变。
• 改进的树状摇晃：CommonJS 模块现在可以 进行树状摇晃 以自动删除未使用的代码。静态分析用于确定无副作用的模块。export * 跟踪更多信息，并且不再将默认导出标记为已使用。还启用了内部模块树状摇晃，允许仅在未使用导出中使用的导入进行树状摇晃。

我们努力确保从 webpack 4 平滑过渡到 webpack 5。Next.js 核心测试套件包含超过 3,400 个集成测试，并在启用 webpack 5 支持的每个拉取请求中运行。

如果您的应用程序具有自定义 webpack 配置，我们建议按照 文档启用 webpack 5。在 Next.js 中升级到 webpack 5 后，请 与我们分享您的反馈。

改进的启动性能

我们改进了 Next.js CLI 初始化，使 next dev 的启动时间在第一次运行后最多 加快 24%。例如，vercel.com 的 next dev 从 3.3 秒缩短到 2.5 秒。

我们的目标是让您的本地开发体验成为实时体验（速度提高 20 倍）。敬请关注即将发布的版本中有关启动性能的其他改进。

辅助功能改进

路由更改现在默认会向屏幕阅读器和其他辅助技术宣布。

以下示例显示了标题“真实数据。真实性能”在客户端导航时由 macOS VoiceOver 宣布。页面名称首先通过查找 <h1> 元素找到，然后回退到 document.title，最后回退到路径名。

感谢 Kyle Boss 和 Kitty Giraudel 帮助实现此功能。

基于 Header 和查询字符串参数的路由

Next.js 的 重写规则、重定向 和 Headers 现在支持新的 has 属性，允许您匹配传入的 Headers、Cookie 和查询字符串。

Vercel 客户 Joyn 使用 has 来优化内容的可发现性和性能。例如，您可以根据 User-Agent 重定向旧版浏览器。

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

另一个例子可能是根据用户的地理位置进行重定向。

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

最后，如果用户已登录，您可以进行重定向。

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

要了解更多信息并探索其他示例，请查看 重定向文档。

自动 Web 字体优化

82% 的桌面网页 使用 Web 字体。自定义字体对于网站的品牌、设计和跨浏览器/设备一致性非常重要。但是，使用 Web 字体不应以牺牲性能为代价。

Next.js 现在在使用 Web 字体时支持自动 Web 字体优化。默认情况下，Next.js 会在构建时自动内联字体 CSS，从而消除获取字体声明的额外往返请求。这将改善首次内容绘制 (FCP) 和最大内容绘制 (LCP)。例如

// Before
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

自动 Web 字体优化目前支持 Google Fonts，我们正在努力将其支持范围扩展到其他字体提供商。我们还计划添加对 加载策略 和 font-display 值的控制。通过默认优化字体，我们能够帮助开发者构建更快的网站并改善其 核心 Web 指标，而无需任何额外的工作。

感谢我们 Google 的合作伙伴和 Janicklas Ralph 帮助实现此功能。

团队壮大

我们很高兴地宣布，webpack 的作者 Tobias Koppers 已加入 Vercel 的 Next.js 团队。

社区

我们感谢我们的社区，包括所有帮助塑造此版本的外部反馈和贡献。

此版本由以下人员的贡献带来：@rpxs、@lemarier、@RayhanADev、@janicklas-ralph、@devknoll、@felipeptcho、@rishabhpoddar、@sokra、@m-leon、@turadg、@PierreBerger、@divmain、@dominikwilkowski、@pranavp10、@ijjk、@santidalmasso、@HaNdTriX、@jamesgeorge007、@garmeeh、@leerob、@shuding、@feute、@timneutkens、@alexvilchis、@Timer、@malixsys、@sahilrajput03、@marcvangend、@steven-tey、@julienben、@umarsenpai、@Mzaien、@merceyz、@AntelaBrais、@SystemDisc、@M1ck0、@jbmoelker、@jaisharx、@amannn、@vkarpov15、@gaelhameon、@4ortytwo、@Simply007、@styxlab、@xCloudzx、@wodCZ、@emmanuelgautier、@leosuncin、@ludder、@geritol、@vassbence、@vvo、@portenez、@arshad、@tarunama、@flybayer、@Hanaffi、@SokratisVidros、@chibicode、@kylemarshall18 和 @jarrodwatts。