# [[Next.js]]

## 📌 Brief Summary
Next.js는 React 기반의 웹 애플리케이션 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 증분 정적 재생성(ISR)을 기본적으로 지원합니다 [1-3]. 이는 기본 React의 클라이언트 사이드 렌더링(CSR)이 가지는 검색 엔진 최적화(SEO) 및 초기 로딩 속도의 한계를 극복하기 위해 고안되었습니다 [4, 5]. 성능 중심의 웹 아키텍처 구축과 우수한 코어 웹 바이탈(Core Web Vitals) 점수 달성에 널리 사용되며 사용자 경험 및 비즈니스 성과를 높이는 필수적인 플랫폼으로 평가받습니다 [1, 2, 6].

## 📖 Core Content
* **하이브리드 렌더링(Hybrid Rendering):** Next.js는 단일 애플리케이션 내에서 페이지별 특성에 따라 렌더링 방식을 유연하게 정의할 수 있습니다 [7]. `getServerSideProps`를 활용하여 실시간으로 HTML을 생성하는 SSR, 빌드 타임에 정적 HTML을 생성하여 초고속으로 전송하는 SSG, 그리고 캐시된 정적 페이지를 백그라운드에서 업데이트하여 TTFB(Time to First Byte) 성능과 콘텐츠의 최신성을 모두 확보하는 ISR 환경을 제공합니다 [4, 5, 8-10].
* **강력한 SEO 지원:** SPA(Single Page Application)의 취약점인 메타 데이터 관리를 위해 기본 제공되는 `next/head` 컴포넌트를 사용해 라우트별 동적 메타 태그 삽입이 가능하며, `next-sitemap` 패키지를 통한 사이트맵 자동 생성 기능을 지원합니다 [1, 2, 11, 12]. 검색 엔진 봇이 자바스크립트 실행을 대기할 필요 없이 렌더링이 완료된 HTML과 메타데이터, 구조화된 데이터를 즉시 응답받으므로 크롤링 효율이 극대화됩니다 [4, 5].
* **성능 및 코어 웹 바이탈(Core Web Vitals) 최적화:** 라우트 기반의 코드 분할(Code splitting)을 자동으로 수행하여 초기 다운로드 자바스크립트 번들의 크기를 획기적으로 줄입니다 [13, 14]. 또한 `next/image` 컴포넌트를 사용하면 WebP, AVIF 같은 차세대 이미지 포맷 변환, 자동 리사이징 및 지연 로딩(Lazy loading)이 적용되어 LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift) 점수를 효과적으로 개선할 수 있습니다 [15, 16]. 세밀한 수화(Hydration) 제어를 통해 페이지를 더 빠르게 상호작용 가능하게 만듭니다 [17].
* **입증된 비즈니스 성과:** 전통적인 클라이언트 사이드 렌더링(CSR) 환경의 Create React App 구조에서 Next.js 기반의 ISR로 전자상거래 사이트를 마이그레이션한 실제 사례가 있습니다. 해당 사례에서 TTFB는 200ms에서 50ms로 단축되었고 LCP는 1.8초로 개선되었으며, 메인 번들 크기가 1.8MB에서 320KB로 감소했습니다 [15, 16, 18, 19]. 이 최적화를 통해 제품 페이지 색인율이 40%에서 95%로 크게 상승하였고, 결과적으로 오가닉 트래픽은 70%, 오가닉 검색을 통한 수익은 75% 증가하는 성과를 거두었습니다 [15, 16, 18, 19].

## 🔗 Knowledge Connections
- **Related Topics:** `[[Server-Side Rendering (SSR)]]`, `[[Static Site Generation (SSG)]]`, `[[Incremental Static Regeneration (ISR)]]`, `[[Core Web Vitals]]`, `[[Client-Side Rendering (CSR)]]`
- **Projects/Contexts:** `[[E-commerce Migration Case Study]]`, `[[Strapi Launchpad demo]]`
- **Contradictions/Notes:** 순수 React 앱(CSR)은 자바스크립트 렌더링 지연과 빈 초기 HTML 구조로 인해 검색 엔진의 2차 색인 단계를 거쳐야 하는 불리함과 색인 누락의 위험이 있지만, Next.js를 도입한 서버 기반 렌더링은 검색 엔진 봇의 자바스크립트 실행 의존성을 원천적으로 제거하여 크롤링 이슈를 해결합니다 [4, 5, 20-23].

---
*Last updated: 2026-04-26*