No router instance found. you should only use "next/router" inside the client side of your app.

빌드 시에 발생한 오류

Exporting (4/22)Error: No router instance found. you should only use "next/router" inside the client side of your app.

Error occurred prerendering page "/user/mypage".
Error: No router instance found. you should only use "next/router" inside the client side of your app.

Error: Export encountered errors on following paths: /user/mypage

문제 발생

(mypage.tsx)

if (!authenticate) {
  router.push('/login');
  message.warning('로그인 해주세요.');
  return;
}

처음에 authenticate이 없는데 next/router로 로그인페이지로 이동하라고하니 에러가 발생한 모양?

---

useEffect(() => {
  if (!authenticate) {
    router.push('/login');
    message.warning('로그인 해주세요.');
    return;
  }
}, [accessToken, router]);

useEffect로 감싸줬더니 오류가 발생하지 않는다.
하지만 마이페이지가 0.1초 나왔다가 사라지면서 로그인페이지로 간다.
보이지 않고 바로 사려졌으면 하는게 내가 구현하고 싶은 것

---

해결

(mypage.tsx)

if (!authenticate) {
  return <PrivateRoute />;
}

(PrivateRoute.tsx)

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';

const PrivateRoute = () => {
  const router = useRouter();
  useEffect(() => {
    router.push('/login');
  }, [router]);
  return <></>;
};

export default PrivateRoute;

Private페이지를 만들어서 이동시키고 이 페이지에서 로그인페이지로의 라우팅을 적용

다른 문제 발견

이렇게 하니까 마이페이지에서 새로고침 시 바로 로그인페이지로 튕긴다.
프로젝트에서 필요없는 부분이되어서 그냥 저런식으로 해결한다는 정도만 알고가자