Nested Layout

layout은 바깥에서 안쪽으로 page를 감싼다

app/layout.tsx가 전체 껍데기를 만들고, dashboard/layout.tsx가 대시보드 영역을 유지한 채 현재 page만 교체한다.

Wrapping 흐름

app/layout.tsx

사이트 전체 프레임

html, body, 전역 헤더와 푸터를 제공하고 아래 레이아웃을 children으로 받는다.

dashboard/layout.tsx

대시보드 공통 UI

사이드바, 탭, 필터처럼 dashboard 하위 경로에서 공유할 상태와 화면을 유지한다.

page.tsx

현재 라우트 콘텐츠

/dashboard 또는 /dashboard/settings 같은 하위 page가 이 자리에서 교체된다.

dashboard/page.tsx

대시보드 홈

overview/page.tsx

개요 화면

settings/page.tsx

설정 화면

상태 유지

사이드바 열림 상태나 선택된 탭 같은 레이아웃 내부 상태가 이어진다.

부분 교체

URL이 바뀌어도 페이지 영역만 새 콘텐츠로 바뀌어 흐름이 자연스럽다.

공통 UI 관리

반복되는 네비게이션과 섹션 구조를 한 레이아웃에서 관리한다.

layout 판단 기준

중첩 라우트는 폴더 구조로 URL을 만들고, 중첩 layout은 화면과 상태의 유지 범위를 결정한다.