계약직·정규직 제안 모두 열려 있습니다(토론토 · 리모트 협업)대화 나누기
확장 가능한 Next.js 아키텍처 설계

2024년 3월 1일

확장 가능한 Next.js 아키텍처 설계

nextjsarchitecturescalabilityapp-router

트래픽만 버티는 것이 아니라, 기능과 팀 규모가 커져도 유지 가능한 Next.js 아키텍처를 어떻게 설계할지 정리한 글입니다. App Router 폴더 구조, 서버/클라이언트 역할 분리, 캐싱/렌더링 전략, UI/타입 레이어 구성까지 실무 관점에서 다룹니다.

1트래픽, 기능, 팀 세 가지 관점에서 스케일링을 어떻게 나눠서 봐야 하는지 설명한다.
2App Router를 도메인 기준(마케팅, 앱, 관리자 등)으로 나누고, 공통 코드를 src 아래로 분리하는 폴더 구조 예시를 제시한다.
3서버 컴포넌트/서버 유틸/클라이언트 컴포넌트를 분리해서 확장성과 테스트 용이성을 높이는 패턴을 소개한다.
4SSG/ISR/SSR, revalidate 옵션을 섞어 쓰면서 데이터 특성에 맞게 렌더링/캐싱 전략을 선택하는 방법을 설명한다.
5DB/외부 서비스 관점에서의 병목과, 팀 스케일을 위한 UI 프리미티브/feature 모듈/공유 타입 구조를 다룬다.