피드로 돌아가기
Dev.toFrontend
원문 읽기
Next 16 기반으로 Day-90 생산성을 Day-1에 구현한 고집단 아키텍처 설계
I Rebuilt My Next.js Starter From Scratch on Next 16 — Here's Every Decision I Made (and Why)
AI 요약
Context
초기 설정 이후 프로젝트 성장 과정에서 반복적으로 발생하는 HTTP 클라이언트 런타임 오류, 환경 변수 검증 실패, SSR 상태 공유 등의 구조적 결함을 해결하려는 시도. 단순 라이브러리 조합을 넘어 프로덕션 단계에서 반드시 필요한 엔지니어링 기본값을 초기 템플릿에 내재화하는 것이 핵심 목적.
Technical Solution
- Biome 단일 바이너리 도입을 통한 ESLint, Prettier, Import-sort 통합으로 설정 복잡도 제거 및 빌드 속도 최적화
- zod 기반의 모듈 로드 시점 환경 변수 검증을 통한 런타임 에러 방지 및 Fail-fast 메커니즘 구축
- Either 패턴과 ApiException 도입으로 HTTP 통신 시 예외를 값으로 처리하여 런타임 Crash 방지
- SSR 환경 내 동시 요청 간 상태 간섭을 막기 위해 요청당 독립적인 Redux Store 생성 및 하이드레이션 구조 설계
- 'use client' 회귀 방지 센티넬을 도입하여 서버 전용 모듈(next/headers 등)의 클라이언트 번들 유입을 빌드 타임에 차단
- Socket.IO 레이어에 엄격한 SSR 경계를 설정하여 서버 사이드 렌더링 시 발생 가능한 연결 오류 원천 봉쇄
실천 포인트
1. 환경 변수 검증은 런타임이 아닌 애플리케이션 부팅 시점에 zod로 강제할 것
2. HTTP 응답을 Either 타입으로 정의하여 try-catch 남발을 억제하고 에러 처리를 명시적 값으로 관리할 것
3. 서버 전용 API의 클라이언트 유입을 방지하는 빌드 타임 체크(Sentinel)를 구현할 것
4. SSR 상태 관리 시 전역 싱글톤이 아닌 Per-request Store 구조를 채택하여 상태 오염을 방지할 것