app router는 next.js 13버전부터 도입된 라우팅 시스템입니다. 그 전에는 pages router를 사용했었습니다.

app router

/app 디렉토리를 중심으로 작동하는 파일 기반 라우팅 시스템입니다. 각 폴더가 하나의 경로를 나타내고, 그 안의 page.js, layout.js, loading.js, error.js 등이 특정 역할을 수행합니다.

주요 특징

• 폴더 기반 라우팅: app/blog/page.jsx -> /blog URL로 매핑됨
• 서버 컴포넌트 지원: 기본적으로 React 서버 컴포넌트를 사용하며, 클라이언트 컴포넌트는 use client 지시어 필요
• 레이아웃 지원: layout.jsx를 통해 페이지간 공통 UI 유지 (ex. Navbar, Footer 등)
• 중첩 라우팅: 폴더 구조에 따라 중첩된 라우팅 가능
• 로딩 상태 지원: loading.jsx를 통해 비동기 로딩 UI 제공
• 에러 처리: error.jsx를 통해 페이지별 오류 처리 가능
• 동적 라우팅: [id]/page.jsx 형태로 동적 URL 처리 가능