nextjs/inline-script-id Correctness ​
What it does ​
Enforces that all next/script
components with inline content or dangerouslySetInnerHTML
must have an id
prop.
Why is this bad? ​
Next.js requires a unique id
prop for inline scripts to properly deduplicate them during page renders. Without an id
, the same inline script might be executed multiple times, leading to unexpected behavior or performance issues. This is particularly important for scripts that modify global state or perform one-time initializations.
Examples ​
Examples of incorrect code for this rule:
javascript
import Script from "next/script";
export default function Page() {
return (
<Script>
{`console.log('Hello world');`}
</Script>
);
}
// Also incorrect with dangerouslySetInnerHTML
export default function Page() {
return (
<Script
dangerouslySetInnerHTML={{
__html: `console.log('Hello world');`,
}}
/>
);
}
Examples of correct code for this rule:
javascript
import Script from "next/script";
export default function Page() {
return (
<Script id="my-script">
{`console.log('Hello world');`}
</Script>
);
}
// Correct with dangerouslySetInnerHTML
export default function Page() {
return (
<Script
id="my-script"
dangerouslySetInnerHTML={{
__html: `console.log('Hello world');`,
}}
/>
);
}
// No id required for external scripts
export default function Page() {
return <Script src="https://example.com/script.js" />;
}
How to use ​
To enable this rule in the CLI or using the config file, you can use:
bash
oxlint --deny nextjs/inline-script-id --nextjs-plugin
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/inline-script-id": "error"
}
}