如何解决在Next.js中document未定义的问题？

Question

你好想问一下，刚刚接触react，之前写的js在html上可以使用，但是换到这里显示document is not defined，如果在document.getElementById不能用的情况下还有什么办法能够通过id获取到元素？或者应该怎么修改才能正常获取呢？写的屎山如下，请大佬指教qaq

export default function ANIAdmire() {
  
  let count = 0;
  let flag = true;//判断素材状态
  let img: document.getElementById("admire");
  //就是这里出了问题，不是img未定义就是document未定义qwq

  img.style.AnimationPlayState = "paused";//动画初始状态为停止

  function myEndFunction() {
  img.style.animation = null
  } //点击后设置动画为空，保证每次点击动画位置为初始状态

  img.addEventListener("click", function () {
    if (count == 3) {
      //每点击四次更换一次素材
      count = 0;
      if (flag) {
        img.style.animation = "jump 0.7s linear 0s 1,gululu 0.7s linear 0s 1"//动画赋值
        img.src =
          "https://patchwiki.biligame.com/images/umamusume/2/20/o9e5yn4nvsm4lf8zon22bin9l7rrauk.png"
        flag = false//更换素材
        img.addEventListener("webkitAnimationEnd", myEndFunction)//动画播放完成后清空动画
      } else {
        img.style.animation = "jump 0.7s linear 0s 1,gululu 0.7s linear 0s 1" //动画赋值
        img.src =
          "https://patchwiki.biligame.com/images/umamusume/0/08/7u6ud327zarqitc9i49ftudknxzw674.png"
        flag = true //更换素材
        img.addEventListener("webkitAnimationEnd", myEndFunction) //动画播放完成后清空动画
      }
    } else {
      count++
    }
  })
}

1

Answer 1

let img: document.getElementById("admire");// 这里的:应该是=吧

你的函数名不需要首字母大写，因为这不是一个组件，它只是实现了一个点击动画的逻辑。将这个逻辑整理之后放到<image id="admire" />出现的组件中就好了。通过useRef关联到这个dom，然后在useEffect中给这个dom添加事件监听，来实现点击动画的效果。

Answer 2

建议先看看文档 https://react.dev/learn/referencing-values-with-refs

Answer 3

nextjs 里的组件会在服务端和前端都执行一次。

若是纯前端的代码，可以放到 useEffect() 中。

Answer 4

浏览器里才能执行的代码，放到单独的 client 组件里，用 'use client' 标记出来。