중첩 레이아웃 (Nesting Layouts)

Next.js에서 폴더 안에 layout.tsx를 추가하면 해당 세그먼트와 모든 하위 세그먼트에 자동으로 적용됩니다. 아래 링크로 이동하면서 root layout과 blog layout이 어떻게 중첩되는지 확인해보세요.

파일 구조

app/
├── layout.tsx          ← root layout (html, body)
├── page.tsx            → /
└── blog/
    ├── layout.tsx      ← blog layout (section)
    ├── page.tsx        → /blog
    └── [slug]/
        └── page.tsx    → /blog/:slug

라우트 탐색

/blog 이하 페이지에서는 blog layout이 추가로 적용됩니다. 레이아웃 경계를 색상으로 구분합니다.

/blog

root layout → blog layout → blog page

/blog/hello-world

root layout → blog layout → blog post page

핵심 코드

// app/blog/layout.tsx
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}