ContextQMD
Back to Biomejs

noBeforeInteractiveScriptOutsideDocument

src/content/docs/linter/rules/no-before-interactive-script-outside-document.mdx

latest5.3 KB
Original Source

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.11` - Diagnostic Category: [`lint/nursery/noBeforeInteractiveScriptOutsideDocument`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - This rule belongs to the following domains: - [`next`](/linter/domains#next) - Sources: - Same as [`@next/next/no-before-interactive-script-outside-document`](https://nextjs.org/docs/messages/no-before-interactive-script-outside-document)

How to configure

json
{
	"linter": {
		"rules": {
			"nursery": {
				"noBeforeInteractiveScriptOutsideDocument": "error"
			}
		}
	}
}

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

jsx
// pages/index.jsx
import Script from 'next/script'

export default function Index() {
  return (
    <div>
      <Script
        src="https://example.com/script.js"
        strategy="beforeInteractive"
      ></Script>
    </div>
  )
}
<pre class="language-text"><code class="language-text">code-block.jsx:7:7 <a href="https://biomejs.dev/linter/rules/no-before-interactive-script-outside-document">lint/nursery/noBeforeInteractiveScriptOutsideDocument</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Don't use </span><span style="color: Orange;"><strong>next/script</strong></span><span style="color: Orange;"> component with the &#96;</span><span style="color: Orange;"><strong>beforeInteractive</strong></span><span style="color: Orange;">&#96; strategy outside of </span><span style="color: Orange;"><strong>pages/&#95;document.js</strong></span><span style="color: Orange;">.</span> <strong>5 │ </strong> return ( <strong>6 │ </strong> &lt;div&gt; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>7 │ </strong> &lt;Script <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>8 │ </strong> src=&quot;https://example.com/script.js&quot; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>9 │ </strong> strategy=&quot;beforeInteractive&quot; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>10 │ </strong> &gt;&lt;/Script&gt; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>11 │ </strong> &lt;/div&gt; <strong>12 │ </strong> ) <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">See the </span><span style="color: lightgreen;"><a href="https://nextjs.org/docs/messages/no-before-interactive-script-outside-document">Next.js docs</a></span><span style="color: lightgreen;"> for more details.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>

Valid

jsx
// pages/_document.jsx
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
    return (
        <Html>
            <Head />
            <body>
                <Main />
                <NextScript />
                <Script
                  src="https://example.com/script.js"
                  strategy="beforeInteractive"
                ></Script>
            </body>
        </Html>
    )
}
</TabItem> </Tabs>