2nd/00_Raw/Next.js Framework.md

Next.js Framework

📌 Brief Summary

Next.js는 빠른 웹 성능과 내장된 SEO 최적화 기능을 갖춘 가장 인기 있는 React 기반 프레임워크이다 [1, 2]. SSR(Server-Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration) 등 다양한 서버 측 렌더링 방식을 제공하여 검색 엔진 봇에게 즉각적으로 완전한 HTML을 전달할 수 있도록 돕는다 [2, 3]. 성능 중심의 개발 워크플로우를 지원하므로 전자상거래, 블로그, 랜딩 페이지 등의 Core Web Vitals 점수와 검색 엔진 순위를 높이는 데 탁월하다 [3, 4].

📖 Core Content

• 다양한 렌더링 전략의 통합 지원: Next.js는 getServerSideProps 함수를 사용해 요청마다 서버에서 HTML을 생성하는 SSR, getStaticProps를 통해 빌드 타임에 HTML을 생성하는 SSG를 모두 지원한다 [5, 6]. 또한, 캐시된 정적 페이지를 백그라운드에서 업데이트하는 ISR 방식을 통해 SSR의 최신성과 SSG의 속도(TTFB 20-50ms 수준)를 동시에 달성할 수 있다 [6, 7]. 이는 클라이언트 측 렌더링 지연을 없애고 빠르고 완전한 페이지를 사용자 및 크롤러 봇에 제공한다 [2, 5].
• Core Web Vitals 및 성능 최적화: Next.js는 라우트 기반 코드 스플리팅(Code Splitting)을 자동으로 수행하여 무거운 자바스크립트 번들을 분할하고 초기 로딩 시간을 줄인다 [8]. 최신의 App Router와 Server Components를 사용하면 페이지의 정적인 부분에 대해 클라이언트로 전송하는 자바스크립트 양을 '0'으로 만들 수 있어 INP(Interaction to Next Paint) 지표 최적화에 놀라운 효과를 발휘한다 [9].
• 내장된 이미지 최적화 (next/image): 자체적인 이미지 컴포넌트인 next/image를 제공하여 이미지를 WebP와 같은 최신 포맷으로 자동 변환하고, 기기 해상도에 맞춰 크기를 조정하며, 지연 로딩(Lazy loading)을 적용한다 [10, 11]. 이는 웹 성능의 주요 지표인 LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift) 점수를 큰 폭으로 개선한다 [9-11].
• 강력한 메타데이터 및 SEO 도구 관리: 기존 React SPA의 약점이었던 메타데이터 관리를 해결하기 위해 next/head 컴포넌트 또는 Metadata API를 제공하여 라우트마다 동적인 타이틀과 Open Graph 태그를 주입할 수 있다 [3, 9, 12]. 또한 next-sitemap 패키지를 이용하면 복잡한 설정 없이 XML 사이트맵을 자동으로 생성할 수 있다 [13].

🔗 Knowledge Connections

• Related Topics: Server-Side Rendering (SSR), Core Web Vitals, React SEO, Interaction to Next Paint (INP)
• Projects/Contexts: E-commerce Migration to Next.js (기존 순수 CSR 방식의 Create React App 전자상거래 사이트를 Next.js ISR로 마이그레이션하여 오가닉 트래픽 70%, 매출 75% 상승을 달성한 비즈니스 적용 사례 [10, 14])
• Contradictions/Notes: 전통적인 순수 Client-Side Rendering(CSR) 방식은 검색 엔진 봇에게 빈 HTML 셸을 반환하여 인덱싱이 지연되거나 실패할 위험이 크지만, Next.js의 SSR 및 SSG 렌더링 방식을 적용하면 자바스크립트 실행에 의존하지 않고도 봇이 즉시 콘텐츠를 수집할 수 있도록 근본적인 구조를 개선한다 [2, 15, 16].

---

Last updated: 2026-04-26