如何从 NextJS 中的另一个页面平滑滚动到锚标记？

Question

I have 2 pages in my NextJS (1 is Home and another is Leaderboard page). And I have a navbar as such:

<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>

I thought that maybe by using a setTimeout delay it would, redirect me first to the homepage (when I click the Link tag) and then, after 2 seconds, it would smooth scroll me to the section I wanted to go to. But this produces an error document is not defined and when I reload the page, the page would smooth-scroll to #program after 2 seconds even without clicking on the tag. What am I doing wrong?

ERROR (ON 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") &&

Answer 1

Your problem is you call setTimeout directly which is executed right away on the server (more specifically, NextJS does not have window and document objects on the server-side) that's why document is not available.

You should wrap it into a function like below and onClick will be only triggered once you click on that element

<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>