Next.js에는 두 가지 라우팅 시스템이 있다. App Router와 Pages Router. 이들은 Next.js에서 페이지를 구성하는 방식에 차이가 있다.
1.Pages Router
pages/ 디렉토리를 기반으로 라우팅을 처리하는 Next.js의 기존 라우팅 방식이다.
특징:
- 디렉토리 기반 라우팅 : pages/ 디렉토리 내의 파일이 자동으로 URL 경로와 매핑된다.
- 데이터 패칭 방식 : getStaticProps, getServerSideProps, getStaticPaths 등의 함수를 사용해서 데이터를 패칭한다.
- 단순 구조: 라우팅 구조가 직관적이고 간단하다.
- 기본 제공 기능 : next/link, next/router 등을 사용해 클라이언트 측 내비게이션과 페이지 전환 기능을 구현할 수 있따.
2. App Router
Next.js 13에서 도입된 새로운 라우팅 방식, app/ 디렉토리를 기반으로 작동.
특징:
- 파일 기반 라우팅 : app/ 디렉토리 내에 폴더 구조로 라우팅을 정의한다. 폴더명에 따라 URL경로가 생성된다.
- 데이터 패칭 방식 : 새로운 fetch, server actions, async 등의 기능을 통해 더욱 간단하고 효율적인 데이터 패칭을 지원한다. use 훅을 사용해 데이터를 바로 패칭할 수 있다.
- 레이아웃 지원 : layout.js 파일을 사용해 페이지마다 레이아웃을 정의할 수 있으며, 이 레이아웃은 해당 페이지와 하위 페이지에도 공유 된다.
- 코드 분할 : 페이지별로 필요한 컴포넌트만 불러오는 코드 스플리팅이 자동으로 적용된다.
선택 기준
- 소규모 프로젝트나 간단한 페이지를 다루는 경우: Page Router가 익숙하고 편리할 수 있다.
- 대규모 프로젝트나 최신 React 기능을 사용하고 싶다: App Router를 사용하는 것이 좋다. 서버 컴포넌트와 레이아웃 기능을 적극 활용할 수 있다.
굿