Next.js Production Checklist 가이드 정리

1. 개요

Next.js 앱을 프로덕션에 올리기 전에는 성능, UX, 보안, SEO, 타입 안정성을 위한 점검이 필요합니다.

문서에서는 아래 관점에서 체크리스트를 제공합니다.

다음 최적화는 별도 설정 없이 기본 적용됩니다.

Layouts: 레이아웃으로 공통 UI를 공유하고, 네비게이션에서 partial rendering을 활용
<Link>: 클라이언트 네비게이션 + prefetch를 위해 Link 사용
Error Handling: catch-all 에러 및 404를 커스텀 에러 페이지로 “우아하게” 처리
Client/Server 컴포지션: "use client" 경계를 점검해 불필요하게 클라이언트 번들이 커지지 않게 구성
Dynamic APIs 주의:
- cookies() 같은 Dynamic API나 searchParams 사용은 해당 라우트 전체를 Dynamic Rendering으로 만들 수 있음
- Root Layout에서 사용하면 앱 전체가 영향을 받을 수 있으니 의도적으로 사용
- 필요 시 <Suspense> 경계로 감싸는 것이 권장됨
참고: Partial Prerendering(PPR, experimental)은 “라우트 전체를 dynamic으로 만들지 않고도 일부만 dynamic”하게 할 수 있는 방향성

Server Components에서 데이터 페칭: 서버에서 가져오면 클라이언트 번들에 영향이 줄고, 네트워크 워터폴을 줄이기 쉬움
Route Handlers: Client Component에서 백엔드 자원 접근 시 활용 가능
단, Server Component에서 Route Handler를 호출하면 불필요한 서버 요청이 1번 더 생기므로 피하는 것이 권장
Streaming + Suspense: loading.js와 Suspense로 “전체 화면 블로킹”을 피하고 점진적 UI 전송
Parallel Data Fetching: 네트워크 워터폴을 줄이기 위해 병렬 페칭, 필요 시 preload 전략 고려
Data caching 점검:
- 요청이 캐시되고 있는지 확인하고 적절히 opt-in
- fetch가 아닌 요청도 캐싱 고려(문서에서 “캐시되도록 보장”을 강조)
Static Images: public/에 둔 정적 자산은 자동 캐싱되므로 적극 활용

Tainting: 민감 데이터가 클라이언트로 노출되지 않도록 객체/값을 taint 처리
Server Actions 권한: Server Action 호출 권한(인증/인가) 체크 필수, 보안 권장사항 검토
Environment Variables:
- .env.*는 .gitignore에 포함
- 공개 변수만 NEXT_PUBLIC_ 접두사 사용
CSP(Content Security Policy): XSS, clickjacking 등 위협 방어를 위해 CSP 적용 고려

@next/bundle-analyzer로 번들 크기/대형 의존성 확인
의존성 추가의 영향도를 파악하는 도구 예시:
- Import Cost(IDE)
- Package Phobia / Bundle Phobia / bundlejs 등