Routing: Pages and Layouts

계속하기 전에 Routing Fundamentals 및 Defining Routes 페이지를 읽는 것을 권장합니다.

Next.js 13의 App Router에서는 페이지, 공유 레이아웃 및 템플릿을 쉽게 만들기 위한 새로운 파일 규칙을 소개했습니다. 이 페이지는 이러한 특별한 파일을 Next.js 애플리케이션에서 어떻게 사용할지에 대한 안내를 제공합니다.

Pages

페이지는 특정 라우트에 고유한 UI를 나타냅니다. 페이지는 page.js 파일에서 컴포넌트를 내보내어 정의할 수 있습니다. 중첩된 폴더를 사용하여 라우트를 정의하고 해당 라우트를 공개적으로 접근 가능하게 만들기 위해 page.js 파일을 사용하세요.

첫 번째 페이지를 만들려면 app 디렉토리 내에 page.js 파일을 추가하세요:

// `app/page.tsx` is the UI for the `/` URL
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

알아두면 좋은 사실:

• 페이지는 항상 라우트 서브트리의 말단에 위치합니다.
• .js, .jsx 또는 .tsx 파일 확장자가 페이지에 사용될 수 있습니다.
• 라우트 세그먼트를 공개적으로 접근 가능하게 하려면 page.js 파일이 필요합니다.
• 페이지는 기본적으로 서버 컴포넌트이지만 클라이언트 컴포넌트로 설정할 수 있습니다.
• 페이지는 데이터를 가져올 수 있습니다. 자세한 내용은 데이터 가져오기 섹션을 참조하세요.

Layouts

레이아웃은 여러 페이지 간에 공유되는 UI를 나타냅니다. 레이아웃은 상태를 보존하고 상호 작용하며 다시 렌더링되지 않습니다. 레이아웃은 중첩될 수도 있습니다.

레이아웃은 기본적으로 layout.js 파일에서 React 컴포넌트를 내보내는 것으로 정의할 수 있습니다. 컴포넌트는 렌더링 중에 자식 레이아웃(있는 경우) 또는 자식 페이지로 채워질 children prop을 받아들이는 것이 좋습니다.