Next.js API 라우트 마스터하기: 모듈화와 확장성을 고려한 설계

Next.js는 React 기반의 풀스택 웹 애플리케이션 개발을 지원하는 프레임워크입니다. 풀스택이라는 의미는 프론트엔드뿐만 아니라 백엔드 코드도 작성할 수 있다는 것을 의미하는데요. Next.js는 내장된 Node.js 런타임 환경을 활용하여 서버 사이드 코드, 즉 백엔드 서버를 실행할 수 있습니다. 이를 통해 개발자는 별도의 백엔드 서버를 구축하지 않고도 독립적으로 동작하는 API를 생성할 수 있습니다.

Next.js에서는 pages/api 디렉토리 내부의 파일들이 /api/* 경로에 매핑되어 페이지 대신 API 엔드포인트로 처리됩니다. 이러한 API 라우트는 서버리스 함수(Serverless Function)로 구성되어 있는데요. 서버리스 함수는 요청이 들어올 때마다 지정된 함수를 실행하여 원하는 API 응답을 클라이언트에게 전달하는 방식으로 동작합니다. 따라서 웹 소켓과 같은 지속적인 연결은 유지할 수 없습니다. 서버리스 함수는 지속적인 연결을 유지하지 않도록 설계된 모델이기 때문입니다.

그러나 서버리스 함수는 인프라 관리의 부담을 줄일 수 있고, 요청이 들어올 때만 함수를 실행하므로 비용 효율적입니다. 또한 캐싱에도 유용하게 활용될 수 있습니다. 뿐만 아니라 데이터베이스와의 통신도 가능하므로 다양한 기능을 구현할 수 있습니다.

소개 드리는 블로그 글은 Next.js의 API 라우트 구조를 효과적으로 설계하는 방법에 대해 다루고 있습니다. 파일명에 '_' 접두어를 사용하여 API 엔드포인트를 생성하지 않도록 하거나, pages 폴더 외부에 API 라우트 파일을 위치시키는 방법 등을 소개합니다. 또한 하나의 파일 내에서 분기문으로 GET과 POST 메서드를 구분하는 대신, GET.ts와 POST.ts와 같이 메서드 별로 파일을 분리하는 방법도 소개합니다.

대규모 프로젝트나 마이크로서비스 아키텍처(MSA)를 사용하는 경우, Backend for Frontend(BFF) 계층이 필요할 수 있는데요. 이때 Next.js의 API 라우트를 활용하여 데이터 가공 레이어로 사용할 수 있습니다. API 라우트 코드를 더욱 모듈화하고 재사용성을 높이고자 한다면, 해당 블로그 글에서 제시하는 방법들을 참고하는 것을 추천드립니다.

https://pozafly.github.io/nextjs/about-modularizing-api-routes-code-in-nextjs/