# [[Next.js]]

## 📌 Brief Summary
Next.js는 확장 가능하고 유지 관리가 용이한 코드베이스를 구축하기 위해 체계적인 라우팅 및 파일 명명 규칙을 제공하는 React 프레임워크입니다 [1]. 특히 최신 App Router 환경에서는 React 서버 컴포넌트(RSC)를 활용하여 클라이언트 측 자바스크립트 전송량을 줄이고 초기 로딩 및 하이드레이션(Hydration) 속도를 최적화합니다 [2-4]. 체계적인 폴더 구조와 라우트 그룹 기능을 통해 프론트엔드 성능 최적화와 대규모 애플리케이션의 확장을 원활하게 지원하는 현대적인 개발 도구로 평가받고 있습니다 [5-7].

## 📖 Core Content
* **라우팅 및 특수 파일 명명 규칙:** 
  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:** [[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*