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"
}
}