앱 라우터(App Router)는주로Next.js 프레임워크에서 사용하는 최신 라우팅 시스템으로,app폴더를 기반으로 파일 시스템을 통해 라우트를 정의하며 리액트 서버 컴포넌트, 중첩 라우팅, 로딩/에러 처리 등 강력한 기능을 제공하여 성능과 개발 경험을 향상시키는 새로운 방식입니다. 이는 이전의 페이지 기반 라우터(Page Router)와 대비되며, 서버와 클라이언트 코드 제어, 확장성, 그리고 React의 최신 기능을 활용하는 데 중점을 둡니다.
주요 특징
파일 시스템 기반 라우팅: 폴더 구조가 URL 경로가 되며,page.tsx파일이 해당 경로의 UI를 렌더링합니다.
리액트 서버 컴포넌트(React Server Components): 기본적으로 서버 컴포넌트 기반으로 구축되어 성능 이점을 제공하고, 서버와 클라이언트 컴포넌트 혼합 사용이 용이합니다.
중첩 라우팅 & 레이아웃: 폴더 구조를 활용해 UI를 중첩하고 공통 레이아웃을 효율적으로 관리할 수 있습니다.
스트리밍 & Suspense:Suspense를 이용한 스트리밍으로 로딩 상태를 제어하고 사용자 경험을 개선합니다.
서버 액션(Server Actions): 서버에서 직접 실행되는 함수를 통해 데이터 변경을 간소화합니다.
캐싱 제어:route및cache태그를 사용하여 콘텐츠를 효율적으로 재검증하고 캐싱할 수 있습니다.
기존 페이지 라우터와의 차이점
기반: Page Router는 페이지(pages)를 기반으로,App Router는 app 폴더와 서버 컴포넌트를 기반으로 합니다.
성능 & 복잡성: App Router는 성능과 유연성이 높지만, 학습 곡선이 가파르고 초기 설정이 더 복잡할 수 있습니다.
앱폴더 내부는 URL경로에 폴더구조와 매핑이 된다.
폴더 구조가 그대로 요청 경로가 된다.
app router는 app폴더 안에 있는 구조대로 라우팅이 된다.
제일 마지막에 있는 settings라는 폴더에는 반드시 page.js가 있어야 된다.
setting를 정의하는 컴포넌트가 된다.
page.js는 예약어이다.
일반 컴포넌트는 폴더구조로 만들어도 되고 그냥으로 만들어도 된다.
그럴때는 index.js로 만들면 된다.
싱글 컴포넌트로 만들면 그런거 없다.
폴더가 곧 url이다..
/ : app 폴더
/ 폴더컴포넌트
app라우터
버전 13에서 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는React Server Components기반의 새로운App Router를 도입했습니다.
App Router는app이라는 새로운 디렉토리에서 작동합니다.app디렉토리는pages디렉토리와 함께 작동하여 점진적인 도입을 허용합니다. 이를 통해 애플리케이션의 일부 경로를 새로운 동작으로 전환하면서 다른 경로는 이전 동작을 위해pages디렉토리에 유지할 수 있습니다. 애플리케이션이pages디렉토리를 사용하는 경우,Pages Router문서도 참조하세요.
알아두면 좋은 점: App Router는 Pages Router보다 우선 순위가 높습니다. 디렉토리 간 경로가 동일한 URL 경로로 해석되면 빌드 타임 오류가 발생하여 충돌을 방지합니다.
댓글