Next.js中_document.js内next/script脚本不执行问题排查

1. 脚本位置错误（核心问题） #

你把strategy="beforeInteractive"的Script放在了<NextScript />之后，这完全违背了该策略的加载逻辑。beforeInteractive脚本需要在Next.js核心运行时脚本初始化之前加载执行，所以必须放在<NextScript />组件的前面，正确位置是<Main />之后、<NextScript />之前。

2. 占位符未替换 #

第一个脚本的src="src"是无效的占位符，必须替换为真实的脚本资源URL，否则浏览器找不到脚本文件，直接导致加载失败。

3. 修复后的完整代码 #

import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />        
      </Head>
      <body>
        <Main />
        {/* beforeInteractive 脚本必须放在 NextScript 之前 */}
        <Script
          strategy="beforeInteractive"
          src="https://your-real-script-url.com/script.js" // 替换为实际地址
          type="text/javascript"
          charSet="UTF-8"
          data-domain-script="id"
        />
        <Script
          strategy="beforeInteractive"
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: `
              // 替换为你的实际可执行代码
              console.log('内联脚本执行测试');
            `,
          }}
        />
        <NextScript />
      </body>
    </Html>
  );
}

4. 额外注意事项 #

• beforeInteractive脚本不能依赖React或Next.js的客户端API，此时框架还未初始化，依赖这些API会报错。
• 如果你的脚本需要操作页面DOM或依赖客户端环境，建议改用afterInteractive或lazyOnload策略，且这类脚本更适合放在具体页面/组件中，而非_document.js。
• 打开浏览器控制台检查错误：如果脚本仍未执行，查看控制台是否有404（资源找不到）或执行报错，这是快速定位问题的关键。

内容的提问来源于stack exchange，提问作者Tapu Das