useInlineScriptId

JSX and TSX

Summary

Rule available since: v2.3.12
Diagnostic Category: lint/correctness/useInlineScriptId
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- next
Sources:
- Same as @next/next/inline-script-id

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "useInlineScriptId": "error"
6
      }
7
    }
8
  }
9
}

Description

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.

Examples

Invalid

1
import Script from 'next/script'
2

3
export default function Page() {
4
  return (
5
     <Script>{`console.log('Hello world!');`}</Script>
6
  )
7
}

code-block.jsx:5:6 lint/correctness/useInlineScriptId ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ next/script components have inline content or `dangerouslySetInnerHTML` without id attribute.
  
    3 │ export default function Page() {
    4 │   return (
  > 5 │      <Script>{`console.log(‘Hello world!’);`}</Script>
      │      ^^^^^^^^
    6 │   )
    7 │ }
  
  ℹ Next.js requires id attribute to track and optimize inline scripts. Without it, performance issues may occur.
  
  ℹ See the Next.js docs for more details.

1
import Script from 'next/script'
2

3
export default function Page() {
4
  return (
5
     <Script dangerouslySetInnerHTML={{ __html: `console.log('Hello world!');` }} />
6
  )
7
}

code-block.jsx:5:6 lint/correctness/useInlineScriptId ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ next/script components have inline content or `dangerouslySetInnerHTML` without id attribute.
  
    3 │ export default function Page() {
    4 │   return (
  > 5 │      <Script dangerouslySetInnerHTML={{ __html: `console.log(‘Hello world!’);` }} />
      │      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │   )
    7 │ }
  
  ℹ Next.js requires id attribute to track and optimize inline scripts. Without it, performance issues may occur.
  
  ℹ See the Next.js docs for more details.

Valid

1
import Script from 'next/script'
2

3
export default function Page() {
4
  return (
5
     <Script id="my-script">{`console.log('Hello world!');`}</Script>
6
  )
7
}

1
import Script from 'next/script'
2

3
export default function Page() {
4
  return (
5
     <Script id="my-script" dangerouslySetInnerHTML={{ __html: `console.log('Hello world!');` }} />
6
  )
7
}