No Before Interactive Script Outside Document
Prevent usage of
next/script
'sbeforeInteractive
strategy outside ofapp/layout.jsx
orpages/_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
.
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
.
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
Was this helpful?