레이아웃과 페이지 생성 방법

Next.js는 파일 시스템 기반 라우팅을 사용하므로 폴더와 파일을 통해 라우트를 정의할 수 있습니다. 이 페이지에서는 레이아웃과 페이지를 생성하고 서로 연결하는 방법을 안내해드립니다.

<script>alert(1)</script>

<a>

실습

설치하기
실습하기
커스텀하기
~~

페이지 생성하기

페이지는 특정 라우트에서 렌더링되는 UI입니다. 페이지를 생성하려면 app 디렉토리 내에 페이지 파일을 추가하고 React 컴포넌트를 기본 내보내기하면 됩니다. 예를 들어, 인덱스 페이지(/)를 생성하려면:

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

레이아웃 생성하기

레이아웃은 여러 페이지 간에 공유되는 UI입니다. 페이지 이동 시 레이아웃은 상태를 유지하고, 상호작용이 가능하며, 다시 렌더링되지 않습니다.

레이아웃을 정의하려면 layout 파일에서 React 컴포넌트를 기본 내보내기하면 됩니다. 이 컴포넌트는 페이지나 다른 레이아웃이 될 수 있는 children prop을 받아야 합니다.

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

// app/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* 레이아웃 UI */}
        {/* children을 페이지나 중첩된 레이아웃을 렌더링하고 싶은 곳에 배치하세요 */}
        <main>{children}</main>
      </body>
    </html>
  )
}

위의 레이아웃은 app 디렉토리의 루트에 정의되어 있기 때문에 루트 레이아웃이라고 합니다. 루트 레이아웃은 필수이며 반드시 html과 body 태그를 포함해야 합니다.

중첩 라우트 생성하기

중첩 라우트는 여러 URL 세그먼트로 구성된 라우트입니다. 예를 들어, /blog/[slug] 라우트는 세 개의 세그먼트로 구성됩니다:

/ (루트 세그먼트)
blog (세그먼트)
[slug] (리프 세그먼트)

Next.js에서는:

폴더를 사용하여 URL 세그먼트에 매핑되는 라우트 세그먼트를 정의합니다.
page와 layout 같은 파일을 사용하여 세그먼트에 표시될 UI를 생성합니다.

중첩 라우트를 생성하려면 폴더를 서로 중첩하면 됩니다. 예를 들어, /blog 라우트를 추가하려면 app 디렉토리에 blog라는 폴더를 생성합니다. 그런 다음 /blog를 공개적으로 접근 가능하게 만들려면 page 파일을 추가하세요:

// app/blog/page.tsx
import { getPosts } from '@/lib/posts'
import { Post } from '@/ui/post'
 
export default async function Page() {
  const posts = await getPosts()
 
  return (
    <ul>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </ul>
  )
}

특정 블로그 포스트의 라우트를 생성하려면 blog 안에 새로운 [slug] 폴더를 만들고 page 파일을 추가하세요:

// app/blog/[slug]/page.tsx
function generateStaticParams() {}
 
export default function Page() {
  return <h1>Hello, Blog Post Page!</h1>
}

참고: 폴더 이름을 대괄호로 감싸면(예: [slug]) 데이터로부터 여러 페이지를 생성하는 데 사용되는 특별한 동적 라우트 세그먼트가 생성됩니다. 이는 블로그 포스트, 제품 페이지 등에 유용합니다.

레이아웃 중첩하기

기본적으로 폴더 계층 구조의 레이아웃도 중첩되어 있어서 children prop을 통해 자식 레이아웃을 감쌉니다. 특정 라우트 세그먼트(폴더) 내에 layout을 추가하여 레이아웃을 중첩할 수 있습니다.

예를 들어, /blog 라우트의 레이아웃을 생성하려면 blog 폴더에 새로운 layout 파일을 추가하세요:

// app/blog/layout.tsx
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

위의 두 레이아웃을 결합하면, 루트 레이아웃(app/layout.js)이 블로그 레이아웃(app/blog/layout.js)을 감싸고, 이는 다시 블로그(app/blog/page.js)와 블로그 포스트 페이지(app/blog/[slug]/page.js)를 감싸게 됩니다.

<script>alert(1)</script>

페이지 간 링크 연결하기

라우트 간 이동을 위해 <Link> 컴포넌트를 사용할 수 있습니다. <Link>는 프리페칭과 클라이언트 사이드 내비게이션을 제공하기 위해 HTML <a> 태그를 확장한 Next.js 내장 컴포넌트입니다.

예를 들어, 블로그 포스트 목록을 생성하려면 next/link에서 <Link>를 가져와서 컴포넌트에 href prop을 전달하세요:

// app/ui/post.tsx
import Link from 'next/link'
 
export default async function Post({ post }) {
  const posts = await getPosts()
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

<Link>는 Next.js 애플리케이션에서 라우트 간 이동을 위한 기본적이고 권장되는 방법입니다. 하지만 더 고급 내비게이션을 위해 useRouter 훅을 사용할 수도 있습니다.