🔁 7. Next.js App Router 완전 정복 — 왜 바뀌었고 뭐가 달라졌는지 정리해봤다

---

Next.js 13 이후에 도입된 App Router는 사실상 새로운 페이지 라우팅 패러다임이다.
기존에 익숙했던 Pages Router 방식과는 많이 달라서, 처음 보면 당황스럽지만,
쓰다 보면 진짜 강력하고 유연하다는 걸 느낄 수 있었다.

---

✅ App Router vs Pages Router 차이

항목	Pages Router	App Router
디렉토리 구조	pages/ 폴더 기반	app/ 폴더 기반
서버 컴포넌트	❌ 불가능	✅ 기본 지원 (Server Components)
레이아웃	페이지마다 따로 구성	✅ 중첩 레이아웃 자동 적용 (layout.tsx)
데이터 패칭	getServerSideProps 등 사용	✅ fetch, cache, use 등 자유로운 방식
라우팅 방식	파일 기반 라우팅	여전히 파일 기반이지만 Link, useRouter 등이 개선됨

---

✅ 디렉토리 구조 예시

app/
├── layout.tsx        // 공통 레이아웃
├── page.tsx          // 루트 페이지
├── about/
│   └── page.tsx      // /about 경로
├── dashboard/
│   ├── layout.tsx    // /dashboard 공통 레이아웃
│   └── page.tsx

---

✅ Server Components?

App Router에서는 기본적으로 컴포넌트가 서버에서 실행된다.
즉, 클라이언트에 불필요한 JS를 줄일 수 있다.
필요할 때만 use client 지시어를 통해 Client Components를 사용하면 된다.

// 서버 컴포넌트 (기본)
export default function Page() {
  const data = await fetch(...);
  return <div>{data}</div>;
}

// 클라이언트 컴포넌트
'use client'
import { useState } from 'react';

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

---

✅ 나만의 정리 포인트

• layout.tsx는 진짜 강력하다. 페이지 전환해도 layout이 유지돼서 유저 경험이 훨씬 부드러움.
• 클라이언트 컴포넌트는 필요한 곳에만 쓰면 돼서 최적화 측면에서 더 명확함
• metadata, loading.tsx, error.tsx, not-found.tsx 등 라우트별 전용 파일을 활용하면 페이지 상태 관리가 쉬워짐

---

📝 내가 느낀 점

App Router는 학습 곡선이 분명 있지만,
전체 프로젝트 구조를 모듈화, 최적화, UX 관점에서 깔끔하게 정리해주는 도구라는 느낌이 들었다.
특히 SSR/CSR 혼합이나 중첩 레이아웃이 너무 편해서, 앞으로 프로젝트에 기본으로 쓰게 될 것 같다.

---

🚀 “App Router는 단순한 구조 변경이 아니라, 웹앱 설계 방식 자체를 업그레이드하는 흐름이다.”

---