nextjs/no-page-custom-font 正しさ

何をするか

ページ専用のカスタムフォントの使用を禁止します。

なぜこれは悪いのか

追加しているカスタムフォントがページに追加されているため、この操作は特定のページにのみフォントを追加し、アプリ全体に適用されません。
追加しているカスタムフォントが pages/_document.js 内の別々のコンポーネントに追加されているため、自動フォント最適化が無効になります。

例

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

jsx

// pages/index.jsx
import Head from "next/head";
function IndexPage() {
  return (
    <Head>
      <link
        href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap"
        rel="stylesheet"
      />
    </Head>
  );
}
export default IndexPage;

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

jsx

// pages/_document.jsx
import NextDocument, { Html, Head } from "next/document";
class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap"
            rel="stylesheet"
          />
        </Head>
      </Html>
    );
  }
}
export default Document;

使い方

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

Config (.oxlintrc.json)CLI

json

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-page-custom-font": "error"
  }
}

bash

oxlint --deny nextjs/no-page-custom-font --nextjs-plugin

参照

ルールのソース

何をするか ​

なぜこれは悪いのか ​

例 ​

使い方 ​

参照 ​

何をするか

なぜこれは悪いのか

例

使い方

参照