此问题在此处已有答案：

Need help inserting useEffect state on nextjs page for document.queryselector（1个答案）
4天前关闭。
这是我在Next.js页面上创建的一个圆形进度条的代码。我想让它工作在如果我改变“progressEndValue = 67”的值，它将刷新页面并更新进度条上的值的地方。然而，当我这样做时，我得到：“服务器错误参考Error：未定义文档
生成页面时发生此错误。所有控制台日志都将显示在终端窗口中。”
“

let circularProgress = document.querySelector(".circular-progress"),
     |                     ^
  53 |   progressValue = document.querySelector(".progress-value");
  54 | 
  55 | let progressStartValue = 0,

“我需要帮助才能使它工作。

``
import { SearchIcon } from "@heroicons/react/outline";
import { useState } from "react";
import News from "./News";
import { AnimatePresence, motion } from "framer-motion"; 
import '../pages/_app';
import dynamic from 'next/dynamic'

        <div className="text-gray-700 space-y-3 bg-gray-100 pt-2 rounded-xl w-[90%] xl:w-[75%]">
          <h4 className="font-bold text-xl px-4">Capacity</h4>
          <div class="container">
            <div class="circular-progress">
            <span class="progress-value">0%</span>
            </div>
            <span className="text">Test 1</span>
              <div class="circular-progress">
              <span className="progress-value">0%</span>
            </div>
            <span className="text">Test 2</span>
            <div class="circular-progress">
              <span className="progress-value">0%</span>
            </div>
            <span className="text">Test 3</span>
          </div>
          <button className="text-blue-300 pl-4 pb-3 hover:textblue-400">Show More</button>
        </div>
    </div>
  )
}
let circularProgress = document.querySelector(".circular-progress"),
    progressValue = document.querySelector(".progress-value");

let progressStartValue = 0,
    progressEndValue = 67,
    speed = 40;

let progress = setInterval(() =>{
    progressStartValue++;

    progressValue.textContent = `${progressStartValue}%`
    circularProgress.style.background = `conic-gradient(#E0115F ${progressStartValue * 3.6}deg, #ededed 0deg)`

    if(progressStartValue == progressEndValue){
        clearInterval(progress);
    }
    console.log(progressStartValue);

}, speed);

我试着使用Next.js中的Dynamic，但我不知道如何使用它。
这是工作代码：

import { SearchIcon } from "@heroicons/react/outline";
import { useState } from "react";
import News from "./News";
import { AnimatePresence, motion } from "framer-motion"; 
import dynamic from 'next/dynamic'

export default function Widgets({newsResults}) {
  const[articleNum, setArticleNum] = useState(3);
  return (
    <div className="xl:w-[600px] hidden lg:inline ml-8 space-y-5">
        <div className="w-[90%] xl:w-[75%] sticky top-0 bg-white py-1.5 z-50">
            <div className="flex items-center p-3 rounded-full bg-red-300 relative">
                <SearchIcon className="h-5 z-50 text-gray-500 "/>
                <input className="absolute inset-0 rounded-full pl-11 border-gray-500 text-gray-700 focus:shadow-lg focus:bg-white bg-gray-100" type="text" placeholder="Search" />
            </div>
        </div>

        {/* <div className="text-gray-700 space-y-3 bg-gray-100 rounded-xl pt-2 w-[90%] xl:w-[75%]">
            <h4 className="font-bold text-xl px-4">Whats happening</h4>
        <AnimatePresence>
        {newsResults.slice(0,articleNum).map((article)=>(
          <motion.div key={article.title} initial={{opacity: 0 }} animate={{opacity: 1}} exit={{opacity: 0}} transition={{duration: 1}}>
           <News key={article.title} article={article}/>
           </motion.div>
        ))}
        </AnimatePresence>
        <button onClick={()=>setArticleNum(articleNum + 3)} className="text-rose-300 pl-4 pb-3 hover:text-rose-400">Show more</button>
        </div> */}
        <div className="text-gray-700 space-y-3 bg-gray-100 pt-2 rounded-xl w-[90%] xl:w-[75%]">
          <h4 className="font-bold text-xl px-4">Capacity</h4>
          <div class="container">
            <div class="circular-progress">
            <span class="progress-value">0%</span>
            </div>
            <span className="text">test1</span>
              <div class="circular-progress">
              <span className="progress-value">0%</span>
            </div>
            <span className="text">test2</span>
            <div class="circular-progress">
              <span className="progress-value">0%</span>
            </div>
            <span className="text">test3</span>
            <button className="text-rose-300 pl-4 pb-3 hover:text-rose-400">Show more</button>
          </div>
        </div>
    </div>
  )
}