[Next.js] Middleware사용시 API Routes 이슈

이 글을 쓰게 된 배경

저는 AWS의 Amplify를 이용하여 도메인을 서빙하였는데, Amplify의 이슈인지 Middleware의 이슈인지는 정확하게 판단이 서질 않습니다. 그렇지만 Amplify는 아직 Next.js의 모든 기능을 지원해주지 않기 때문에 기록해봅니다.

 

Middleware의 matcher가 고장의 원인

https://nextjs.org/docs/advanced-features/middleware

공식 홈페이지에서 middleware의 matcher의 활용법으로 여러가지 방식을 공유하고 있습니다. 서비스를 구축하면서 미들웨어에 해당 matcher를 사용했더니 API routes가 동작하지 않는 문제가 발생하였습니다. API Routes의 경우는 문제가 생길경우 Proxy서버 내부에서 발생하기 때문에 에러로그를 볼 줄 모른다면 블랙박스 영역에서 문제가 생겨 디버깅이 상대적으로 어려웠던 문제가 있는데 요청의 BASE_URL이 계속해서 undefined로 찍혀서 의아하던 찰나에 이러한 내용을 발견하였습니다.

 

https://github.com/vercel/next.js/discussions/38615

동작을 하지않는다? 실제로 나와 비슷한 상황을 겪고 있는 사람이 있는걸로 봐서는 아직까지는 완벽하지 않은 것 같습니다. 실제로 해당 matcher를 제거하니 API Routes 기능이 동작을 잘하였습니다. 이를 어떻게 해야하나? 브라우저에 진입이후에 Guard컴포넌트를 두고 싶진 않아서 미들웨어를 이용하고 있던 터라 해결하고 싶었습니다.

 

해당 글의 몇개월 전 댓글로 제시한 방식을 Middleware의 가드문으로 작성했더니 원하는 방식으로 정상 동작을 하여 정상적으로 기능들을 이용할 수 있게 되었습니다.