# [[Next.js App Router|Next.js App Router]]

## 📌 Brief Summary
Next.js App Router는 Next.js(버전 13 이후)에서 도입된 최신 라우팅 및 아키텍처 시스템으로, React Server Components(RSC)를 기본적으로 지원하여 클라이언트 측 자바스크립트 전송량을 줄이고 초기 로딩 속도를 향상시킵니다 [1, 2]. 이 시스템은 `app` 디렉토리를 기반으로 동작하며, `page.js`, `layout.js`와 같은 특수 파일들을 통해 직관적이고 구조화된 라우팅을 제공합니다 [3, 4].

## 📖 Core Content

*   **특수 파일을 활용한 구조적 라우팅**: Next.js App Router는 라우트 구성 및 관리를 위해 특수 파일 명명 규칙을 사용합니다. 라우트는 `page.js`로, 공유 레이아웃은 `layout.js`로, 사용자 정의 에러는 `error.js`로, 로딩 상태는 `loading.js`로 정의하여 애플리케이션의 동작을 제어합니다 [3].
*   **동적 라우트 및 라우트 그룹**: 동적인 경로 처리를 위해 `[param]`을 사용하고, 포괄적(catch-all) 라우트 처리를 위해 `[...param]`을 지원합니다 [3]. 또한 URL 구조에 영향을 주지 않고 논리적으로 라우트를 그룹화할 수 있도록 괄호를 사용하는 라우트 그룹(예: `(folderName)`) 기능을 제공하여, 기능별 또는 팀별로 코드를 깔끔하게 조직할 수 있습니다 [5].
*   **React Server Components (RSC) 통합**: App Router는 서버 컴포넌트를 기반으로 동작합니다. 이를 통해 정적이거나 데이터 주도적인(read-only) UI는 클라이언트 측 자바스크립트 없이 서버에서만 렌더링할 수 있어 자바스크립트 번들 크기와 Hydration 소요 시간을 극대화하여 줄여줍니다 [2, 6, 7].
*   **클라이언트와 서버의 역할 분리**: 서버 컴포넌트에서는 상태(state), `useEffect`, 클라이언트 전용 라이브러리를 사용할 수 없습니다 [8]. 따라서 상호작용이 즉각적으로 필요한 UI(모달, 입력창 등)에만 파일 상단에 `use client` 지시어를 선언하여 클라이언트 컴포넌트로 만들고, 나머지는 서버 컴포넌트로 분리하는 아키텍처 패턴이 필수적입니다 [7, 9].
*   **동시성 렌더링(Concurrent Rendering) 완벽 지원**: App Router는 React 18의 동시성 기능과 완벽하게 통합되어 있습니다. `useTransition` 및 서버 컴포넌트와 함께 사용하여 사용자 인터페이스의 응답성을 떨어뜨리지 않고 백그라운드 작업을 효과적으로 처리할 수 있습니다 [10].

## 🔗 Knowledge Connections

### Related Concepts

- [[React Server Components|React Server Components]]
  - 연결 이유: Next.js App Router 아키텍처의 핵심 기반으로, 번들 크기를 줄이고 데이터 페칭 성능을 향상시키는 역할을 합니다 [1, 2].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 클라이언트 측 렌더링 코드와 서버 측 렌더링 코드 간의 명확한 경계 구분 및 Hydration 최소화 전략 [6, 7, 9].

- Route Groups
  - 연결 이유: App Router 내에서 URL 경로를 변경하지 않고도 폴더 구조를 논리적으로 조직할 수 있게 해주는 핵심 폴더 라우팅 패턴입니다 [5, 11].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 복잡한 애플리케이션에서 별도의 레이아웃을 가진 섹션(예: 마케팅 페이지와 상점 페이지)을 충돌 없이 독립적으로 분리하는 방법 [5, 11].

- [[Concurrent Rendering|Concurrent Rendering]]
  - 연결 이유: Next.js App Router가 기본적으로 완벽하게 지원하는 React의 렌더링 메커니즘으로, 렌더링 작업을 일시 중지, 중단 및 재개할 수 있게 해줍니다 [10, 12].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: `useTransition` 및 `useDeferredValue` 훅을 통해 무거운 렌더링 시에도 사용자 입력 반응성(UX)을 높게 유지하는 원리 [13, 14].

### Deeper Research Questions

- 여러 개의 루트 레이아웃을 가진 Route Groups 환경에서 최상위 `layout.js`가 없을 때, 다른 루트 레이아웃 간의 네비게이션 시 발생하는 전체 페이지 로드(full page load)의 내부 메커니즘은 무엇인가? [11]
- App Router에서 `[param]` 형태의 동적 라우트와 Route Group 간의 경로 중복(예: `(marketing)/about/page.tsx`와 `(shop)/about/page.tsx`) 충돌 시, Next.js의 라우트 해석 우선순위는 어떻게 결정되는가? [11]
- 기존 Pages Router 방식과 비교하여 App Router의 React Server Components는 데이터 페칭 시 어떻게 'Double Fetching' 문제를 해결하고 성능을 최적화하는가? [7, 8]
- 클라이언트 컴포넌트(`use client`)와 서버 컴포넌트가 혼합된 형태의 트리에서, 서버 컴포넌트가 클라이언트 컴포넌트를 `children`으로 전달하거나 임포트할 때 적용되는 직렬화 규칙 및 한계점은 무엇인가? [6, 7, 9]
- 특수 라우팅 파일 중 `error.js`가 React Error Boundary로서 동작할 때 서버 컴포넌트 오류와 클라이언트 컴포넌트 오류를 각각 처리하는 흐름은 어떻게 구분되는가? [3]

### Practical Application Contexts

- **Implementation:** 라우트를 구현할 때는 `kebab-case` 명명 규칙을 적용한 폴더(예: `auth-provider.tsx`)를 생성하여 라우팅하고, 대시보드처럼 정적인 레이아웃은 서버 컴포넌트로 두면서 `AddToCartButton` 같이 상호작용이 필요한 위젯만 `use client` 컴포넌트로 임포트하여 구현합니다 [4, 7, 15].
- **System Design:** 애플리케이션 코드를 조직할 때, 기능별(Feature-Based) 폴더 구조를 사용하여 컴포넌트, 페이지, 유틸리티를 한 기능 폴더(예: `features/auth/`)에 모으고, 이를 다시 `Route Groups`를 통해 모듈화된 아키텍처로 설계합니다 [5, 16, 17].
- **Operation / Maintenance:** 초기 자바스크립트 번들 용량이 커져 INP(Interaction to Next Paint)와 TTI(Time to Interactive) 등 코어 웹 바이탈 수치가 저하될 때, 어떤 컴포넌트가 불필요하게 클라이언트 사이드로 로드되었는지 파악하여 서버 컴포넌트로 마이그레이션 하는 유지보수를 진행합니다 [6, 18].
- **Learning Path:** 우선 React의 렌더링 모델 트리거 요인과 상태 변화 원리를 숙지하고 [19], 이후 React 18의 동시성 훅(`useTransition`) 동작을 실습한 뒤 [12, 13], Next.js App Router의 Server Components를 통한 서버/클라이언트 경계 개념을 배우는 순서로 접근해야 합니다 [2, 7].
- **My Project Relevance:** 소스에 관련 정보가 부족합니다.

### Adjacent Topics

- Code Splitting & Lazy Loading
  - 확장 방향: App Router의 Server Components뿐만 아니라, `React.lazy`와 `Suspense`를 결합하여 라우트 및 무거운 컴포넌트(차트, 에디터 등)를 필요한 순간에만 로드하도록 최적화하는 기법으로의 이해 확장 [20, 21].
- React Context API Optimization
  - 확장 방향: App Router 환경 하의 클라이언트 컴포넌트 내에서 불가피하게 전역 상태를 쓸 때, Context의 광범위한 리렌더링 이슈를 회피하기 위해 컨텍스트를 분리하거나 Zustand, Jotai 등의 외부 라이브러리를 도입하는 방향으로 학습 확장 [22-24].

---
*Last updated: 2026-04-30*