Next.js 10.2

我们很高兴推出 Next.js 10.2，主要特性包括：

• 更快的构建：通过缓存机制，后续构建速度提升高达约 60%。
• 更快的刷新：每次刷新速度提升 100 毫秒至 200 毫秒。
• 更快的启动：next dev 启动速度提升高达约 24%。
• 改进的无障碍访问：路由变更现在会被屏幕阅读器播报。
• 更灵活的重定向和重写规则：支持匹配任意请求头、Cookie 或查询字符串。
• 自动网页字体优化：通过内联字体 CSS 提升性能。

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

Webpack 5

在 Next.js 10.1 中，我们优化了 快速刷新 并 减少了安装时间。现在，我们很高兴分享通过 webpack 5 实现的更多性能改进。

从 Next.js 10.2 开始，所有未在 next.config.js 中使用自定义 webpack 配置的应用将自动启用 webpack 5。

启用 webpack 5 后，您将自动获得以下新特性和改进：

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

我们努力确保了从 webpack 4 到 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 播报标题 "Real Data. Real Performance"。页面名称首先查找 <h1> 元素，其次回退到 document.title，最后使用路径名。

路由变更现在会自动播报。

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

基于请求头和查询参数的路由

Next.js 的 重写、重定向 和 请求头 现在支持新的 has 属性，允许匹配传入的请求头、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,
      },
    ];
  },
};

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

自动网页字体优化

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

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

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

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

感谢我们的合作伙伴 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。