Next.js 시작하기 - Introduction. App Router

Next.js 공식 홈페이지의 Learn - https://nextjs.org/learn/dashboard-app 페이지의 첫 강좌 Introduction에서 제일 먼저 나오는 것이 바로 App Router이다. 우선 App Router에 대해서 살펴보기로 하자.

App Router란?

App Router는 Next.js 13에서 도입된 새로운 라우팅 시스템이다. 기존의 Pages Router를 대체하는 방식으로, React 18의 새로운 기능들을 활용할 수 있도록 설계되었다.

기본 구조

App Router는 app 디렉토리를 사용합니다. 폴더 구조가 곧 URL 경로가 되는 파일 시스템 기반 라우팅을 사용한다.

app/
├── page.tsx          // 홈페이지 (/)
├── about/
│   └── page.tsx      // /about
├── blog/
│   ├── page.tsx      // /blog
│   └── [slug]/
│       └── page.tsx  // /blog/[slug]
└── layout.tsx        // 루트 레이아웃

주요 특징

서버 컴포넌트 기본값: App Router의 모든 컴포넌트는 기본적으로 서버 컴포넌트이다. 클라이언트 컴포넌트가 필요한 경우에만 'use client' 지시어를 사용한다.

중첩 레이아웃: 폴더마다 layout.tsx 파일을 생성하여 중첩된 레이아웃을 구현할 수 있다. 상위 레이아웃은 하위 페이지에 자동으로 적용된다.

특수 파일들:

• page.tsx: 실제 페이지 컴포넌트
• layout.tsx: 레이아웃 컴포넌트
• loading.tsx: 로딩 UI
• error.tsx: 에러 UI
• not-found.tsx: 404 에러 페이지

데이터 페칭

App Router에서는 컴포넌트 내에서 직접 async/await를 사용할 수 있다:

// app/posts/page.tsx
async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json());

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

Pages Router와의 차이점

• 디렉토리: pages → app
• 파일 구조: pages/about.tsx → app/about/page.tsx
• 데이터 페칭: getServerSideProps, getStaticProps → 컴포넌트 내 직접 fetch
• 기본값: 클라이언트 컴포넌트 → 서버 컴포넌트

App Router는 현재 안정 버전이며, Next.js 팀이 권장하는 방식이다. 단, 기존 Pages Router 프로젝트를 마이그레이션할 때는 점진적으로 진행하는 것이 좋다.

---

이상이 App Router에 대한 기본 설명이다. 이후 진행되는 강좌의 예제는 이 App Router 방식을 사용한다.
강좌를 진행하기 위해서는 React 기초에 관한 사전 지식이 필요하며, Node.js 18.18.0 이후 버전을 사용한다.
추가로 Github와 Vercel의 계정이 필요하다.

이후 강좌에서는 관계형 데이터베이스(PostgreSQL)를 사용하여 Dashboard 형태의 사이트를 만들어 볼 것이며, 데이터 CRUD, 검색 및 페이지네이션,  에러 핸들링, 스타일링 등 일반적인 홈페이지 제작에 필요한 기능적인 요소들을 배우게 될 것이다.
원문에서는 기본 코드를 제공하며 자잘한 설명 등은 생략되어 있지만 가능하면 최종 결과물을 만드는 과정에서 필요하다고 생각되는 부분의 자세한 설명을 추가할 계획이다.