nextjs/google-font-display 正しさ

何をするか

Google Fonts での font-display の挙動を強制します。

なぜ問題なのか

display=optional を指定することで、テキストが一時的に表示されない、またはレイアウトのずれが発生するリスクを最小限に抑えることができます。カスタムフォントの読み込み後にそのフォントに切り替えることが重要である場合は、代わりに display=swap を使用してください。

例

このルールに対して誤ったコードの例：

jsx

import Head from "next/head";

export default Test = () => {
  return (
    <Head>
      <link href="https://fonts.googleapis.com/css2?family=Krona+One" rel="stylesheet" />
    </Head>
  );
};

このルールに対して正しいコードの例：

jsx

import Head from "next/head";

export default Test = () => {
  return (
    <Head>
      <link
        href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional"
        rel="stylesheet"
      />
    </Head>
  );
};

使用方法

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

Config (.oxlintrc.json)CLI

json

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

bash

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

参照

ルールのソース

何をするか ​

なぜ問題なのか ​

例 ​

使用方法 ​

参照 ​

何をするか

なぜ問題なのか

例

使用方法

参照