상황

1. 이메일로 채팅방 초대 메일 들어옴
2. "채팅방 바로가기"버튼 클릭 시 대화중이던 채팅방으로 연결
3. 채팅방은 로그인한 사람만 이용할 수 있음. 이메일에서 넘어오는 경우 token이 발급되지 않은 상태이기에 로그인 페이지로 redirection됨
4. 로그인페이지에서 로그인 진행
5. 로그인 진행 시 "무조건 메인페이지로 이동"되게끔 구현되어있음
   => 불편하다!

해결 방법

엥간한건 query를 활용하여 처리하기

Next/router의 치명적인 단점은..(react-router대비) 바로.. router에 history객체가 따로 존재하지 않는다는 것이다...!
그래서 이 경우도, 없는 history를 야매로 만들어내어 있는 척 작업을 하였다.

1. 처음 접속되는 경로를 기억했다가 로그인 페이지로 이동했을 때 쿼리로 남아있게 하기

쿼리를 활용할 예정이기에, 우선 첫 경로를 asPath로 받는다.
그 다음에 해당 경로로 query를 생성해 push한다.

// 처음 접속하는 페이지(인증 필요)

const router = useRouter();
const currentURL = router.asPath; // asPath에는 현재 접근 페이지의 절대경로를 보여준다 (dynamic route여도 딱 지금 순간의 값으로 보여줌)
if(!authorization) {
  router.push(`/login/?returnUrl=${currentURL}`) //query작성 시 /? 이렇게 적는다
}

2. query로 넘어간 값을 로그인 페이지에서 받아 로그인 성공 시 해당 주소로 push시키기

// 로그인 페이지

// ~~~각종 로그인 로직

const router = useRouter();
const { returnUrl } = router.query; // redirection할 url을 쿼리로 받아온다
const result= await axios.post("로그인 url", "로그인데이터");
if(result) {
  if (router.query.returnUrl) { // redirection 경로가 있을 떄만 redirection 되도록 처리
    router.push(returnUrl) 
  } else {
    window.location.href = '/'
  }
}

3. 처음에 쿼리를 설정해줄 때 어떤 페이지에 접근할 때에만 redirection query를 사용할지 설정해두기

이것을 하지 않으면 모든 페이지에서 redirection이 일어난다.
꼭 필요한 페이지에서만 사용되도록 처리할 것.

// 처음 접속하는 페이지
const router = useRouter();
const currentURL = router.asPath; 
if(!authorization) {
  if(router.pathname === "/chat") { // /chat 페이지에 접속했을 때만 redirection 일어나도록 조건을 걸었다.
  router.push(`/login/?returnUrl=${currentURL}`)
  }
}

후기

next/router를 사용하다보면 웬만한 것은 query로 처리를 하게 되는데, 처음 query를 처리하다보니까 고전했다..;_;
이게 뭐라고 2시간 걸려서 만들다니...
그래도 역시 한번 만들고 나니까 참 별거 아니구나 싶었다.
또 router에 상당히 좋은 기능들이 많아서 (가령 asPath나 basePath...) 잘 사용하면 react-router-dom보다 더 심플하게 사용할 수 있을 것 같다.
물론..query로 전달되다보니 외부에 정보 유출 위험이 있으니 주의할 필요가 있다.
이는 이전에 작성한 포스트에서 언급했듯이 SSR로 가급적 처리하거나 component에서 재인증 절차를 거치도록 주의해아 한다.

항상 작업 시에, 유출 시 위험한 로직, 정보인가? 유념하며 작업해야겠다.