App Router 구조 이해하기

Next.js 13부터 도입된 App Router는 더 직관적이고 강력한 라우팅 시스템을 제공합니다.

이 절에서는 App Router의 기본 개념과 파일 기반 라우팅 시스템에 대해 자세히 알아보겠습니다.

App Router의 기본 개념

App Router는 app 디렉토리를 중심으로 작동합니다.

이 디렉토리 내의 폴더 구조가 웹 애플리케이션의 라우트 구조를 결정합니다. 주요 특징은 다음과 같습니다.

파일 기반 라우팅 : 파일 시스템을 기반으로 라우트가 자동으로 생성됩니다.
서버 컴포넌트 : 기본적으로 모든 컴포넌트는 서버 컴포넌트입니다.
코드 분할 : 자동으로 각 라우트별로 코드가 분할됩니다.
레이아웃 : 중첩된 레이아웃을 쉽게 구현할 수 있습니다.

app 디렉토리 구조와 라우팅 규칙

다음은 App Router의 기본 구조와 라우팅 규칙을 설명하는 도표입니다.

graph TD
    A[app] --> B[layout.js]
    A --> C[page.js]
    A --> D[loading.js]
    A --> E[error.js]
    A --> F[not-found.js]
    A --> G[about]
    G --> H[page.js]
    A --> I[blog]
    I --> J[layout.js]
    I --> K[[slug]]
    K --> L[page.js]
    A --> M[api]
    M --> N[route.js]

app/page.js : 메인 페이지 /
app/about/page.js : About 페이지 /about
app/blog/page.js : 블로그 메인 페이지 /blog
app/blog/[slug]/page.js : 동적 블로그 포스트 페이지 /blog/[slug]
app/api/route.js : API 라우트 /api

특수 파일의 역할과 사용 예

layout.js : 여러 페이지에서 공유되는 UI를 정의합니다.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My Website</header>
        {children}
        <footer>© 2024</footer>
      </body>
    </html>
  )
}

page.js : 라우트의 고유한 UI를 정의합니다.

// app/page.js
export default function Home() {
  return <h1>Welcome to my website!</h1>
}

loading.js : 페이지 로딩 중 표시될 UI를 정의합니다.

// app/loading.js
export default function Loading() {
  return <div>Loading...</div>
}

error.js : 에러 발생 시 표시될 UI를 정의합니다.

// app/error.js
'use client' // 에러 컴포넌트는 클라이언트 컴포넌트여야 합니다.
 
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

not-found.js : 404 에러 페이지를 정의합니다.

// app/not-found.js
export default function NotFound() {
  return <h1>404 - Page Not Found</h1>
}

동적 라우트

동적 라우트는 대괄호 []를 사용하여 정의합니다.

// app/blog/[slug]/page.js
export default function BlogPost({ params }) {
  return <h1>Blog Post: {params.slug}</h1>
}

이 파일은 /blog/any-slug 형태의 모든 URL에 매치됩니다.

4장 라우팅 심화와의 연결

이 절에서 소개한 App Router의 기본 구조는 4장 "라우팅 심화"의 기초가 됩니다. 4장에서는 여기서 배운 개념을 바탕으로 더 복잡한 라우팅 시나리오, 예를 들어 중첩 라우트, catch-all 세그먼트, 라우트 그룹 등을 다루게 됩니다. 기본 구조를 잘 이해하면 고급 라우팅 기능을 쉽게 습득할 수 있습니다.

실습 : 간단한 라우팅 구조 만들기

다음 요구사항을 만족하는 라우팅 구조를 구현해보세요.

홈페이지 /
About 페이지 /about
블로그 목록 페이지 /blog
개별 블로그 포스트 페이지 /blog/[slug]
전체 페이지에 적용되는 레이아웃
블로그 관련 페이지에만 적용되는 레이아웃
로딩 상태 UI
에러 페이지

구현 단계

app 디렉토리 내에 필요한 폴더와 파일을 생성합니다.
각 page.js 파일에 간단한 컴포넌트를 구현합니다.
루트 layout.js와 블로그용 layout.js를 만듭니다.
loading.js와 error.js 파일을 추가합니다.
동적 라우트 /blog/[slug]를 구현합니다.

이 실습을 통해 App Router의 기본 구조와 특수 파일의 사용법을 직접 경험해볼 수 있습니다. 이는 복잡한 Next.js 애플리케이션을 구축하는 데 필요한 기초를 제공할 것입니다.

App Router는 Next.js의 강력한 기능 중 하나로, 직관적이고 확장 가능한 라우팅 시스템을 제공합니다. 파일 기반 라우팅의 단순성과 서버 컴포넌트의 성능 이점을 결합하여, 개발자가 복잡한 웹 애플리케이션을 더 쉽게 구축할 수 있게 해줍니다. 이 구조를 잘 이해하고 활용하면, 효율적이고 유지보수가 용이한 Next.js 프로젝트를 개발할 수 있습니다.

개발 서버 실행 및 기본 설정 페이지 생성하기