Next.js 인터셉터 질문드립니다

Question

Next애서 인터셉터 구현할때 getserversideprops에서 사용하는 axios 인터셉터와 클라이언트 컴포넌트에서 사용하는 인터셉터를 따로 구현해야 하나요? 리액트에서 사용하던 인터셉터 로직을 가져와서 적용해봤는데 클라이언트 컴포넌트에서만 작동해서 질문드립니다.

혹시 맞다면 서버 컴포넌트쪽은 어떤식으로 구현하는지 알려주시면 감사하겠습니다. 인터셉터 용도는 사버에서 요청해서 응답으로 받은 엑세스 토큰을 헤더에 넣고 토큰이 유효한지 검사하는 용도이고 page router기반입니다.

손정현 · Accepted Answer

안녕하세요!

서버 쪽 에러 예시랑 코드가 어떻게 구현되어있는지 몰라서 상세한 답변을 드릴 수 없는 점 양해 부탁드려요. 우선, axios interceptor를 getServerSideProps에서 쓸 수 있어요.

예상되는 문제점 및 해결 방법:
- axios.interceptor가 디폴트로 async 하게 돌아가서 await을 걸어줘야하거나 sync로 돌게끔 설정해줘야함 (https://axios-http.com/docs/interceptors)

참고 자료:
- https://stackoverflow.com/questions/73611326/nextjs-ssr-axios-global-header-getserversideprops
- https://github.com/axios/axios/issues/3870

추가적으로 next.js 에서도 요청이 전달되기 전에 돌아가는 middleware를 설정해줄 수 있어요.
- https://nextjs.org/docs/pages/building-your-application/routing/middleware

구현 코드 예시나 상세한 에러 설명이 있다면 다른 분들이 답변 다시는데 도움이 될 것 같아요 :)