文档外部禁止使用 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 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>
)
}
实用链接
这有帮助吗?