跳到内容
文档错误在文档之外没有交互前的脚本

在文档之外没有交互前的脚本

阻止在 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/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/_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>
  )
}