Skip to main content

중첩 레이아웃 (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>
}