Next.js App Router

페이지 생성 → URL 매핑 → Link 탐색 → 중첩 확인

폴더 segment와 page.tsx가 경로를 만들고, <Link> 클릭이 해당 URL의 페이지 컴포넌트로 이어진다.

page.tsx 생성 URL 확정 <Link> 클릭 중첩 확인

파일 시스템

src/app
/ src/app
1 about/page.tsx
2 dashboard/page.tsx
3 dashboard/settings/page.tsx

폴더명은 URL segment가 되고, page.tsx는 그 segment 끝에서 렌더링되는 화면이다.

URL 매핑

folder routing

about/page.tsx

about segment의 페이지

/about

dashboard/page.tsx

dashboard 홈 페이지

/dashboard

dashboard/settings/page.tsx

한 단계 더 깊은 중첩 경로

/dashboard/settings

Link 탐색

client nav

About로 이동

<Link href="/about">About</Link>

Dashboard 홈

<Link href="/dashboard">Dashboard</Link>

Settings 중첩 페이지

<Link href="/dashboard/settings">Settings</Link>
생성

page.tsx 존재

파일이 없으면 해당 segment는 페이지로 열리지 않는다.

매핑

폴더명과 URL 일치

about은 /about, dashboard는 /dashboard가 된다.

탐색

<Link> href 확인

href가 URL과 같으면 새로고침 없이 페이지가 전환된다.

중첩

settings까지 진입

dashboard/settings/page.tsx는 /dashboard/settings를 담당한다.