在文件外部不可使用 beforeInteractive 腳本

防止在 app/layout.jsx 或 pages/_document.js 之外使用 next/script 的 beforeInteractive 策略。

錯誤發生原因

您不能在 app/layout.jsx 或 pages/_document.js 之外使用 beforeInteractive 策略的 next/script 組件。這是因為 beforeInteractive 策略僅在 app/layout.jsx 或 pages/_document.js 內有效，並且設計用於載入整個網站所需的腳本（即，當應用程式中的任何頁面已伺服器端載入時，腳本將會載入）。

可能的解決方法

應用程式路由器 (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/_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>
  )
}