nextjs middleware 에서 protected route 처리 하는 방법이 궁금합니다

Question

middleware 에서 토큰 인증에 따른 redirect 를 구현 할려고 합니다

제가 생각한 로직은 인증이 필요한 페이지는 
accesstoken을 쿠키에서 받아오고 
토큰이 없거나, 인증이 실패하면 login 페이지로 이동,

토큰이 만료된 경우에는 refresh 요청이후 accesstoken,refreshtoken 재발급 이후 원래 이동할려는 페이지로 이동

이렇게 생각중인데 다만 하나 걸리는게

middleware에서 refresh api 요청을 하는게 과연 올바를까? 궁금합니다
그럼에도 굳이 middleware 에서 할려는 이유는

page단 에서 처리할경우에는 결국에는 한번 그 페이지로 이동했다가 처리되는거라 깜빡이는 이슈가 생겨서 그렇습니다

보통 어떤식으로 처리하는지 궁금해요

허니 · Answer

네 미들웨어에서 하시면 됩니다. 어차피 서버 컴포넌트에서는 쿠키를 설정할 수 없습니다. 또는 클라이언트 측에서 서버 액션이나 라우트 핸들러를 호출하여 구현할 수도 있습니다

김혁진 · Answer

저는 middleware에서 refresh api 요청하는게 효율적잊 않다고 생각해요!

1. Refresh api 를 호출해도 쿠키를 업데이트 할 수 없음
2. 무한 루프의 가능성이 있음
3. edge runtime에서 실행되므로 부적절함

대신 미들웨어에서 accessToken을 확인하고 없으면 로그인 페이지로 리디렉트하는 방식이 더 효율적이라고 생각됩니다!

이때 깜박임을 해결하려면 next.js 의 버전이 13v 이하라면 getSeverSideProps 를 활용해보시고 14v 이상이라면 서버컴포넌트와 미들웨어, api 라우트를 조합하여 깜박임을 최소화하시고 로딩화면을 이용하시는게 효율적인 방법이라고 생각됩니다!