← Back to rules

nextjs/next-script-for-ga 正しさ

何をするか

Next.js アプリケーションで Google Analytics を実装する場合、通常の <script> タグの代わりに next/script コンポーネントを使用することを強制します。

なぜ問題なのか

Google Analytics に通常の <script> タグを使用すると、以下の問題が発生する可能性があります：

• スクリプトがブロッキング方式で読み込まれ、ページパフォーマンスに影響する
• ビルトインの最適化やロード戦略が存在しない
• Next.js が提供する自動リソース管理が利用できない

例

このルールに対して 誤り なコードの例：

// GA のソース用に通常の script タグを使用
<script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

// GA 初期化用にインラインスクリプトを使用
<script dangerouslySetInnerHTML={{
  __html: `
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  `
}} />

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

import Script from 'next/script'

// GA ソース用に next/script を使用
<Script
  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
  strategy="lazyOnload"
/>

// GA 初期化用に next/script を使用
<Script id="google-analytics">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  `}
</Script>

使い方

設定ファイルまたは CLI でこのルールを 有効化 するには、以下のようにします：

Config (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/next-script-for-ga": "error"
  }
}

CLI

oxlint --deny nextjs/next-script-for-ga --nextjs-plugin

参照

• ルールのソース