Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updates "No Before Interactive" error message for App router #56033

Merged
merged 2 commits into from
Dec 27, 2023
+28 −5
Merged

Updates "No Before Interactive" error message for App router #56033

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0279522
Updates"No Before Interactive" error message for App router
manovotny Sep 26, 2023
f952507
Apply suggestions from code review
leerob Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 28 additions & 5 deletions errors/no-before-interactive-script-outside-document.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,37 @@
title: No Before Interactive Script Outside Document
---

> Prevent usage of `next/script`'s `beforeInteractive` strategy outside of `pages/_document.js`.
> 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 `pages/_document.js`. That's because `beforeInteractive` strategy only works inside **`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).
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

If you want a global script, move the script inside `pages/_document.js`.
### 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'
Expand All @@ -24,7 +46,7 @@ export default function Document() {
<Main />
<NextScript />
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
src="https://example.com/script.js"
strategy="beforeInteractive"
></Script>
</body>
Expand All @@ -33,4 +55,5 @@ export default function Document() {
}
```

- [next-script](/docs/pages/building-your-application/optimizing/scripts)
- [App Router Script Optimization](/docs/app/building-your-application/optimizing/scripts)
- [Pages Router Script Optimization](/docs/pages/building-your-application/optimizing/scripts)