layout placement

공통 UI는 오래 유지될 범위에, 설정은 필요한 범위에 둔다

레이아웃 중첩은 폴더 깊이만의 문제가 아닙니다. 어떤 UI와 데이터가 어느 라우트 묶음에서 유지되어야 하는지 먼저 나누어야 합니다.

RootLayout

global

html, body, 전역 provider, 기본 metadata처럼 앱 전체에 한 번 필요한 틀을 둡니다.

theme provider global nav base metadata

Segment Layout

section

대시보드, 설정, 상품 영역처럼 하위 페이지가 공유하는 사이드바와 데이터 캐시를 유지합니다.

sidebar tabs user summary fetch section metadata

Nested Layout

local

더 좁은 라우트 묶음에만 필요한 탭, 보조 메뉴, 지역 provider를 두어 상위 레이아웃을 가볍게 둡니다.

profile subnav scoped settings 로컬 경계

어디에 둘지 결정하는 기준

이동 중 유지

페이지가 바뀌어도 남아야 하는 메뉴와 패널은 layout에 둡니다.

범위 좁히기

특정 폴더 아래에서만 필요한 provider는 그 세그먼트로 내립니다.

데이터 재사용

여러 하위 페이지가 같은 서버 데이터를 읽으면 layout fetch를 고려합니다.

메타데이터

제목, 설명, open graph는 영향받는 라우트 범위에 맞춥니다.

children 슬롯

다음 layout 또는 page가 들어갈 자리를 명확히 남겨야 합니다.

클라이언트 경계

전역 상태가 아니라면 작은 provider로 범위를 제한합니다.

상태 보존

입력값이나 스크롤 위치가 유지되어야 하는 영역인지 확인합니다.

페이지 고유 UI

한 URL에서만 쓰는 콘텐츠는 page.tsx에 남깁니다.