Next.js App Router vs Pages Router: 개념, 장단점 및 전환 가이드

## Next.js App Router vs Pages Router 비교

Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등을 지원하는 React 기반의 프레임워크입니다. 라우팅 시스템은 웹 애플리케이션의 구조와 개발 경험에 큰 영향을 미치는데, Next.js는 두 가지 주요 라우팅 방식, 즉 `Pages Router`와 `App Router`를 제공합니다.

### 1. Pages Router

*   **개념**: `pages` 디렉토리에 파일을 생성하여 라우트를 정의하는 전통적인 방식입니다. 파일 기반 라우팅을 따르며, 각 파일이 해당 경로의 페이지 컴포넌트가 됩니다.
*   **언제/왜 사용하는가**: 기존 Next.js 프로젝트에서 사용되어 왔으며, 직관적이고 간단한 프로젝트 구성에 적합합니다. API 라우트도 `pages/api` 디렉토리에 별도로 정의할 수 있습니다.
*   **주요 특징**: 
    *   `pages` 디렉토리 기반의 파일 시스템 라우팅.
    *   `getServerSideProps`, `getStaticProps` 등을 사용하여 데이터 페칭.
    *   `_app.js`, `_document.js` 등을 통한 전역 설정.
*   **장점**: 
    *   오랫동안 사용되어 온 안정적인 방식.
    *   상대적으로 간단한 구조로 초보자가 이해하기 쉬움.
*   **단점**: 
    *   서버 컴포넌트 기능을 활용하기 어려움.
    *   복잡한 레이아웃 관리나 중첩 라우팅 구현이 다소 번거로울 수 있음.
    *   데이터 페칭 방식이 제한적일 수 있음.

### 2. App Router

*   **개념**: Next.js 13부터 도입된 새로운 라우팅 시스템으로, `app` 디렉토리를 사용합니다. React Server Components를 기본으로 하며, 중첩 라우팅, 레이아웃, 스트리밍 등 최신 웹 개발 패턴을 지원합니다.
*   **언제/왜 사용하는가**: 새로운 Next.js 프로젝트를 시작하거나, React Server Components의 장점을 최대한 활용하고 싶을 때, 복잡한 레이아웃과 중첩 라우팅이 필요한 경우에 사용합니다.
*   **주요 특징**: 
    *   `app` 디렉토리 기반의 파일 시스템 라우팅.
    *   `layout.js` 파일을 통한 중첩 레이아웃 지원.
    *   `page.js` 파일을 페이지 컴포넌트로 사용.
    *   `loading.js`, `error.js` 등을 통한 UI 상태 관리.
    *   React Server Components를 기본으로 지원하여 성능 향상.
    *   `fetch` API를 통한 간결한 데이터 페칭 및 캐싱.
*   **장점**: 
    *   React Server Components를 활용한 성능 최적화.
    *   강력한 중첩 라우팅 및 레이아웃 시스템.
    *   스트리밍 UI, Suspense 지원으로 사용자 경험 개선.
    *   코드 분할 및 최적화 용이.
*   **단점**: 
    *   Pages Router에 비해 학습 곡선이 높을 수 있음.
    *   아직 모든 기능이 안정화되지 않았거나, 기존 패턴과의 차이로 혼란이 있을 수 있음.
    *   클라이언트 컴포넌트와 서버 컴포넌트의 명확한 구분이 필요.

### 3. App Router vs Pages Router 비교

| 특징             | Pages Router                               | App Router                                             |
| :--------------- | :----------------------------------------- | :----------------------------------------------------- |
| **디렉토리**     | `pages`                                    | `app`                                                  |
| **기본 컴포넌트**| Client Components                          | Server Components (기본값)                             |
| **라우팅**       | 파일 경로 기반                             | 파일 경로 + `route.js` (API), `page.js` (페이지)        |
| **레이아웃**     | `_app.js` 등으로 제한적, 컴포넌트 직접 구성 | `layout.js` 파일로 계층적, 자동 중첩                   |
| **데이터 페칭**  | `getStaticProps`, `getServerSideProps`   | `fetch` API (서버 컴포넌트 내), 다양한 캐싱 전략       |
| **중첩 라우팅**  | 서브디렉토리 및 컴포넌트 구현              | `layout.js` 및 `page.js` 조합으로 네이티브 지원        |
| **API 라우트**   | `pages/api` 디렉토리                       | `route.js` 파일 (app 디렉토리 내)                      |
| **최신 기능**    | 지원 제한적                                | React Server Components, Suspense, Streaming 등 지원 |

### 4. 전환 시 고려사항

*   **새로운 프로젝트**: 특별한 이유가 없다면 App Router를 권장합니다.
*   **기존 프로젝트**: 점진적인 전환을 고려할 수 있습니다. `app` 디렉토리와 `pages` 디렉토리를 함께 사용할 수 있으므로, 새로운 기능이나 라우트에 App Router를 적용하고 점차 확장해 나가는 방식입니다.
*   **학습**: App Router는 React Server Components, Suspense 등 새로운 개념을 포함하므로 충분한 학습이 필요합니다.
*   **라이브러리 호환성**: 일부 라이브러리는 App Router 환경에서 작동 방식이 다를 수 있으므로 확인이 필요합니다.

App Router는 Next.js의 미래 방향성을 제시하며, 더욱 효율적이고 성능이 뛰어난 애플리케이션 개발을 가능하게 합니다. 하지만 프로젝트의 성격과 팀의 숙련도를 고려하여 적절한 라우팅 방식을 선택하는 것이 중요합니다.