nextjs/no-before-interactive-script-outside-document 正确性
它的作用
禁止在 pages/_document.js 之外使用 next/script 的 beforeInteractive 策略。 此规则确保采用 beforeInteractive 加载策略的脚本仅在文档组件中使用，以发挥其最大效果。
为什么这是问题？
beforeInteractive 策略专门设计为在页面任何水合（hydration）操作之前加载脚本，而只有在放置于 pages/_document.js 时才能保证正确运行。在其他位置使用该策略：
- 可能无法实现预期的早期加载行为
- 可能导致脚本加载时间不一致
- 可能引发水合不匹配或其他运行时问题
- 可能影响应用的性能优化
示例
以下为 错误 的代码示例：
jsx
// pages/index.js
import Script from "next/script";
export default function HomePage() {
return (
<div>
<Script
src="https://example.com/script.js"
strategy="beforeInteractive" // ❌ 错误的位置
/>
</div>
);
}以下为 正确 的代码示例：
jsx
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Script
src="https://example.com/script.js"
strategy="beforeInteractive" // ✅ 正确的位置
/>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;如何使用
要通过配置文件或 CLI 启用 此规则，可以使用：
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-before-interactive-script-outside-document": "error"
}
}bash
oxlint --deny nextjs/no-before-interactive-script-outside-document --nextjs-plugin