errors/no-before-interactive-script-outside-document.mdx - canary - githubmirror/next.js

errors/no-before-interactive-script-outside-document.mdx

61 строка2 KB

Delba de Oliveira

docs: Move optimizing pages to guides (#78500)

24 апр 2025, 21:40

24 апр 2025, 21:4076ade73

---
title: No Before Interactive Script Outside Document
---

> Prevent usage of `next/script`'s `beforeInteractive` strategy outside of `app/layout.jsx` or `pages/_document.js`.

## Why This Error Occurred

You cannot use the `next/script` component with the `beforeInteractive` strategy outside `app/layout.jsx` or `pages/_document.js`. That's because `beforeInteractive` strategy only works inside **`app/layout.jsx`** or **`pages/_document.js`** and is designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side).

## Possible Ways to Fix It

### App Router

If you want a global script, and you are using the App Router, move the script inside `app/layout.jsx`.

```jsx filename="app/layout.jsx"
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script
        src="https://example.com/script.js"
        strategy="beforeInteractive"
      />
    </html>
  )
}
```

### Pages Router

If you want a global script, and you are using the Pages Router, move the script inside `pages/_document.js`.

```jsx filename="pages/_document.js"
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>
  )
}
```

## Useful Links

- [App Router Script Optimization](/docs/app/guides/scripts)
- [Pages Router Script Optimization](/docs/pages/guides/scripts)