Skip to content
dev-docs

No Before Interactive Script Outside Document

Source URL: https://nextjs.org/docs/messages/no-before-interactive-script-outside-document

No Before Interactive Script Outside Document

Section titled “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

Section titled “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

Section titled “Possible Ways to Fix It”

App Router

Section titled “App Router”

If you want a global script, and you are using the App Router, move the script inside 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

Section titled “Pages Router”

If you want a global script, and you are using the Pages Router, move the script inside 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>
  )
}
Section titled “Useful Links”