feat: Knowledge Gardening Milestone 500 (Batch #26 - Halfway to half!)

00_Raw/Next.js.md

@@ -1,18 +1,22 @@
 # [[Next.js]]
 
 ## 📌 Brief Summary
-Next.js는 React 기반의 웹 애플리케이션 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 증분 정적 재생성(ISR)을 기본적으로 지원합니다 [1-3]. 이는 기본 React의 클라이언트 사이드 렌더링(CSR)이 가지는 검색 엔진 최적화(SEO) 및 초기 로딩 속도의 한계를 극복하기 위해 고안되었습니다 [4, 5]. 성능 중심의 웹 아키텍처 구축과 우수한 코어 웹 바이탈(Core Web Vitals) 점수 달성에 널리 사용되며 사용자 경험 및 비즈니스 성과를 높이는 필수적인 플랫폼으로 평가받습니다 [1, 2, 6].
+Next.js는 확장 가능하고 유지 관리가 용이한 코드베이스를 구축하기 위해 체계적인 라우팅 및 파일 명명 규칙을 제공하는 React 프레임워크입니다 [1]. 특히 최신 App Router 환경에서는 React 서버 컴포넌트(RSC)를 활용하여 클라이언트 측 자바스크립트 전송량을 줄이고 초기 로딩 및 하이드레이션(Hydration) 속도를 최적화합니다 [2-4]. 체계적인 폴더 구조와 라우트 그룹 기능을 통해 프론트엔드 성능 최적화와 대규모 애플리케이션의 확장을 원활하게 지원하는 현대적인 개발 도구로 평가받고 있습니다 [5-7].
 
 ## 📖 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].
+* **라우팅 및 특수 파일 명명 규칙:** 
+  Next.js는 라우팅과 앱 구조를 정의하기 위해 엄격한 파일 명명 규칙을 사용합니다 [5]. 라우트를 위한 `page.js`, 공유 레이아웃을 위한 `layout.js`, 커스텀 에러 처리를 위한 `error.js`, 로딩 상태를 위한 `loading.js`가 핵심 파일로 사용됩니다 [1]. 일반적인 파일명은 OS 간 호환성과 URL 가독성을 위해 kebab-case(예: `user-profile.tsx`)를 사용해야 하며, 파일 내부의 React 컴포넌트 이름은 PascalCase를 사용합니다 [8, 9]. 또한 동적 라우팅에는 `[param]`, 포괄적(Catch-all) 라우팅에는 `[...param]` 형식을 사용합니다 [1].
+
+* **기능 기반 폴더 구조와 라우트 그룹 (Route Groups):** 
+  대규모 앱에서는 기능(Feature)을 기준으로 폴더를 구성하여(예: `features/auth/components/login-form.tsx`) 코드의 응집도와 확장성을 높이는 것이 권장됩니다 [1, 6]. 더불어 폴더명을 괄호로 감싸는 라우트 그룹 기능(예: `(marketing)`)을 활용하면, 실제 URL 경로에 영향을 주지 않으면서도 연관된 라우트들을 논리적으로 묶고 특정 그룹에만 개별적인 레이아웃(`layout.tsx`)을 설정할 수 있습니다 [10, 11].
+
+* **성능 최적화 및 서버 컴포넌트 (RSC):** 
+  Next.js의 App Router(v13 이후)에서는 React 서버 컴포넌트(React Server Components)가 통합되어 있어 불필요한 클라이언트 측 JS 코드를 제거할 수 있습니다 [3, 4]. 서버 컴포넌트는 서버에서만 렌더링되고 데이터베이스나 API에서 직접 데이터를 가져올 수 있어, JS 번들 크기를 줄이고 초기 화면 그리기(First Paint) 및 상호작용성(TTI)을 크게 향상시킵니다 [4, 12]. 읽기 전용의 정적 UI는 서버 컴포넌트로 구성하고, 모달이나 입력 폼 등 상호작용이 즉각적으로 필요한 요소에만 제한적으로 클라이언트 컴포넌트를 사용하는 아키텍처 패턴이 중요합니다 [13].
 
 ## 🔗 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].
+- **Related Topics:** [[React Server Components]], [[Frontend Folder Structure]], [[Code Splitting]], [[React]]
+- **Projects/Contexts:** [[Next.js App Router]], [[Frontend Performance Optimization]]
+- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다.
 
 ---
 *Last updated: 2026-04-26*