Next.js 15 단일 앱으로 구현한 멀티테넌시 아키텍처 설계

I Built a Multi-Tenant Website Builder with One Next.js App. Here's the Architecture.

Zenpage2026년 4월 5일8분intermediate

AI 요약

Context

단일 코드베이스로 관리자 대시보드와 다수의 사용자 사이트를 동시 제공해야 하는 요구사항 발생. 서브도메인 및 커스텀 도메인 기반의 유연한 라우팅 체계 필요. 서비스 확장 시 배포 복잡도를 낮추기 위해 단일 배포 구조 지향.

Next.js Middleware를 활용한 호스트네임 검사 및 다이내믹 루트 리라이트(Rewrite) 기반 라우팅 설계
Route Groups를 적용하여 관리자 대시보드와 사용자 사이트의 레이아웃 및 로직을 완전히 분리한 구조
CSS Custom Properties와 typed registry를 결합하여 컴포넌트 수정 없이 테마 교체가 가능한 템플릿 시스템 구축
Tailwind v4의 @layer 우선순위 문제를 해결하기 위해 sanitized HTML 렌더링 시 인라인 style 태그를 사용하는 우회 전략 채택
Sharp 라이브러리의 withoutEnlargement 옵션 적용 및 콘텐츠 타입별 해상도 차등 제한을 통한 이미지 최적화 파이프라인 구축
tRPC와 SuperJSON을 결합하여 Date, Map, Set 등 복잡한 타입의 직렬화 문제를 해결한 API 계층 설계

인프라 복잡도를 낮추기 위해 미들웨어 기반의 호스트네임 라우팅과 루트 그룹 분리를 활용한 효율적인 멀티테넌시 설계 방식. 검증된 라이브러리 대신 커스텀 파서를 구현하는 것은 유지보수 비용을 급격히 증가시키므로 기존 생태계 도구 우선 고려 원칙 준수.

실천 포인트

Next.js 멀티테넌시 구현 시 Middleware의 URL Rewrite와 Route Groups를 조합하여 논리적 앱 분리를 달성할 것

태그