Lighthouse 100% 달성, API 중심의 고성능 Next.js 16 기반 엔터프라이즈 스타터 킷

Context

기존 Next.js 보일러플레이트들이 제공하는 과도한 DB 의존성 혹은 부족한 초기 설정으로 인한 개발 생산성 저하 발생. 특히 백엔드가 이미 존재하는 환경에서 DB 레이어를 제거하는 과정의 높은 비용과 반복적인 인프라 설정 작업이 병목 지점으로 작용.

Technical Solution

• API-first 설계로 DB 소유권을 제거하여 REST/GraphQL/BFF 등 다양한 백엔드와의 유연한 결합 구조 확보
• Feature-Based Architecture 적용을 통해 src/features 하위에 도메인별 수직 슬라이스로 모듈화하여 유지보수성 강화
• BetterAuth와 Server-side Guard(requireUser, requirePermission)를 통한 RBAC 기반의 정교한 권한 제어 구현
• next-intl 기반의 Cookie-based i18n 전략을 채택하여 URL Prefix 없이 단순한 라우팅 구조 유지
• Zod로 검증된 custom ofetch wrapper인 apiFetch Client를 구축하여 런타임 타입 안정성 확보
• Server Components 우선 렌더링과 Client-side JS 최소화를 통한 렌더링 성능 최적화

Impact

• Lighthouse 성능 및 SEO 점수 100% 달성
• 6개 국어(LTR/RTL 포함) 다국어 지원 환경 구축

Key Takeaway

프론트엔드 아키텍처에서 DB 레이어를 분리한 API 소비 중심으로 설계함으로써 백엔드 독립성을 확보하고, 기능 중심의 폴더 구조를 통해 대규모 서비스 확장에 유연한 대응이 가능함.