next.js page 라우터 vs app 라우터

rogie·2025년 12월 23일

1. Pages Router

Pages Router는 Next.js의 전통적인 라우팅 시스템입니다.

이 시스템은 파일 시스템 기반 라우팅을 사용하며, pages 디렉토리 내의 파일 구조가 곧 애플리케이션의 라우트 구조가 됩니다.

많은 기업에서 사용되고 있는 안정적인 라우터

주요 특징

pages 디렉토리 사용
파일 이름 기반의 라우팅
getStaticProps, getServerSideProps 등을 통한 데이터 페칭
간단하고 직관적인 구조

1.1 router

1.1.1 파일명 기준

pages라는 폴더안에 기능을 제공함.

pages폴더 안 컨포넌트파일명 기반의 페이지 라우팅을 자동으로 제공함.

ex)

index.js → ~/
about.js → ~/about
item.js → ~/item

1.1.2 폴더 명기준

about.js 파일이 없으니 폴더안에 있는 index.js 컨포넌트를 찾아 랜더링함.

1.1.3 동적 경로(Dynamic Rotes)

동적 경로란 경로 상의 어떠한 변할 수 있는 가변적인 값을 포함하고 있는 경로를 말함

예시) 블로그의 게시글, 쇼핑물의 상품별 상세페이지

동적 라우팅을 만들고 싶으면 파일명, 폴더명에 대괄호를 묶어서 사용한다

ex) [id], [bookid]

매핑된다.

1.2 getServerSideProps 활용

import { useState } from "react";

const URL =
  "https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&output=json&tzshift=0" as const;

export default function Home({ product }: any) {
  const [count, setCount] = useState(0);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
      }}
    >
      <span>{product}</span>
      <span>{count}</span>
      <button onClick={() => setCount((prev) => prev + 1)}>count</button>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch(URL);
  const data = await res.json();
  return {
    props: {
      product: data.product,
    },
  };
}

2. App Router

App Router는 Next.js 13에서 도입된 새로운 라우팅 시스템입니다. React 18의 새로운 기능들을 활용하며, 특히 React Server Components를 기본적으로 지원합니다.

주요 특징

app 디렉토리 사용
폴더 구조 기반의 라우팅
레이아웃, 로딩 상태, 에러 처리 등을 위한 특수 파일들
서버 컴포넌트 기본 지원
향상된 성능과 유연성

app router로 변하면서 파일명 router는 지원하지 않음.

그래서 폴더 기준으로 변함

검색 페이지인 search 페이지를 사용하려면 폴더를 만들어서 사용해야함.

3. 차이점 정리

구분	Pages Router	App Router
디렉토리 구조	`pages` 디렉토리	`app` 디렉토리
라우트 정의	파일 이름으로 라우트 정의	폴더 이름으로 라우트 정의, `page.js` 파일이 해당 라우트의 UI를 담당
레이아웃	`_app.js`와 `_document.js`로 전역 레이아웃 관리	각 폴더에 `layout.js` 파일을 두어 중첩 레이아웃 쉽게 구현
데이터 페칭	`getStaticProps`, `getServerSideProps` 등의 특수 함수 사용	컴포넌트 내에서 직접 `async`/`await` 사용 가능
서버컨포넌트	클라이언트 컴포넌트만 사용	서버 컴포넌트 기본 지원, `'use client'` 지시어로 클라이언트 컴포넌트 지정
동적 라우트	`[param].js` 파일로 동적 라우트 생성	`[param]` 폴더로 동적 라우트 생성

3.1 폴더 구조

pages router

pages
├── _app.js
├── _document.js
├── index.js
├── about.js
└── posts
    └── [id].js

App router

app
├── layout.js
├── page.js
├── about
│   └── page.js
└── posts
    └── [id]
        └── page.js

3. 3 실제 사용 경험과 추세

Pages Router 선호 이유:
- 익숙함: 많은 개발자들이 이미 Pages Router에 익숙합니다.
- 단순성: 간단한 프로젝트에서는 Pages Router가 더 직관적일 수 있습니다.
- 안정성: Pages Router는 오랜 기간 사용되어 안정적입니다.
- 학습 곡선: App Router는 새로운 개념 학습이 필요합니다.
App Router 불편 사항:
- 복잡성: 일부 개발자들은 App Router의 구조가 더 복잡하다고 느낍니다.
- 호환성 문제: 일부 라이브러리가 App Router와 완벽히 호환되지 않을 수 있습니다.
- 변화 속도: Next.js의 빠른 변화로 인한 학습 부담이 있습니다.
실제 사용 추세:
- 점진적 도입: 많은 팀들이 새 프로젝트에서 App Router를 시도하고 있습니다.
- 혼합 사용: 일부는 두 라우터를 혼합해서 사용하며 점진적으로 전환합니다.
- 기업 환경: 대규모 기업에서는 안정성 때문에 Pages Router를 선호하는 경향이 있습니다.