コンテンツへスキップ
ドキュメントエラードキュメント外でのインタラクティブ前のスクリプト禁止

ドキュメント外でのインタラクティブ前のスクリプト禁止

next/script の beforeInteractive 戦略を app/layout.jsx または pages/_document.js の外で使用することを禁止します。

このエラーが発生した理由

next/script コンポーネントを beforeInteractive 戦略で app/layout.jsx または pages/_document.js の外で使用することはできません。これは、beforeInteractive 戦略が **app/layout.jsx** または **pages/_document.js** 内でしか機能せず、サイト全体で必要とされるスクリプト（つまり、アプリケーションのどのページがサーバーサイドで読み込まれた際にもスクリプトが読み込まれる）をロードするように設計されているためです。

解決策

App Router

グローバルスクリプトが必要で、App Routerを使用している場合は、スクリプトを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

グローバルスクリプトが必要で、Pages Routerを使用している場合は、スクリプトを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>
  )
}