문제

방금 authentication을 연습하다가 신기한 에러를 발견했다. 모든 코드가 정상적인데도 불구하고, redirect() 함수를 사용하니까 try/catch의 catch에서 에러가 잡힌것이다. 그래서 찾아보니 다음과 같은 답을 얻을 수 있었다.

왜?

Next.js의 redirect() 함수는 내부적으로 에러를 발생시키는 방식으로 작동한다. 이는 Next.js의 서버 측 라우팅 메커니즘의 일부라서 Next.js를 사용하는 개발자가 어찌 당장 수정할 수 있는 것이 아니다.

원래는...

서버 측에서 리다이렉트를 수행하려면, 서버는 클라이언트에게 특정 URL로 이동하라는 지시를 내려야하는데, 이 지시는 HTTP 응답의 일부로 전달되고, 이를 위해서 서버는 클라이언트에게 3xx 상태 코드(status code)와 함께 Location 헤더(header)를 보낸다.

그래서...

Next.js에서는 이 과정을 단순화하기 위해 redirect() 함수를 제공한다. 이 함수는 내부적으로 에러를 발생시키고, 이 에러는 Next.js에 의해 감지되고, 이에 따라 적절한 HTTP 응답이 생성된다.

이 "HTTP 응답"은 앞서 언급한 3xx 상태 코드와 함께 Location 정보가 포함된 Header를 갖고 클라이언트로 보내주게 되고, 이를 통해 클라이언트는 리다이렉트 대상 URL로 이동하게 되는것이다.

결국...

redirect() 함수가 에러를 발생시키는 것은 Next.js의 서버 측 라우팅 메커니즘 이므로, 이 문제를 해결하기 위해서 redirect() 함수를 try/catch 블록 외부에서 호출하거나, finally() 블록 내부에서 호출해야 한다. 굳이 서버에서 리다이렉트를 하지 않아도 된다면, 적절한 응답을 클라이언트에 내려주고, 그 응답에 따라 클라이언트에서 useRouter hook 등을 사용하는 것도 괜찮을 것이다.