nextjs/google-font-preconnect 正しさ

何をするか

<link> タグを介して Google フォントを使用する場合、rel="preconnect" の存在を強制します。

なぜ問題か

Google フォントを使用する際には、必要なオリジンへの早期接続を確立するために、preconnect のリソースヒントを含めることが推奨されています。 preconnect を指定しない場合、ブラウザはフォントファイルのダウンロードを行う前に、DNS 解決、TCP ハンドシェイク、および TLS のネゴシエーションを実行する必要があり、これはフォントの読み込みを遅らせ、パフォーマンスに悪影響を及ぼす可能性があります。

例

このルールに違反する不適切なコードの例：

javascript

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

このルールに準拠する正しいコードの例：

javascript

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

使い方

設定ファイルまたは CLI でこのルールを有効化するには、次のように使用できます：

Config (.oxlintrc.json)CLI

json

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/google-font-preconnect": "error"
  }
}

bash

oxlint --deny nextjs/google-font-preconnect --nextjs-plugin

参照

ルールのソース

何をするか ​

なぜ問題か ​

例 ​

使い方 ​

参照 ​

何をするか

なぜ問題か

例

使い方

参照