Next.js App Router vs Pages Router: 차이와 점진적 마이그레이션

2026년 먼저 확인할 결론

App Router는 Server Components·Suspense 같은 최신 React 기능을 지원하는 새 라우터이고, Pages Router는 기존 애플리케이션을 위해 계속 지원된다. 기존 pages 프로젝트는 두 라우터를 병행한 채 경로별로 이전할 수 있다.

주의할 점은 서로 다른 라우터가 제공하는 경로 사이의 이동이 hard navigation이 된다는 것이다. 따라서 전환은 작은 경로 단위로 테스트하며 진행하는 편이 안전하다.

2026년 기준: App Router와 Pages Router

Next.js는 파일 시스템 기반 라우팅을 제공한다. Pages Router는 pages 디렉터리를, App Router는 app 디렉터리와 page·layout 같은 특수 파일 규칙을 사용한다. 두 방식 모두 URL과 UI를 연결하지만, React 기능과 마이그레이션 방식에서 차이가 있다.

현재 진행중인 프로젝트의 /user 폴더 내부 모습이다. 이렇게만 폴더를 구성해도 http://프로젝트/user/change-username 와 같은 url로 접속하면 프로젝트가 잘 라우팅되어 동작한다. 이러한 Next.js에서 기본 제공되는 라우터를 Page Router라고 부른다.

App Router

App Router는 app 디렉터리에서 동작하는 새 라우터다. Server Components·Suspense 같은 React 기능과 함께 설계됐으며, Pages Router와 같은 프로젝트 안에서 병행할 수 있다.

공식 문서의 App Router 설명

레이아웃

상태를 유지하고 Rerendering을 방지하면서 자체 경로 안의 컴포넌트와 UI를 쉽게 공유할 수 있다.

이제 App Router는 https://프로젝트/dashboard 라우팅을 위해 /app/dashboard/page.js 파일을 생성해야 한다.

// app/dashboard/page.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

이제 같은 폴더 내에 layout 파일을 정의한다. 레이아웃은 여러 페이지 간에 UI를 공유한다. 레이아웃은 상태를 유지하고 해당 폴더 내에서 탐색할때 다시 렌더링되지 않는 장점이 있다. 마치 전역 컴포넌트를 정의한 것이다.

// app/dashboard/layout.js
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

서버 컴포넌트

React의 서버 컴포넌트 아키텍처 지원

서버 컴포넌트를 통해 프론트엔드 서버에서 html을 빌드하여 클라이언트로 보내는데, 클라이언트로 전송되는 JS코드 양을 줄이고, 복잡한 인터페이스를 구축할 수 있어 초기 페이지 로드 속도를 빠르게 해준다.

URL이 로드되면 Next.js와 React 런타임이 로드된다. 이렇게 되면 캐시를 사용할 수 있고 런타임이 예측 가능하다. 애플리케이션이 커져도 런타임 크기가 늘어나지 않는다. 런타임이 비동기로 로드되기 때문에 서버의 HTML이 클라이언트에서 점진적으로 향상될 수 있다. ← 말이 좀 어려운 것은 번역을 해서 그렇습니다…

서버 컴포넌트에 관해 자세히 알기 위해 아래 글을 추천한다

Velog - React 서버 컴포넌트에 대한 고찰

스트리밍

로딩 상태 표시 & 렌더링되는 UI 단위 스트리밍

dashboard 내부에 loading.js를 추가하면 어떤 위치에서 로딩할때 이미 Next.js에서 로드된 loading.js 파일 기반의 컴포넌트를 사용하여 로딩 중임을 표시하고, 데이터가 로딩이 완료된 부분을 먼저 표시한다. React의 Suspense와 상당히 비슷하다.

Data Fetching

데이터를 가져오고 Promise를 처리하는 새로운 방법

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}
 
// This is an async Server Component
export default async function Page() {
  const data = await getData();
 
  return <main>{/* ... */}</main>;
}

App Router에서는 서버 컴포넌트와 새로운 데이터 패칭·캐싱 모델을 사용한다. 다만 getServerSideProps·getStaticProps·getStaticPaths가 Pages Router 전체에서 사라지는 것은 아니다. 해당 경로를 app으로 옮길 때 각각 App Router의 데이터 패칭과 generateStaticParams 등으로 바꾸는 방식이다.

Page Router와 App Router의 비교

공식 문서는 번역본을 사용하고 서버 컴포넌트 등 새로운 것들을 이야기해서 어렵기도 한다. 그래서 검색하여 찾은 여러 정보들을 바탕으로 두개의 차이점을 정리해보자

1. 표로 정리한 차이점

2. 목적과 스트럭처에 대한 차이점

• 목적
• App Router: app 디렉터리의 route segment와 page·layout 특수 파일로 UI와 중첩 레이아웃을 구성하며, 최신 React 기능을 지원한다.
  • Pages Router: pages 디렉터리의 파일을 URL에 매핑하는 기존 라우터다. 현재도 지원되므로 이미 안정적으로 운영 중인 앱을 즉시 전면 전환할 필요는 없다.
• 스트럭처
• App Router: app/layout.js의 root layout과 중첩 layout으로 공통 UI를 구성한다.
  • Pages Router: pages/_app.js와 pages/_document.js가 앱 전역 설정과 문서 구조를 담당한다.

3. 정리를 해보자면…

App Router로 옮긴 경로에서는 getServerSideProps·getStaticProps·getStaticPaths 대신 App Router의 데이터 패칭과 generateStaticParams 등을 사용한다. 하지만 이 변화는 경로별 마이그레이션의 일부이며, Pages Router를 사용하는 다른 경로에 자동으로 적용되지 않는다.

새 프로젝트라면 App Router의 최신 React 기능과 layout·loading·error 같은 파일 규칙을 우선 검토할 수 있다. 기존 프로젝트는 app과 pages를 함께 두고, 테스트 가능한 경로부터 작게 이전하는 방식이 위험을 줄인다.

공식 자료와 추가 읽을거리

• Next.js Docs - App Router와 Pages Router
• Next.js Docs - Pages Router에서 App Router로 점진적 마이그레이션
• Next.js Blog - Next.js 13 출시
• Next.js Blog - Next.js App Router 업데이트