Next.js

페이지 컴포넌트 작성

App Router의 라우팅 규칙을 이해했다면, 다음 단계는 각 URL에 실제 화면을 연결하는 page 컴포넌트입니다. 이 절은 page.tsx의 위치, 서버 컴포넌트 기본값, 데이터 페칭 책임을 정리합니다.

page 파일이 라우트 화면이 되는 규칙과 페이지 컴포넌트에 배치할 책임을 확인합니다.

1

페이지 컴포넌트의 역할과 특징

App Router에서 페이지 컴포넌트는 app 디렉터리 내의 특정 라우트 세그먼트 폴더 안에 위치한 page.tsx (또는 .js, .jsx) 파일입니다.

페이지 컴포넌트(Page Component)
2

라우트에 연결되는 페이지 컴포넌트 작성하기

최소 페이지 컴포넌트는 단순한 React 함수 컴포넌트와 동일하게 작성됩니다.

서버 컴포넌트 기본값
3

페이지 컴포넌트에서 데이터 페칭하기

페이지 컴포넌트가 서버 컴포넌트라는 점은 데이터 페칭에서 엄청난 강점을 발휘합니다.

URL 매핑