Next.js layout

레이아웃 계층 설계 지도

폴더별 layout.tsx는 바깥에서 안쪽으로 화면을 감싸고, 각 레이아웃의 children 위치에 다음 계층이 꽂힌다.

생성 및 중첩 흐름

1

root layout

app/layout.tsx

html, body, 전역 스타일처럼 앱 전체에 한 번 필요한 틀을 둔다.

2

segment layout

dashboard/layout

대시보드, 설정, 상품 상세처럼 특정 폴더 아래에서 반복되는 내비게이션과 화면 골격을 맡긴다.

3

nested layout

profile/layout

더 좁은 하위 영역에만 필요한 메뉴, 탭, 보조 패널을 추가해 부모 레이아웃 안에 한 겹 더 중첩한다.

4

children slot

{children}

다음 레이아웃이나 최종 page.tsx가 들어오는 자리다. 슬롯을 기준으로 계층이 연결된다.

실행 시 읽는 구조

렌더링 스택

RootLayout 전역 shell 유지
DashboardLayout 섹션 UI 유지
ProfileLayout 하위 메뉴 유지
ProfilePage URL별 콘텐츠 교체

metadata/providers

메타데이터는 적용 범위가 필요한 가장 가까운 레이아웃에 두고, provider는 전역 상태가 필요한 범위만 감싸도록 위치를 좁힌다.

범위 먼저

공통 UI는 위로

여러 페이지가 공유하고 이동 중 유지되어야 하는 영역일수록 상위 레이아웃에 둔다.

지역 UI는 아래로

특정 폴더 아래에서만 필요한 탭, 메뉴, 패널은 세그먼트 레이아웃으로 분리한다.

설정 범위는 좁게

metadata와 provider는 영향 범위를 먼저 정한 뒤 가장 알맞은 계층에 배치한다.