들어가기 전에
어떤 걸 작성해볼까 고민하다가 시험기간이기도 하고 최근에는 문서 작업도 많이 해놓지 않았다 보니 시간이 없어서 예전에 작성해둔 트러블슈팅 문서를 찾아보았다.
그러다가 발견한 것을 들고 왔는데, 사실 당시에는 Next.js에 대해 깊이 이해를 한 것도 아니었고(지금도 깊은 건 아니지만^ㅁ^) 문제가 생기면 그냥 얼른 땜질처리로라도 하고 넘어가야 했기 때문에 완전한 해결책은 아닐 수도 있겠다 싶다.
하지만 트러블슈팅를 했던 경험을 그냥 과거에 묻어 두기에는 아까워서 발굴해보았다.
문제 상황
다른 기능 동작들은 정상 처리되는데 로그아웃만 하면 계속 콘솔에 에러가 뜨는 상황!
원인
server action으로 로그아웃을 처리할 때 서버에서 로그아웃 정상 처리 응답을 받으면 회원 페이지 외부로 redirect 처리를 하고 있었다.
그런데 redirect가 try-catch의 try 내부에서 처리되는 중이었고, 이 부분에서 발생!
Next.js에서는 redirect가 에러 던지기로 처리되고 있는데, 그것 때문에 자꾸 콘솔에 에러가 뜨는 거였다.
이 부분은 Next.JS 공식문서에도 redirect()를 서버 컴포넌트에서 쓰는 예제에 나와 있는 부분이다.
해결 방법
- server action 내부를
try - catch로 감싼 건 그대로 유지 redirect를 로그인 페이지의layout에서 하도록 로직 수정
해결 방법에 대한 추가 코멘트
사실 위 해결 방법은 작업 당시의 프로젝트 구조에 맞추어서 했던 것이라서 완벽한 해결 방법은 아니다.
지금은 로그아웃을 서버 액션으로 처리하고 있지 않고, 다른 방식으로 처리중이다. 로그인과 로그아웃 기능 동작 구현이 전체적으로 처음과는 좀 달라졌기 때문이다.
Next.js는 서버 컴포넌트에서 redirect 사용 시, 이것이 에러 던지기로 처리되는데 그 부분 때문에 isRedirectError 메서드를 제공하고 있다. 특히, try - catch를 이용하고 있다면 isRedirectError 메서드를 이용해서 별도로 에러 처리를 할 수 있다!
참고
https://stackoverflow.com/questions/78081043/error-next-redirect-using-redirect-in-nextjs-14-while-trying-to-redirect
https://velog.io/@thumbzzero/Fittering-개발-기록-Next.js-13-redirect-관련-트러블-슈팅
