Next.js 15 App Router란? Pages Router와 달라진 점과 핵심 개념 정리

Next.js 15로 프로젝트를 시작하다 보면 가장 먼저 맞닥뜨리는 변화는 바로 App Router입니다.
기존의 pages 기반 라우팅과는 구조부터 방식까지 확연히 달라서 처음 접하는 분들은 혼란스러울 수 있어요.

이번 글에서는 App Router의 기본 개념부터 디렉토리 구조, layout.tsx, Server/Client Component, metadata, 그리고 간단한 예제까지, 처음 App Router를 도입하는 사람도 이해할 수 있도록 정리해보았습니다.

---

🔍 App Router란?

기존 Pages Router는 pages/ 디렉토리 내 파일명을 URL과 매핑하는 방식이었습니다.
하지만 App Router는 app/ 디렉토리를 기반으로 보다 명시적인 컴포넌트 중심 설계를 도입했습니다.

이는 다음과 같은 이점을 제공합니다:

• 레이아웃의 중첩 및 공유가 쉬움
• Server Components 기본 지원
• 동적 라우팅 및 데이터 패칭 유연성 향상
• 기본적인 SEO metadata 설정 내장

---

🗂 기본 디렉토리 구조

app/
├─ layout.tsx     # 모든 페이지에 공통되는 레이아웃
├─ page.tsx       # 루트 페이지 (예: '/')
├─ about/
│  ├─ page.tsx    # '/about' 라우트
│  └─ layout.tsx  # '/about' 관련 페이지들의 공통 레이아웃
├─ dashboard/
│  ├─ page.tsx    # '/dashboard'
│  ├─ loading.tsx # 로딩 상태 처리
│  └─ error.tsx   # 에러 처리

✅ 핵심 파일 설명

---

⚙️ Server Component vs Client Component

App Router에서 모든 컴포넌트는 기본적으로 Server Component입니다.
"use client" 지시어를 통해 클라이언트 전용 컴포넌트로 지정할 수 있어요.

// 클라이언트 컴포넌트 예시
'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

❗ 주의: useState, useEffect, onClick 등 클라이언트 사이드 훅을 사용하는 경우 반드시 "use client" 선언이 필요합니다.

---

🧠 기본 Metadata 설정

App Router에서는 SEO에 유리한 정적 metadata 설정이 가능해졌습니다.

// app/page.tsx
export const metadata = {
  title: '홈페이지 제목',
  description: '이 페이지는 Next.js App Router를 소개합니다.',
};

export default function HomePage() {
  return <h1>Welcome!</h1>;
}

---

💡 실제 예제: /about 라우트 만들기

app/
└─ about/
   ├─ page.tsx
   └─ layout.tsx

page.tsx

export default function AboutPage() {
  return <div>소개 페이지입니다.</div>;
}

layout.tsx

export default function AboutLayout({ children }: { children: React.ReactNode }) {
  return (
    <section>
      <h2>About 영역 공통 레이아웃</h2>
      {children}
    </section>
  );
}

---

✅ 마무리: 왜 App Router를 써야 할까?

Next.js 15의 App Router는 처음에는 다소 복잡하게 느껴질 수 있지만,
구조적인 페이지 구성, 서버 중심 렌더링, SEO 최적화, 코드 분리 및 유지보수성 향상 등
현대적인 웹 개발에 필수적인 기능들이 집약된 강력한 기능입니다.

앞으로의 시리즈에서는

• 동적 라우팅 ([id]/page.tsx)
• 서버 데이터 패칭 (fetch, getData)
• middleware 활용법
  등을 추가로 다룰 예정이니, 구독이나 북마크 해두시면 좋습니다!

---

🔗 추천 문서 링크

• 공식 문서: App Router 개요
• Next.js Server Components