Google Fonts 预连接

Next.js 从 12.0.1 版本开始自动添加 <link rel="preconnect" />。

确保使用 Google Fonts 时使用了 preconnect。

错误发生的原因

未对 Google Fonts 域名上的请求使用预连接资源提示。建议添加 preconnect 以启动与源的早期连接。

在 Google Fonts 域名的 <link> 标签中添加 rel="preconnect"

pages/_document.js

<link rel="preconnect" href="https://fonts.gstatic.com" />

注意：可以使用带有 dns-prefetch 的**单独**链接作为不支持 preconnect 的浏览器的后备方案，尽管这不是必需的。