noBeforeInteractiveScriptOutsideDocument

このコンテンツはまだ日本語訳がありません。

JSX and TSX

Summary

Diagnostic Category: lint/nursery/noBeforeInteractiveScriptOutsideDocument
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- next
Sources:
- Same as @next/next/no-before-interactive-script-outside-document

How to configure

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

Description

Prevent usage of next/script’s beforeInteractive strategy outside of pages/_document.js in a Next.js project.

Next.js provides a next/script component to optimize the loading of third-party scripts. Using the beforeInteractive strategy allows scripts to be preloaded before any first-party code. beforeInteractive scripts must be placed in pages/_document.js.

This rule checks for any usage of the beforeInteractive scripts outside of these files.

Examples

Invalid

1
import Script from 'next/script'
2

3
export default function Index() {
4
  return (
5
    <div>
6
      <Script
7
        src="https://example.com/script.js"
8
        strategy="beforeInteractive"
9
      ></Script>
10
    </div>
11
  )
12
}

code-block.jsx:7:7 lint/nursery/noBeforeInteractiveScriptOutsideDocument ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Don’t use next/script component with the `beforeInteractive` strategy outside of pages/_document.js.
  
     5 │   return (
     6 │     <div>
   > 7 │       <Script
       │       ^^^^^^^
   > 8 │         src=“https://example.com/script.js”
   > 9 │         strategy=“beforeInteractive”
  > 10 │       ></Script>
       │       ^
    11 │     </div>
    12 │   )
  
  ℹ See the Next.js docs for more details.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
import { Html, Head, Main, NextScript } from 'next/document'
2
import Script from 'next/script'
3

4
export default function Document() {
5
    return (
6
        <Html>
7
            <Head />
8
            <body>
9
                <Main />
10
                <NextScript />
11
                <Script
12
                  src="https://example.com/script.js"
13
                  strategy="beforeInteractive"
14
                ></Script>
15
            </body>
16
        </Html>
17
    )
18
}