페이지
페이지는 라우트에 고유한 UI입니다. page.js 파일에서 컴포넌트를 기본 내보내기하여 페이지를 정의할 수 있습니다.
예를 들어, index 페이지를 만들려면 app 디렉토리 안에 page.js 파일을 추가하세요:
app/page.tsx
// `app/page.tsx`는 `/` URL의 UI입니다
export default function Page() {
return <h1>Hello, Home page!</h1>;
}app/page.js
// `app/page.js`는 `/` URL의 UI입니다
export default function Page() {
return <h1>Hello, Home page!</h1>;
}그 다음, 추가 페이지를 만들려면 새 폴더를 만들고 그 안에 page.js 파일을 추가하세요. 예를 들어, /dashboard 라우트의 페이지를 만들려면 dashboard라는 새 폴더를 만들고 그 안에 page.js 파일을 추가하세요:
app/dashboard/page.tsx
// `app/dashboard/page.tsx`는 `/dashboard` URL의 UI입니다
export default function Page() {
return <h1>Hello, Dashboard Page!</h1>;
}app/dashboard/page.js
// `app/dashboard/page.js`는 `/dashboard` URL의 UI입니다
export default function Page() {
return <h1>Hello, Dashboard Page!</h1>;
}알아두면 좋은 점:
- 페이지에는
.js,.jsx, 또는.tsx파일 확장자를 사용할 수 있습니다.- 페이지는 항상 라우트 하위 트리의 리프입니다.
- 라우트 세그먼트를 공개적으로 접근 가능하게 만들려면
page.js파일이 필요합니다.- 페이지는 기본적으로 서버 컴포넌트이지만, 클라이언트 컴포넌트로 설정할 수 있습니다.
- 페이지에서 데이터를 가져올 수 있습니다. 자세한 정보는 데이터 가져오기 섹션을 참조하세요.