Root Layout — 모든 페이지를 감쌉니다
Nested Routes — 중첩 라우트
Next.js App Router에서 폴더 구조가 곧 URL 세그먼트입니다. 폴더를 중첩하면 URL도 중첩되고, 각 폴더의 layout.tsx가 자식 콘텐츠를 감싸는 래퍼 역할을 합니다.
파일 구조
app/
├── layout.tsx ← Root layout (모든 라우트를 감싸)
├── page.tsx ← / (홈)
└── blog/
├── layout.tsx ← Blog layout (/blog 이하를 감싸)
├── page.tsx ← /blog
└── authors/
└── page.tsx ← /blog/authors아래 링크를 클릭해 중첩 레이아웃이 어떻게 작동하는지 직접 확인하세요:
- /blog— Blog Layout + Root Layout 적용
- /blog/authors— Root Layout → Blog Layout → Authors Page (3단계)
핵심: 레이아웃은 한 번 렌더링되면 하위 페이지를 오갈 때 다시 렌더링되지 않습니다. Root Layout의 타임스탬프가 하위 페이지 이동 시에도 유지되는 것을 확인해보세요.
핵심 파일 코드
// demo/nextjs/16.1.6/project-structure/nested-routes/page.tsx
export default function Page() {
// 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}