Layouts and Pages

Next.js는 파일 시스템 기반 라우팅을 사용한다.

이는 폴더와 파일을 사용하여 라우트를 정의할 수 있다는 뜻이다.

이 페이지에서는 레이아웃과 페이지를 생성하고, 그 사이를 연결하는 방법을 안내한다.

1. 페이지 생성하기 (Creating a page)

페이지는 특정 라우트에서 렌더링되는 UI이다. 페이지를 생성하려면, app 디렉토리 안에 페이지 파일을 추가하고 React 컴포넌트를 default export 하면 된다.

예를 들어, 인덱스 페이지(/)를 생성하려면 다음과 같이 하면 된다.

app/page.tsx

export default function Page() {
  return <h1>Hello Next.js!</h1>
}

2. 레이아웃 생성하기

레이아웃은 여러 페이지에서 공유되는 UI이다.

네비게이션 시 레이아웃은 상태를 유지하고, 상호작용 가능하며, 다시 렌더링되지 않는다.

레이아웃을 정의하려면 layout 파일에서 React 컴포넌트를 default export하면 된다.

이 컴포넌트는 페이지 혹은 다른 레이아웃이 될 수 있는 children prop을 받아야 한다.

예를 들어, 인덱스 페이지를 자식으로 받는 레이아웃을 생성하려면 app 디렉토리 안에 레이아웃 파일을 추가하면 된다.

app/layout.tsx

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        {/* Place children where you want to render a page or nested layout */}
        <main>{children}</main>
      </body>
    </html>
  )
}

위 레이아웃은 app 디렉토리의 루트에 정의되어 있기에 루트 레이아웃(root layout)이라고 불린다. 루트 레이아웃은 필수이며 반드시 html 및 body 태그를 포함해야한다.