Estoy tratando de representar la NUBE DE TEXTO en mi aplicación Nextjs, pero se procesa en un tiempo infinito. Estoy usando Next JS. Por favor ayuda Aquí está el código y las capturas de pantalla:

 import dynamic from "next/dynamic"; import { useRef} from "react"; const container = '.tagcloud'; const texts = [ '3D', 'TagCloud', 'JavaScript', 'CSS3', 'Animation', 'Interactive', 'Mouse', 'Rolling', 'Sphere', '6KB', 'v2.x', ]; const tag = { radius: 100, maxSpeed: 'normal', initSpeed: 'fast', direction: 135, keep: true } const Text_cloud=dynamic( () => { const refTag=useRef(); return <span ref={refTag}>{TagCloud(container,texts,tag)}</span>; }, { ssr: false } ); export default Text_cloud;

Estoy exportando este Componente y usándolo en otras habilidades de página:

 import React, { useState,useRef } from "react"; import Web from "../Component/web"; import Programming from "../Component/programming"; import Editing from "../Component/Editing"; import styles from "../styles/skill.module.css" import Btn from "../Component/btn"; import Text_cloud from "../Component/text_cloud"; function Skill() { const [skill, setskill] = useState("Web") return (<> <div className={styles.main}> <ul className={styles.ruler}> <a onClick={() => setskill("Web")} className={styles.skilla}><Btn name="Web Dev" /></a> <a onClick={() => setskill("Programming")} className={styles.skilla}><Btn name="Programming" /></a> <a onClick={() => setskill("Editing")} className={styles.skilla}><Btn name="Editing" /></a> </ul> <div className={styles.cld} > <div className="tagcloud" > <Text_cloud /> </div> </div> </div> {skill === "Web" && <Web />} {skill === "Programming" && <Programming />} {skill === "Editing" && <Editing />} </>) } export default Skill;

Después de ejecutar el servidor, obtengo este resultado y error: se procesa dos veces

Y el error que muestra es: Aquí está la captura de pantalla del error

por favor ayúdame aquí