🛤️ Next.js Pages Router vs App Router — 직접 써본 개발자 후기!

“이건 단순한 디렉토리 구조 차이가 아니었습니다… 문명 전환이었죠!” – 초보자를 위한 비교 & 사용기

---

📌 들어가기 전에: "라우팅"이 뭐예요?

**라우팅(Routing)**은 말 그대로 “길 찾기”입니다.

웹에서 주소창에 https://example.com/about을 입력하면,
어떻게 React 앱은 자동으로 /about에 해당하는 컴포넌트를 보여줄까요?

👉 바로 라우터가 그 역할을 합니다!

---

📘 용어 설명: 라우터(Router)

URL에 따라 어떤 컴포넌트를 보여줄지 정해주는 시스템.
Next.js에서는 폴더와 파일 구조만으로 이걸 쉽게 만들 수 있어요!

---

🧓 Pages Router: 옛날 Next.js의 표준 방식

📁 구조는 정말 간단해요:

pages/
├── index.tsx        // /
├── about.tsx        // /about
└── blog/
    └── [slug].tsx   // /blog/:slug

👶 초보자 코멘트:

딱 봐도 “이 파일이 어떤 주소로 연결될지” 바로 보이죠!
그래서 입문자들이 처음 Next.js를 배울 때 부담이 적어요.

---

✅ 장점

• 진입 장벽이 낮음
• 빠르게 MVP(프로토타입) 만들 때 최고
• SSR/SSG 쉽게 구현 가능

---

❌ 단점

• 레이아웃을 페이지마다 복붙하게 됨
• error, loading 처리가 _app.tsx, _error.tsx에 몰림
• 중첩 라우팅이 복잡함

---

---

🚀 App Router: 최신 Next.js의 정석

Next.js 13부터 도입된 app 디렉토리 기반의 라우터입니다.

app/
├── layout.tsx              // 전체 레이아웃
├── page.tsx                // /
├── about/
│   └── page.tsx            // /about
├── blog/
│   └── [slug]/
│       ├── page.tsx        // /blog/:slug
│       ├── loading.tsx     // 로딩 UI
│       └── error.tsx       // 에러 UI

👶 초보자 코멘트:

처음 보면 복잡해 보일 수 있지만, 실제로는 역할이 명확하게 나뉘어 있어서
유지보수나 확장성 면에서는 훨씬 편해요!

---

📘 용어 설명: layout.tsx

해당 폴더의 모든 하위 페이지에 공통으로 적용되는 레이아웃.
예를 들어 사이드바, 헤더, 공통 네비게이션을 이곳에 둬요.

---

✅ 장점

• 구조가 명확하고 모듈화가 잘 되어 있음
• 페이지별 로딩/에러 처리 가능
• 서버 컴포넌트(RSC) 기본 지원 → 클라이언트가 가벼워짐!

---

❌ 단점

• 'use client' 선언이 낯설 수 있음
• 기존 프로젝트에서 전환하려면 학습이 필요

---

---

🔍 코드로 비교해보자

👴 Pages Router

// pages/blog/[slug].tsx
export async function getServerSideProps(context) {
  const post = await fetchPost(context.params.slug);
  return { props: { post } };
}

export default function PostPage({ post }) {
  return <div>{post.title}</div>;
}

---

🧒 App Router

// app/blog/[slug]/page.tsx
export default async function PostPage({ params }) {
  const post = await fetchPost(params.slug);
  return <div>{post.title}</div>;
}

📘 용어 설명: params

URL에서 [slug]에 들어가는 값을 가져오는 객체예요.
예: /blog/hello-world → params.slug === "hello-world"

---

🍜🍱 비유로 이해하는 두 라우터

비유	Pages Router	App Router
🍜 라면	모든 걸 한 파일에 섞음 → 빠르지만 복잡함	❌
🍱 도시락	반찬별로 칸 나눔 → 깔끔하고 확장성 좋음	✅

👶 초보자 팁:

프로젝트가 커지면 결국 도시락 구조가 훨씬 관리하기 쉬워요.
팀 프로젝트에서는 App Router가 훨씬 유리합니다!

---

💬 내가 직접 써본 후기

• 처음엔 pages/ 구조로 개발하다가 너무 복잡해져서 App Router로 전환
• layout.tsx 하나로 레이아웃 재사용이 편했고
• Supabase와 서버 컴포넌트 연동해서 성능도 좋아졌음
• loading.tsx, error.tsx 같은 분리 구조 덕분에 디자이너 협업도 쉬워졌음

📘 용어 설명: Supabase

Firebase 대체 서비스. DB를 쉽게 연결하고 사용할 수 있어요.

---

---

🛠️ 마이그레이션 팁 (pages → app)

1. pages/에서 쓰던 컴포넌트를 그대로 app/으로 복사
2. 서버에서 fetch 하는 부분은 page.tsx에서 처리
3. 공통 UI는 layout.tsx로 분리
4. 클라이언트만 쓰는 컴포넌트에는 'use client' 선언
5. 점진적으로 하나씩 전환하면 됨 (혼합 사용 가능!)

---

🎯 정리: 어떤 라우터를 써야 할까?

상황	추천 방식
빠르게 MVP 만들기	Pages Router ✅
정적 사이트, 블로그	Pages Router ✅
데이터 패칭 많은 SaaS 서비스	App Router ✅
협업 많고 구조가 큰 프로젝트	App Router ✅
SSR + RSC + 중첩 라우팅 원하는 경우	App Router ✅

---