Google Font プリコネクト

Next.js はバージョン 12.0.1 以降、<link rel="preconnect" /> を自動的に追加します。

Google Fonts と共に preconnect を使用するようにしてください。

このエラーが発生した理由

Google Fonts ドメインへのリクエストで、プリコネクトリソースヒントが使用されていませんでした。オリジンへの早期接続を開始するために、preconnect の追加をお勧めします。

Google Font ドメインの <link> タグに rel="preconnect" を追加します

pages/_document.js

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

注：preconnect をサポートしていないブラウザのフォールバックとして、dns-prefetch を使用した別々のリンクを使用できますが、これは必須ではありません。