Page Component

URL 세그먼트는 같은 폴더의 page.tsx로 모인다

페이지 컴포넌트는 라우트의 최종 UI입니다. `page.tsx`를 단독 파일로 보지 말고, URL 세그먼트, `params`, 서버 데이터, 상태 파일, 필요한 클라이언트 조각이 만나는 라우트 폴더로 읽어야 합니다.

위치 app/posts/[id]/page.tsx가 /posts/42를 담당
기본값 별도 지시어가 없으면 서버 컴포넌트로 실행
상태 loading.tsx와 error.tsx가 같은 세그먼트를 보조

브라우저 입력

request /posts/42 `posts`는 정적 세그먼트, `42`는 `[id]` 폴더의 `params.id`가 됩니다.
URL이 먼저 라우트 폴더를 고르고, 같은 폴더의 파일들이 렌더링과 로딩, 실패 상태를 나눠 맡습니다.

라우트 폴더 미니맵

app App Router의 루트
posts /posts 목록 라우트 세그먼트
page.tsx 목록 페이지, 서버 fetch로 게시물 배열을 준비
loading.tsx 목록 데이터가 준비되기 전 표시할 로딩 UI
[id] /posts/42처럼 상세 id를 받는 동적 세그먼트
page.tsx params.id로 상세 데이터를 가져와 HTML 생성
error.tsx fetch 실패나 throw를 사용자가 복구할 화면으로 변환

page.tsx 내부 순서

1
params 읽기 { params }에서 id, slug 같은 라우트 값을 꺼냅니다.
2
서버 데이터 준비 서버 fetch, DB 접근, 캐시 정책을 렌더 전에 확정합니다.
3
HTML 렌더 데이터가 준비된 뒤 목록, 상세, 빈 상태를 UI로 만듭니다.
4
상호작용 분리 클릭, 입력, 브라우저 API는 작은 클라이언트 컴포넌트로 둡니다.

같은 폴더 파일의 책임

파일
맡는 일
확인 질문
page.tsx
URL에 매핑되는 최종 UI와 서버 데이터 준비
이 화면이 params와 fetch 결과를 직접 설명하는가
loading.tsx
해당 세그먼트 데이터가 준비되기 전의 대기 UI
실제 fetch 대기 구간이 사용자에게 보이는가
error.tsx
throw 또는 fetch 실패를 복구 가능한 화면으로 표현
다시 시도와 오류 메시지가 이 라우트 맥락에 맞는가
Client Island
클릭, 입력, 브라우저 API처럼 클라이언트에서만 가능한 부분
페이지 전체가 아니라 필요한 컴포넌트만 클라이언트인가

작성 전 점검

01 route 위치 app 아래 폴더명이 의도한 URL과 일치하는지 확인
02 params 대괄호 폴더 이름과 page prop의 key가 같은지 확인
03 server fetch 서버에서 끝낼 데이터 준비와 캐시 정책을 먼저 고정
04 loading/error 대기와 실패 상태 파일이 같은 세그먼트에 있는지 확인