Next - App Router와 Pages Router

 주요 의사결정의 핵심, 라우팅

📌 일반적으로 Next.js를 채택할 때 주요한 의사결정

1. Pages router 사용?

2. App router 사용?

 

📌 Next.js는 라우팅(Routing)을 중심으로 두 가지로 나뉘게 된다.

1. 12버전까지 사용해오던 Pages Router 방식

2. 13버전부터 새롭게 도입된 App Router 방식

 

📌 그렇다면 왜 router 기반으로 주요한 속성을 분류하는 것인가 의문이 들었다.

1. 우리는 웹사이트를 기획할 때, 어떤 페이지가 존재할지, 라우팅은 어떻게 할지를 먼저 고민한다!!

2. 라우팅은 그만큼 프론트엔드 개발자에게 아주 중요하다.

 

 

React와 Next.js에서의 라우팅 구현 방법

React.js : react-router-dom을 이용해서 라우팅을 가능하게 함

Next.js : File System Base 라우팅

 

Next js는 폴더 구조를 기반으로 라우팅을 자동 생성하는 File System Base 라우팅을 제공한다.

또한, 라우팅에 대한 전략이 next.js 13버전을 기점으로 변경되었다.

 

1. 기존에 사용되어 오던 Pages Router

(pages 폴더에 원하는 페이지의 파일 이름을 둔다)

 

2. 13버전부터 도입된 App Router

(app 폴더 밑에 폴더명을 기반으로 자동 라우팅)

 

 

App Router VS Pages Router

❓그럼 뭘 써야할까 ❓

 

🗨 Pages Router는 전부터 존재했기 때문에 이미 Pages Router로 만들어진 프로젝트들이 많을텐데...

 

🗨 공식 홈페이지에서는 이제 웬만하면 App router 쓰라고 하던데...

 

가장 중요한 것은 기존 React가 가지고 있는 한계를 이해하고 왜 Next를 사용하는지 아는것이 중요하다고 생각한다,

 

결국 Pages Router든 App router든 Routing, Rendering, Data Fetching 등 핵심 개념을 잘 이해하는것이 어떤 기술을 하느냐 선택하는것만큼 중요하다.

 

 

✅ 특징 비교

두 라우터의 차이를 잘 비교해서 각 라우팅 시스템이 제공하는 장점과 프로젝트의 요구사항을 기반으로 선택해야한다.