getInitialProps not running on client render

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14.17.1

What browser are you using?

Chrome , Edge, Firefox

What operating system are you using?

Windows 10

How are you deploying your application?

Vercel

Describe the Bug

getInitialProps is running on the server but not on the client.

Expected Behavior

getInitialProps should run whenever router.push or router.replace or next/link component is used.

To Reproduce

Where the getInitialProps is called.

Login.getInitialProps = async (ctx) => {
  console.log("running");
  return {};
  // return await UnAuthenticatedRoute(ctx);
};

This is where Router is called

 React.useEffect(() => {
    if (auth) {
      if (auth.user?.verifiCationStatus != "approved") {
        Router.push("/verify");
      }
      return;
    }
    Router.replace("/login");
  }, [auth]);

When the link is called

<Link href={auth ? "/my-account" : "/login"}>
          <div>
            <div className={style.hamburgerMenuItem}></div>
            <div className={style.hamburgerMenuItem}></div>
            <div className={style.hamburgerMenuItem}></div>
          </div>
        </Link>

[masx200]

https://www.nextjs.cn/docs/api-reference/data-fetching/getInitialProps

For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router. However, if getInitialProps is used in a custom _app.js, and the page being navigated to implements getServerSideProps, then getInitialProps will run on the server.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.