기존 서비스의 구성은 아래와 같았다. 구매 페이지인 고객용Client와 사장님용 Client로 Frontend Client가 나눠져 있었고, Notion API를 호출해주는 Backend 서버가 존재했다. 모든 개발을 혼자 담당하고 있는 상황에서 분산된 서비스들을 관리하면서 시간이 많이 낭비되었다.
특히 Express.js에 익숙하지 않아 end point가 늘어날수록 코드가 너무 보기 어려워졌다. 확장성을 고려한다면 개선이 필요한 시점이였다.
현재 서비스 특성상 Serverless Function만으로도 충분히 구현 가능하다고 판단했다. Next.js의 Route Handlers를 활용하면 손쉽게 구현할 수 있었다. Vercel을 통해 배포하고 있는 상황에서는 end point만 만들어준다면 다른 작업이 필요없는 상황이였다.
추가로 직접 백엔드 서버를 빌드하고 배포할때보다 빠른 배포, 테스트가 가능했고 환경변수 추가 및 삭제에서도 큰 이점을 가지고 있었다.
가볍게 공식문서를 통해 공부한 후 바로 구현해보기로 하였다. 아래 코드처럼 복잡하게 구현된 Express.js 코드를 Next.js로 이전할 시간이다.
< Express.js 로 구현된 복잡하게 나뉜 route>
< Next.js로 폴더단위로 깔끔하게 나뉜 route>
우선 app/api 밑에 밀요한 route들을 폴더로 만들고 각 폴더에 route.ts 파일을 생성해 주었다. 자세한 설명은 아래 문서를 참고하자
각 파일에 필요한 기능들을 구현 하면 된다. 예를들어 auth와 관련된 기능들은 auth/route.ts에 모아두었다.