2nd/10_Wiki/Topics/Frontend_Mastery/Next.js App Router.md

Next.js App Router

📌 Brief Summary

Next.js App Router는 Next.js 13 버전 이상부터 도입된 새로운 아키텍처로, 클라이언트 측 JavaScript 코드를 줄이기 위한 새로운 접근 방식을 제공합니다 [1]. 이 환경에서는 페이지와 레이아웃이 기본적으로 서버에서 렌더링되며 [2], 상호작용이 필요 없는 정적 컴포넌트의 경우 하이드레이션(Hydration) 과정 자체를 제거하여 성능을 최적화할 수 있습니다 [3].

📖 Core Content

• 기본 서버 컴포넌트(Default Server Components) 적용: Next.js App Router를 사용하면 애플리케이션의 페이지(Pages)와 레이아웃(Layouts)이 기본적으로 React Server Components로 동작합니다 [2]. 이를 통해 해당 영역의 코드가 클라이언트 브라우저에서 실행되지 않게 되므로, 브라우저가 다운로드해야 하는 JavaScript 페이로드를 완전히 줄일 수 있습니다 [1, 3].
• 단순화된 데이터 페칭: App Router 환경에서는 비동기(async) 컴포넌트 내에서의 데이터 페칭(Data fetching) 기능이 별도의 추가 설정 없이 기본적으로(out of the box) 지원됩니다 [2].
• 명시적인 클라이언트 컴포넌트 사용: 버튼이나 폼과 같은 상호작용(Interactivity)이 필요한 부분은 파일 최상단에 "use client" 지시어를 선언하여 클라이언트 컴포넌트로 만들어야 합니다 [2]. App Router 환경에서 클라이언트 컴포넌트를 사용할 때는 하이드레이션 오버헤드를 줄이기 위해 코드 스플리팅(Code splitting), 트리 쉐이킹(Tree-shaking) 등을 통해 컴포넌트 번들 크기를 최소화하는 것이 필수적입니다 [4].
• 참고: Next.js App Router의 디렉토리 구조, 중첩 라우팅 메커니즘 등 라우터 자체의 동작 원리에 대한 구체적인 세부 사항은 제공된 소스에 관련 정보가 부족합니다. 현재 소스는 주로 렌더링 및 하이드레이션 성능 관점에서의 App Router 활용에 집중되어 있습니다.

🔗 Knowledge Connections

• Related Topics: React Server Components, Client Components, Hydration
• Projects/Contexts: Next.js 13+
• Contradictions/Notes: 제공된 소스는 App Router를 React Server Components 및 하이드레이션 최적화의 맥락에서만 설명하고 있으며, 파일 시스템 기반의 라우팅 구조나 캐싱 메커니즘 전반에 대해서는 소스에 관련 정보가 부족합니다.

---

Last updated: 2026-04-25