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

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발 초보자 및 중급 개발자 (중간 난이도)

핵심 요약

• Pages Router는 간단한 구조와 빠른 MVP 개발에 적합하지만 레이아웃 재사용성과 SSR/SSG 확장성에 한계가 있음
• App Router는 layout.tsx 기반의 모듈화된 구조와 서버 컴포넌트(RSC) 지원으로 성능 향상 및 협업 효율성을 제공
• 프로젝트 규모에 따라 선택:

- 초기 MVP → pages/

- 대규모/협업 프로젝트 → app/

섹션별 세부 요약

1. 라우팅 기초 개념

• 라우팅은 URL에 따라 특정 컴포넌트를 표시하는 시스템
• Pages Router는 pages/ 디렉토리 기반으로 파일명이 URL 경로에 직접 매핑됨
• App Router는 app/ 디렉토리 기반으로 레이아웃, 페이지, 로딩/에러 처리 파일 분리 가능

2. Pages Router vs App Router 비교

• Pages Router

- 장점: _app.tsx/_error.tsx로 에러/로딩 처리, SSR/SSG 쉽게 구현

- 단점: 중첩 라우팅 복잡, 레이아웃 재사용 불가

• App Router

- 장점: layout.tsx로 공통 레이아웃 관리, loading.tsx/error.tsx 분리, RSC 지원

- 단점: 기존 프로젝트 마이그레이션 시 학습 곡선 존재

3. 코드 예시

• Pages Router

```tsx

// pages/blog/[slug].tsx

export async function getServerSideProps(context) {

const post = await fetchPost(context.params.slug);

return { props: { post } };

}

```

• App Router

```tsx

// app/blog/[slug]/page.tsx

export default async function PostPage({ params }) {

const post = await fetchPost(params.slug);

return

}

```

4. 비유 및 사용자 경험

• Pages Router → “라면” 비유: 모든 것을 한 파일에 섞음 (빠르지만 복잡)
• App Router → “도시락” 비유: 반찬별로 칸 나눔 (확장성, 유지보수성 우수)
• 개발자 후기: App Router로 Supabase 연동 시 성능 향상 및 디자이너 협업 용이

5. 마이그레이션 팁

1. pages/의 컴포넌트를 app/으로 복사
2. 서버 fetch 로직은 page.tsx로 이동
3. 공통 UI는 layout.tsx로 분리
4. 클라이언트 컴포넌트에 'use client' 선언
5. 점진적 마이그레이션 가능 (혼합 사용 허용)

결론

• 초기 MVP 개발 → pages/ 선택
• 대규모 프로젝트/SSR + RSC 필요 → app/ 선택
• 마이그레이션 시 layout.tsx 중심의 모듈화와 'use client' 선언을 주의 깊게 적용해야 함