Tengo 2 páginas en mi NextJS (1 es Inicio y otra es la página de clasificación). Y tengo una navbar de navegación como tal:
<div className={styles.navItem}> <Link href="/"> <a className={styles.navLinks} onClick={toggle}> Home </a> </Link> </div> <div className={styles.navItem} onClick={toggle}> <Link href="/"> <a className={styles.navLinks} onClick={setTimeout((e) => { document.getElementById("about") && document .getElementById("about") .scrollIntoView({ behavior: "smooth", block: "end" }); }, 2000)} > About Us </a> </Link> </div> <div className={styles.navItem} onClick={toggle}> <Link href="/"> <a className={styles.navLinks} onClick={setTimeout((e) => { document.getElementById("program") && document .getElementById("program") .scrollIntoView({ behavior: "smooth", block: "end" }); }, 2000)} > Program Overview </a> </Link> </div> <div className={styles.navItem}> <Link href="/leaderboard/"> <a className={styles.navLinks} onClick={toggle}> Leaderboard </a> </Link> </div> Pensé que tal vez al usar un retraso setTimeout me redirigiría primero a la página de inicio (cuando hago clic en la etiqueta Link ) y luego, después de 2 segundos, me desplazaría suavemente a la sección a la que quería ir. Pero esto produce un document is not defined y cuando vuelvo a cargar la página, la página se desplazaría suavemente a #program después de 2 segundos, incluso sin hacer clic en la etiqueta. ¿Qué estoy haciendo mal?
ERROR (EN TERMINAL)
error - components/main/Nav/MenuRight.js (18:23) @ Timeout.eval [as _onTimeout] ReferenceError: document is not defined 16 | <Link href="/"> 17 | <a > 18 | className={styles.navLinks} | ^ 19 | onClick={() => 20 | setTimeout((e) => { 21 | document.getElementById("about") &&Su problema es que llama directamente a setTimeout , que se ejecuta de inmediato en el servidor (más específicamente, NextJS no tiene objetos de window y document en el lado del servidor), por eso el document no está disponible.
Debe envolverlo en una función como la siguiente y onClick solo se activará una vez que haga clic en ese elemento
<div className={styles.navItem}> <Link href="/"> <a className={styles.navLinks} onClick={toggle}> Home </a> </Link> </div> <div className={styles.navItem} onClick={toggle}> <Link href="/"> <a className={styles.navLinks} onClick={(e) => { setTimeout(() => { document.getElementById("about") && document .getElementById("about") .scrollIntoView({ behavior: "smooth", block: "end" }); }, 2000) }} > About Us </a> </Link> </div> <div className={styles.navItem} onClick={toggle}> <Link href="/"> <a className={styles.navLinks} onClick={(e) => { setTimeout(() => { document.getElementById("program") && document .getElementById("program") .scrollIntoView({ behavior: "smooth", block: "end" }); }, 2000) }} > Program Overview </a> </Link> </div> <div className={styles.navItem}> <Link href="/leaderboard/"> <a className={styles.navLinks} onClick={toggle}> Leaderboard </a> </Link> </div>