Next.js 16 기반 1.2초 로딩 및 Lighthouse 98점 달성

Context

최신 스택의 성능 이점을 검증하기 위해 Next.js 16, React 19, Tailwind v4를 도입한 포트폴리오 구축 사례임. 정적 콘텐츠 중심의 구조에서 인터랙티브 요소와 서버 사이드 렌더링의 조화를 통한 최적화가 핵심 과제였음.

Technical Solution

• CSS-first Configuration: Tailwind v4의 CSS 기반 설정 방식을 통해 별도의 JS 설정 파일 없이 테마를 관리하는 구조 채택
• Hybrid Component Pattern: Server Components를 기본으로 하되 Framer Motion 등 DOM 접근이 필요한 라이브러리는 Client-side Wrapper로 감싸는 구조 설계
• Local-first Content Pipeline: 외부 CMS 의존성을 배제하고 MDX 파일과 gray-matter를 활용한 로컬 파일 시스템 기반의 정적 데이터 추출 로직 구현
• Asynchronous Params Handling: Next.js 16의 변경 사항을 반영하여 Page Params를 Promise로 처리하는 비동기 데이터 바인딩 적용
• Deployment Optimization: Railway의 Cold Start 문제를 해결하기 위해 railway.toml 내 healthcheckTimeout을 30초로 확장 설정

Impact

• 페이지 로딩 속도 1.2초 미만 달성
• Lighthouse 성능 점수 98/100 기록
• 월 운영 비용 $5 미만 유지

Key Takeaway

Bleeding-edge 스택 도입 시 라이브러리 간 버전 불일치로 인한 Hydration 오류와 API Breaking Change에 대비한 공식 문서 기반의 정밀한 검증 과정이 필수적임.