1. 현재 상황
미들웨어에서 액세스 토큰 재발급 시도
Next.js app router를 사용하고 있으며, 백엔드가 아직 개발되지 않은 상황에서 MSW(Mock Service Worker)를 사용하여 백엔드 요청을 모킹(mocking)하고자 했다.
middleware.ts 파일에서 사용자의 요청을 처리하기 전에 액세스 토큰이 만료된 경우 리프레시 토큰을 사용해 새로운 액세스 토큰을 발급받는 작업을 수행하려 했다. 이 작업은 미들웨어에서 fetch 요청을 통해 MSW 핸들러를 호출하여 처리하려고 했다.
Next.js Middleware란?: Routing: Middleware
2. 문제 발생
- MSW를 사용하여
middleware.ts내부에서 Fetch 요청을 모킹하려 했으나, MSW가 Next.js의 Edge Runtime 환경에서 정상적으로 작동하지 않는 문제가 발생하였다. middleware.ts는 Edge Runtime에서 실행되며, 이는 MSW가 의존하는 Node.js API(http,https)를 지원하지 않는 환경이다.
Edge Runtime이란?
3. 문제의 원인
3.1 Next.js Middleware의 Edge Runtime
- Next.js의
middleware.ts는 Edge Runtime에서 실행된다. - Edge Runtime은 다음과 같은 특징을 가진다:
- Node.js가 아닌 V8 JavaScript 엔진 위에서 실행된다.
- Web 표준 API를 준수하며, Node.js API(
http,https등)는 지원하지 않는다. - 가볍고 빠른 서버리스 환경에 최적화되어 있다.
- MSW의 호환성 문제:
MSW는 Node.js의http모듈에 의존하여 요청을 가로채도록 설계되었다. Edge Runtime에서는 이러한 Node.js API가 지원되지 않아 MSW가 작동하지 않는다.
3.2 MSW와 Edge Runtime의 호환성
- MSW는 Edge Runtime에서 사용할 수 없으며, 관련 논의가 지속되고 있다.
- GitHub Discussions #1429: Edge Runtime에서 MSW의 FetchInterceptor 기반 구현에 대한 제안이 있었으나, 구현되지 않았다.
- GitHub Issue #1644: MSW와 Next.js App Router의 호환성을 논의하였으나, Next.js의 내부 구조 문제로 인해 미완료 상태이다.
4. 대책
현재 클라이언트 단에서 MSW(Mock Service Worker)를 활용하여 로그인 시 토큰 발급이 정상적으로 이루어짐을 확인하였다. 그러나, Next.js의 middleware.ts에서 MSW 핸들러를 사용한 액세스 토큰 재발급 fetch 요청이 실패하는 문제가 발생하였다. 이는 Next.js의 Edge Runtime이 MSW의 Node.js 기반 인터셉터(setupServer)와 호환되지 않기 때문이다. 따라서 미들웨어에서 Mock API로 액세스 토큰을 재발급받는 기능을 구현하기 위해 대체 방안이 필요하다.
4.1 문제 해결 방안
- Express 서버를 사용한 대안
- 구현 방식: Express 기반의 Mock 서버를 로컬에서 실행하고, 미들웨어에서 해당 서버로 액세스 토큰 재발급 요청을 보냄.
- Next.js Route Handlers를 사용한 대안
- 구현 방식: Next.js에서 제공하는 Route Handlers를 활용하여
/api/auth/refresh엔드포인트에 Mock API를 구현.
- 구현 방식: Next.js에서 제공하는 Route Handlers를 활용하여
4.2 결론: Express 서버 대신 Next.js Route Handlers 사용
- 이유
- MSW로 충분히 대체 가능: Mock API를 Express 서버로 구현하기보다는, Next.js의 Route Handlers와 MSW의 조합으로 프론트엔드 개발에 필요한 모든 Mock 기능을 충분히 제공할 수 있다. Express 서버를 추가로 사용하는 것은 불필요한 작업이다.
- 백엔드 대체가 목표가 아님: Express 서버는 백엔드를 대체하거나 복잡한 로직을 구현할 때 유용하지만, 현재 프로젝트는 백엔드 대체가 목표가 아니라 단순한 Mock API를 제공하는 것이 목적이다. 따라서 Express 서버를 사용하는 것은 과도한 설정과 유지보수를 요구한다.
- 목적이 Mock API 구현: Mock API만 필요하다면, Express 서버를 띄우는 작업은 과도한 작업으로 판단된다. Next.js Route Handlers를 활용하면 간단한 설정으로 필요한 Mock API를 구현할 수 있다.
- 추가 작업 최소화: Express 서버 설정 및 MSW 연동 작업은 불필요한 복잡성을 초래한다. Route Handlers는 Next.js 내에서 바로 구현할 수 있어 시간과 노력을 절약할 수 있다.
Next.js Route Handlers란?: Routing: Route Handlers
