src/content/docs/linter/rules/use-inline-script-id.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.12` - Diagnostic Category: [`lint/nursery/useInlineScriptId`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`next`](/linter/domains#next) - Sources: - Same as [`@next/next/inline-script-id`](https://nextjs.org/docs/messages/inline-script-id){
"linter": {
"rules": {
"nursery": {
"useInlineScriptId": "error"
}
}
}
}
Enforce id attribute on next/script components with inline content or dangerouslySetInnerHTML.
Using inline scripts or dangerouslySetInnerHTML in next/script components requires an id attribute to ensure that Next.js can track and optimize them correctly.
import Script from 'next/script'
export default function Page() {
return (
<Script>{`console.log('Hello world!');`}</Script>
)
}
import Script from 'next/script'
export default function Page() {
return (
<Script dangerouslySetInnerHTML={{ __html: `console.log('Hello world!');` }} />
)
}
import Script from 'next/script'
export default function Page() {
return (
<Script id="my-script">{`console.log('Hello world!');`}</Script>
)
}
import Script from 'next/script'
export default function Page() {
return (
<Script id="my-script" dangerouslySetInnerHTML={{ __html: `console.log('Hello world!');` }} />
)
}