所以我写了一个React代码，当我向下滚动一个 neon 线从页面的顶部到页面的底部，问题是当我在next.js上尝试它时，它不起作用，错误是next.js行为空，有什么线索吗？
代码如下：

import React, { useState, useEffect } from "react";
import styles from "./Neon.module.css";
const Neon = () => {
  const [scrolling, setScrolling] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      setScrolling(true);
      const neonLine = document.querySelector(".nLine");
      const scrollTop = window.scrollY;
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;
      const scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100;
      neonLine.style.height = scrollPercentage + "%";
    };
    let scrollingTimeout;
    const checkScrollStop = () => {
      if (scrolling) {
        setScrolling(false);
        clearTimeout(scrollingTimeout);
      } else {
        const neonLine = document.querySelector(".nLine");
        neonLine.style.transition = "height 0.5s ease-in-out";
      }
    };
    window.addEventListener("scroll", handleScroll);
    window.addEventListener("scroll", checkScrollStop);
    return () => {
      window.removeEventListener("scroll", handleScroll);
      window.removeEventListener("scroll", checkScrollStop);
    };
  }, []);
  return (
    <div className={styles.con}>
      <div className={styles.neon}></div>
      <div className={styles.line}>
        <div className={styles["nLine"]}></div>
      </div>
    </div>
  );
};
export default Neon;

字符串