1. 문제상황

• 사용자의 로그인 여부를 판별하기 위해 (afterLogin)폴더를 만든후 layout.tsx 파일에서 로그인 여부를 판별하는 코드를 작성
• 만약 로그인 하지 않았을 시 로그인 페이지로 redirect함
• 로그인을 진행후엔 홈화면으로 이동
• 하지만 로그인후에는 정상적으로 원하는 페이지로 route되어야하지만 다시 로그인 페이지로 이동함

문제상황

기존 코드

2. 문제인식

• 로그인 후 홈화면에서 새로고침을 한다면 정상적으로 원하는 페이지로 이동가능
• 토큰이 제대로 심어졌는지 확인 => 심어짐
• (afterLogin) 페이지의 layout에서 유저데이터로 로그인여부 코드가 작성하는지 console.log로 확인 => 정상적으로 코드가 실행됨
• 이동하려는 페이지의 코드가 실행되는지 확인하기위해 이동하고자하는 페이지의 layout.tsx에 console.log로 확인 => 실행되지않음

=> 정리 : 로그인이 제대로 되고있으며, 토큰도 제대로 심어지지만, 원하는 페이지의 코드는 제대로 실행되지 않으므로 next.js의 어딘가에 저장된 어떤 캐시때문으로 추측

3. 해결노력

• next.js는 공식문서에 나온것과 같이 한번 page가 miss된다면 페이지를 캐싱시킨후 재방문 시 캐싱된 경로로 이동한다.
  => 그럼 캐싱된 경로를 지우자첫번째 해결노력

  setTimeout(() => {
        location.reload();
      }, 1000);

• 로그인을 성공한다면 setTimteout을 통해 새롭게 캐싱을 시작한다.
  => 이 방법은 성공하였지만 로그인후 홈화면으로 이동한다음 몇초후에 새로고침을 하는 방법은 ux적으로 굉장히 안좋다고 생각이 들었다.

4. 최종해결노력

• next.js는 router.refresh를 통해 라우트 캐시를 초기화하는 메서드를 제공하고 있었다.

  

import { useRouter } from "next/navigation";
router.refresh();

짜잔

5.정리

• 로그인하지 않았을 시 로그인 페이지로 redirect되고 next.js는 그 해당 라우트경로를 캐싱하였기때문에 재방문 시 로그인 유무와는 무관하게 로그인 페이지로 redirect한것이 문제였다. 그리고 로그인성공 시 router.refresh()코드를 통해 모든 라우트 경로 캐싱을 무효화시켜 해결하였다.