App Router 핵심 파일 범위

URL leaf 탐색

page.tsx가 있어야 해당 segment가 실제 접근 가능한 화면이 된다.

navigation이나 sidebar처럼 이동 중 보존될 UI는 공통 layout에 둔다.

loading과 error는 어디에 두느냐에 따라 사용자가 보는 흔들림과 복구 범위가 달라진다.

layout

상태 보존 범위 자식 페이지 이동 중에도 같은 layout은 유지된다.

client state 보존 범위와 연결된다.

template

이동마다 재생성 layout과 달리 navigation 때 새 인스턴스를 만들 수 있다.

진입 애니메이션이나 재초기화에 쓴다.

error

오류 격리 에러 UI는 클라이언트 컴포넌트로 동작하며 reset 경로를 제공할 수 있다.

서버 전체 실패와 구분한다.

route

HTTP handler GET, POST 같은 method 단위 서버 로직을 정의한다.

UI 파일과 책임이 다르다.

범위 loading과 error가 너무 위에 있어 관련 없는 영역까지 흔들리지 않는가.

유지 보존되어야 할 UI를 page마다 반복하지 않는가.

핸들러 UI page와 API route의 파일 책임을 혼동하지 않는가.

app/dashboard/layout.tsx
app/dashboard/loading.tsx
app/dashboard/error.tsx
app/dashboard/page.tsx