App Router 트리

App Router 폴더 구조

app 디렉터리의 segment는 URL 경로가 되고 layout은 자식 route를 감싸지만, route group, dynamic segment, parallel/intercepting route는 URL과 파일 구조가 다르게 보일 수 있다.

01

segment 해석

app/shop/[id]/page.tsx는 /shop/:id URL을 만든다.

URL 경로
02

layout 누적

root layout부터 해당 segment layout까지 부모 UI가 중첩된다.

nested shell
03

group 제외

(admin) 같은 route group은 구조 정리용이며 URL 경로에는 포함되지 않는다.

organization
04

특수 route

@slot, (.)modal은 병렬/가로채기 렌더링으로 일반 URL 트리와 다르게 동작한다.

advanced routing
app/page.tsx
/ 루트 경로의 기본 페이지다.
home
app/blog/[slug]
/blog/:slug slug 값은 params로 page/layout에 전달된다.
dynamic
app/(shop)/cart
/cart route group 이름은 URL에서 빠지고 레이아웃 그룹화에만 쓰인다.
group
app/docs/[[...slug]]
/docs 또는 /docs/a/b optional catch-all은 없는 경우와 여러 segment 모두를 받는다.
catch-all

혼동 방지

URL 표 폴더를 만들 때 실제 URL과 params 형태를 표로 먼저 적는다.
layout 범위 어떤 페이지가 어떤 layout을 공유하는지 route group으로 조절한다.
404 동적 segment에서 없는 데이터는 notFound()로 경로 실패를 명확히 한다.