앱 라우터와 페이지 라우터의 차이점은 무엇인가요?

Next.js에는 두 가지 라우터가 있습니다. 전통적인 페이지 라우터(pages/) 와, Next.js 13에서 도입돼 현재 권장되는 앱 라우터(app/) 입니다.

페이지 라우터 (pages/)

pages/ 폴더의 파일이 곧 경로가 됩니다. 데이터 패칭은 페이지 단위 함수로 합니다.

• getServerSideProps — 요청마다 서버에서 데이터 패칭(SSR)
• getStaticProps / getStaticPaths — 빌드 시 데이터 패칭(SSG)
• 모든 컴포넌트가 기본적으로 클라이언트 컴포넌트

앱 라우터 (app/)

app/ 폴더를 쓰며, 서버 컴포넌트가 기본입니다. 폴더 안의 특수 파일로 UI를 구성합니다.

• page.tsx — 해당 경로의 페이지
• layout.tsx — 중첩 가능한 공통 레이아웃(상태 유지)
• loading.tsx — Suspense 기반 로딩 UI
• error.tsx — 에러 바운더리
• 데이터 패칭은 서버 컴포넌트에서 async/await로 직접

핵심 차이

구분	페이지 라우터	앱 라우터
폴더	pages/	app/
기본 컴포넌트	클라이언트	서버 컴포넌트
데이터 패칭	getServerSideProps 등	컴포넌트 내 async/await
레이아웃	_app/_document	중첩 layout.tsx
스트리밍	제한적	Suspense·스트리밍 지원

두 라우터는 한 프로젝트에서 공존할 수 있어 점진적 마이그레이션이 가능합니다. 신규 프로젝트는 앱 라우터가 권장됩니다.

앱 라우터(app/)와 페이지 라우터(pages/)의 차이로 옳은 것은?

앱 라우터는 서버 컴포넌트가 기본이고 layout.tsx 같은 특수 파일로 UI를 구성한다.페이지 라우터에서는 서버 컴포넌트가 기본이다.두 라우터는 절대 같은 프로젝트에서 함께 쓸 수 없다.

CheckReset