mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Joseph
62 lines
1.8 KiB
Plaintext
62 lines
1.8 KiB
Plaintext
---
|
|
title: No Before Interactive Script Outside Document
|
|
---
|
|
|
|
> Prevent usage of `next/script`'s `beforeInteractive` strategy outside of a root layout or `pages/_document.js`.
|
|
|
|
## Why This Error Occurred
|
|
|
|
You cannot use the `next/script` component with the `beforeInteractive` strategy outside a root layout or `pages/_document.js`. That's because `beforeInteractive` strategy only works inside a **root layout** 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 a [root layout](/docs/app/api-reference/file-conventions/layout#root-layout), any layout without a `layout.js` above it.
|
|
|
|
```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)
|