[Next.js] Pages Router 와 App Router

회사 프로젝트와 현재 진행 중인 개인 프로젝트 모두 Next.js를 사용했다.
지금까지는 Pages Router를 사용해 왔는데, 이번에는 App Router와 어떤 차이가 있는지 간단히 정리해보려고 한다.

Pages Router

내가 사용하고 있는 방식은 Pages Router이다.

Pages Router는 pages 폴더를 기준으로 URL이 만들어진다.

예를 들어 아래와 같은 구조라면

pages
 ├ index.tsx
 ├ dental
 │   └ index.tsx
 └ community
     └ index.tsx

URL은 다음과 같다.

/
/dental
/community

파일 구조와 URL 구조가 연결되어 있어서 페이지를 찾거나 관리하기 편했다.

공통 설정은 주로 _app.tsx에서 관리한다.

---

App Router

Next.js 13부터는 App Router도 사용할 수 있다.

Pages Router가 pages 폴더를 사용한다면 App Router는 app 폴더를 사용한다.

예를 들어 아래와 같은 구조라면

app
 ├ page.tsx
 ├ dental
 │   ├ page.tsx
 │   └ [id]
 │       └ page.tsx

URL은 다음과 같이 만들어진다.

/
/dental
/dental/1

처음 봤을 때는 Pages Router와 비슷해 보였지만 몇 가지 차이가 있었다.

---

Layout 관리

Pages Router에서는 주로 _app.tsx를 사용했다면 App Router에서는 layout.tsx를 사용할 수 있다.

app
 ├ layout.tsx
 ├ dental
 │   ├ layout.tsx
 │   └ page.tsx

폴더별로 Layout을 나눌 수 있다는 점이 눈에 띄었다.

Server Component

또 하나 차이점은 App Router에서는 Server Component가 기본이라는 점이다.

그래서 useState, useEffect 같은 React 기능을 사용하려면 파일 상단에 "use client"를 작성해야 한다.

Pages Router를 사용할 때는 크게 신경 쓰지 않았던 부분이라 차이점으로 느껴졌다.

---

간단 비교

기준 폴더	pages	app
공통 설정	_app.tsx	layout.tsx
기본 방식	클라이언트 중심	서버 컴포넌트 중심
React Hooks 사용	바로 사용 가능	"use client" 필요

 

---

느낀 점

회사 프로젝트와 개인 프로젝트를 진행하면서 계속 Pages Router를 사용해 왔다.
사용하면서 크게 불편한 점은 없었고 현재 프로젝트 규모에서도 충분히 구현이 가능했다.
이번에 App Router와 비교해 보면서 Layout 관리 방식이나 Server Component 같은 차이도 다시 정리할 수 있었다.
다음에는 App Router도 직접 사용해 보면서 어떤 차이가 있는지 경험해 보면 좋을 것 같다.