[Daily morning study] Next.js의 App Router와 Pages Router 비교

20 Nov 2025 in Daily morning study / -front

#daily morning study

Next.js의 App Router와 Pages Router 비교

Next.js는 리액트 기반의 프레임워크로, 효율적인 서버 사이드 렌더링 및 정적 사이트 생성 기능을 제공합니다. Next.js 13버전부터 도입된 App Router는 이전의 Pages Router와 많은 차이점을 가지며, 각각의 장단점이 존재합니다. 이 문서에서는 두 라우터의 구조와 기능, 사용하는 방식에 대해 자세히 살펴보도록 하겠다.

1. 기본 개념 및 목적

1.1. Pages Router

위치: pages 디렉토리에서 경로를 매핑
방식: 기본적인 파일 기반 라우팅
특징:
- 각각의 파일이 URL 경로에 직접 대응
- 디렉토리 구조가 URL 구조를 반영

1.2. App Router

위치: app 디렉토리에서 경로를 매핑
방식: 더 많은 유연성과 기능성을 제공하는 파일 기반 라우팅
특징:
- 레이아웃, 오류 처리, 데이터 페칭 같은 여러 기능 통합
- 비동기적인 UI 렌더링 및 보다 나은 성능 지원

2. 구조 비교

2.1. Pages Router 구조

pages 디렉토리 예:

/pages
  ├── index.js            // /
  ├── about.js            // /about
  ├── blog
  │   ├── index.js        // /blog
  │   ├── [id].js         // /blog/:id

2.2. App Router 구조

app 디렉토리 예:

/app
  ├── page.js             // /
  ├── about
  │   ├── page.js         // /about
  ├── blog
  │   ├── page.js         // /blog
  │   ├── [id]
  │   │   └── page.js     // /blog/:id

3. 데이터 페칭

3.1. Pages Router 데이터 페칭

데이터 페칭은 주로 getStaticProps, getServerSideProps와 같은 함수 통해 처리
예시: getStaticProps를 사용한 정적 사이트 생성 ```javascript // pages/blog/[id].js

export async function getStaticProps({ params }) { const post = await fetch(https://api.example.com/posts/${params.id}); return { props: { post } }; }

### 3.2. App Router 데이터 페칭
- 기본적으로 React의 `Suspense`를 활용하여 비동기의 데이터 로딩 처리
- 좀 더 간단하게 데이터 요청 가능
```javascript
// app/blog/[id]/page.js

async function getPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`);
  return res.json();
}

export default async function Post({ params }) {
  const post = await getPost(params.id);
  return <div>{post.title}</div>;
}

4. 레이아웃 및 에러 핸들링

4.1. Pages Router에서의 레이아웃

레이아웃을 위한 재사용성 낮음
중복을 피하기 위해 HOC 또는 컴포넌트를 사용해야 함

4.2. App Router에서의 레이아웃

간단하게 layout.js 파일을 생성하여 전체적인 레이아웃을 관리할 수 있음
예시: ```javascript // app/layout.js

export default function RootLayout({ children }) { return ( <html lang="en"> <body> <header>My Header</header> {children} <footer>My Footer</footer> </body> </html> ); }

### 4.3. 에러 페이지 처리
- App Router에서는 `error.js` 파일을 통해 에러를 핸들링할 수 있다.
```javascript
// app/error.js

export default function Error({ error }) {
  return <div>Error occurred: {error.message}</div>;
}

5. 성능 비교

Pages Router: 파일 기반 라우팅에 따라 페이지마다 데이터 요청이 이루어져 늦은 로드 시간 발생 가능
App Router: React의 Suspense와 더불어 중첩된 라우트에서의 데이터 로딩으로 더 빠른 렌더링 가능

6. 결론

Next.js의 App Router는 더 나은 유연성과 성능을 제공하면서도 더 복잡한 데이터 로딩 및 레이아웃 관리가 가능해졌다. 반면, Pages Router는 상대적으로 단순하고 이해하기 쉬운 구조를 제공하므로 기존 프로젝트의 유지보수나 단순한 웹사이트에 적합할 수 있다. 각 프로젝트의 요구사항에 맞춰 적절한 라우팅 방식을 선택하는 것이 중요하다.