Skip to content

nextjs/next-script-for-ga Correctness ​

✅ This rule is turned on by default.

What it does ​

Enforces the use of the next/script component when implementing Google Analytics in Next.js applications, instead of using regular <script> tags.

Why is this bad? ​

Using regular <script> tags for Google Analytics can lead to several issues:

  • Scripts may load in a blocking manner, impacting page performance
  • No built-in optimization or loading strategies
  • Lack of automatic resource handling that Next.js provides

Examples ​

Examples of incorrect code for this rule:

jsx
// Using regular script tag with GA source
<script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

// Using inline script for GA initialization
<script dangerouslySetInnerHTML={{
  __html: `
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  `
}} />

Examples of correct code for this rule:

jsx
import Script from "next/script";

// Using next/script for GA source
<Script
  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
  strategy="lazyOnload"
/>;

// Using next/script for GA initialization
<Script id="google-analytics">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  `}
</Script>;

How to use ​

To enable this rule in the CLI or using the config file, you can use:

bash
oxlint --deny nextjs/next-script-for-ga --nextjs-plugin
json
{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/next-script-for-ga": "error"
  }
}

References ​

Released under the MIT License.