Multiple Root Layouts — 다중 루트 레이아웃

기본적으로 app/layout.tsx가 모든 라우트를 감싸는 단일 루트 레이아웃 역할을 합니다.

Route Group을 사용하면 각 그룹마다 독립적인 레이아웃을 만들 수 있습니다. 실제 프로젝트에서는 top-level layout.tsx를 제거하고, 각 그룹의 layout.tsx에 <html>, <body>를 포함시킵니다.

파일 구조

app/
├── (marketing)/
│   ├── layout.tsx    ← Marketing 루트 레이아웃
│   ├── page.tsx      ← Marketing 홈
│   └── about/
│       └── page.tsx  ← About 페이지
└── (shop)/
    ├── layout.tsx    ← Shop 루트 레이아웃
    ├── page.tsx      ← Shop 홈
    └── products/
        └── page.tsx  ← Products 페이지

코드 예시

// app/(marketing)/layout.tsx
const MarketingLayout = ({ children }) => (
  <html lang="ko">
    <body className="light-theme">{children}</body>
  </html>
);

// app/(shop)/layout.tsx
const ShopLayout = ({ children }) => (
  <html lang="ko">
    <body className="dark-theme">{children}</body>
  </html>
);

아래 두 섹션을 방문해 레이아웃 차이를 직접 확인하세요:

Marketing 섹션

밝은 배경, 중앙 정렬, 미니멀 네비게이션

Shop 섹션

어두운 배경, 사이드바, 카트 아이콘

주의: 그룹 간 이동 시 full page reload가 발생합니다. HTML 셸 자체가 다르므로 클라이언트 측 전환이 불가능합니다.

← 스터디로 돌아가기

핵심 파일 코드

// demo/nextjs/16.1.6/project-structure/multiple-root-layouts/page.tsx
export default function Page() {
    // 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}