App Router

app 폴더 구조는 URL 라우트와 레이아웃 계층을 동시에 만든다

폴더는 URL 세그먼트가 되고 page.tsx는 화면, layout.tsx는 하위 라우트가 공유하는 껍데기가 된다.

파일 기반 라우팅

route tree

src/app

App Router의 루트이며 폴더 구조가 곧 라우트 구조가 된다.

page.tsx

각 세그먼트에서 실제 렌더링되는 페이지 컴포넌트를 정의한다.

layout.tsx

하위 경로가 공유하는 네비게이션, 스타일, 서버 데이터 경계를 만든다.

app 폴더segmentpagelayout
읽는 법

Next.js 프로젝트 구조를 볼 때는 파일 목록이 아니라 URL, 화면, 공유 레이아웃이 어떻게 대응되는지 같이 읽어야 한다.