Next.js 13의 앱라우터에는 페이지, 공유 레이아웃 및 템플릿을 쉽게 만들 수 있는 새로운 파일 규칙이 도입되었습니다. 이 페이지에서는 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 컴포넌트를 default로 내보내서 정의할 수 있습니다. 컴포넌트는 렌더링 중에 자식 레이아웃(있는 경우) 또는 자식 페이지로 채워질 children prop을 받아야합니다.