Next.js
Vercel이 만든 React 기반 풀스택 웹 프레임워크로, 파일 기반 라우팅·다양한 렌더링 전략·빌트인 최적화 기능을 제공합니다.
핵심 특징
- 파일 기반 라우팅:
app/또는pages/디렉토리 구조만으로 라우트가 자동 생성 - 렌더링 전략: CSR, SSR, SSG, ISR(Incremental Static Regeneration)을 컴포넌트·페이지 단위로 혼용 가능
- 코드 스플리팅: 페이지 단위로 자동 코드 스플리팅 적용
- 이미지·폰트 최적화:
next/image,next/font로 성능 최적화 내장 - 서버 컴포넌트: React Server Components를 기본 지원
- 미들웨어: Edge Runtime에서 요청을 가로채 인증·리다이렉션 처리 가능
CSR / SSR / SSG 비교
| 방식 | 렌더링 시점 | 특징 |
|---|---|---|
| CSR | 브라우저 (런타임) | 초기 로딩 느림, 동적 데이터 |
| SSR | 서버 (요청마다) | 최신 데이터, 서버 부하 |
| SSG | 서버 (빌드 시) | 가장 빠름, 정적 콘텐츠 |
핵심 정리
Next.js는 번들러 설정·라우팅·렌더링 최적화를 추상화해 생산성을 높이지만, 파일 구조 규칙과 러닝커브가 단점입니다.