2023-07-05 15:11:16 +02:00
---
title: No Before Interactive Script Outside Document
---
2022-06-14 04:17:42 +02:00
2023-12-27 17:54:17 +01:00
> Prevent usage of `next/script`'s `beforeInteractive` strategy outside of `app/layout.jsx` or `pages/_document.js`.
2022-04-21 23:15:53 +02:00
2023-07-05 15:11:16 +02:00
## Why This Error Occurred
2022-04-21 23:15:53 +02:00
2023-12-27 17:54:17 +01:00
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).
2022-04-21 23:15:53 +02:00
2023-07-05 15:11:16 +02:00
## Possible Ways to Fix It
2022-04-21 23:15:53 +02:00
2023-12-27 17:54:17 +01:00
### 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`.
2022-04-21 23:15:53 +02:00
2023-07-05 15:11:16 +02:00
```jsx filename="pages/_document.js"
2022-04-21 23:15:53 +02:00
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<Script
2023-12-27 17:54:17 +01:00
src="https://example.com/script.js"
2022-04-21 23:15:53 +02:00
strategy="beforeInteractive"
></Script>
</body>
</Html>
)
}
```
2023-12-27 17:54:17 +01:00
- [App Router Script Optimization](/docs/app/building-your-application/optimizing/scripts)
- [Pages Router Script Optimization](/docs/pages/building-your-application/optimizing/scripts)
