Next.js页面加载后script标签不生效，绑定按钮点击事件无法触发

• 脚本执行时机早于DOM渲染：你在_document.js中插入的脚本默认在HTML初始解析阶段就执行，此时页面组件还未完成渲染，id为clickk的按钮节点尚未生成，document.getElementById("clickk")会返回null，后续绑定事件的逻辑无法执行，控制台一般会抛出Cannot read properties of null (reading 'addEventListener')的报错。
• 原生script标签加载逻辑不符合Next.js hydration规则：如果在_document.js中直接使用原生<script>标签而非Next.js官方提供的Script组件，也容易出现加载顺序异常、hydration阶段冲突的问题。

方案1：修改外部脚本，等待DOM加载完成后执行 #

给你的外部脚本增加DOM加载完成的监听逻辑，同时增加节点判空避免报错：

document.addEventListener('DOMContentLoaded', () => {
  const sa = document.getElementById("clickk");
  // 先判断节点是否存在再绑定事件
  if (sa) {
    sa.addEventListener("click", () => {
      alert('hello')
    })
  }
})

方案2：使用Next.js官方Script组件控制加载策略 #

在_document.js中引入next/script提供的Script组件，通过strategy参数指定脚本在页面可交互后再加载：

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        {/* 替换为你自己的外部脚本地址，strategy设为afterInteractive保证页面可交互后再执行 */}
        <Script src="/你的脚本路径.js" strategy="afterInteractive" />
      </body>
    </Html>
  )
}

方案3（推荐）：组件内直接绑定事件 #

如果没有必须使用外部脚本的特殊场景，直接在按钮所在组件内绑定点击事件即可，无需额外引入外部脚本，符合Next.js的开发规范：

// 按钮所属的组件代码
export default function MyButton() {
  const handleClick = () => {
    alert('hello')
  }
  return <button onClick={handleClick}>Click</button>
}

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