Next.js 13에서 도입되어 이제 표준이 된 “App Router”. 기존의 Pages Router에서 크게 개념이 바뀌었기 때문에, 아직 이행에 발을 디디고 있는 분도 있을지도 모릅니다. 이 기사에서는 App Router를 이해하기위한 기초를 단계별로 설명합니다.
1단계: 디렉토리 구조의 차이점 이해
기존의 Pages Router에서는 pages 디렉토리의 파일 이름이 그대로 URL 라우팅이 되었습니다(예: pages/about.tsx → /about).
App Router에서는 app 디렉토리를 사용합니다. URL 라우팅은 폴더 이름으로 결정되었으며 폴더에 항상 page.tsx라는 파일을 넣는 규칙으로 변경되었습니다 (예 : app/about/page.tsx → /about).
겉보기에는 귀찮아 보이지만, 이것에 의해 「라우팅에 관계가 없는 컴퍼넌트나 테스트 파일을, 같은 폴더내에 공존시킬 수 있다」라고 하는 큰 이점이 탄생했습니다.
2단계: 레이아웃 개념 잡기
App Router의 강력한 기능은 ‘Layout’입니다.
app/layout.tsx를 만들면 폴더 아래의 모든 페이지에 공통 UI(헤더, 바닥글 등)를 적용할 수 있습니다.
특필해야 할 것은, 페이지 천이시에 이 Layout 부분은 「재렌더링되지 않는다」라는 점입니다. 이렇게하면 상태를 유지하면서 부드러운 화면 전환이 가능하여 응용 프로그램 성능이 크게 향상됩니다.
3단계: 서버와 클라이언트의 테두리를 그립니다.
이것이 가장 중요한 변화입니다. App Router의 구성 요소는 기본적으로 React Server Components(서버 측에서 실행되는 구성 요소)입니다.
서버 컴포넌트 내에서 브라우저의 API(예: window)와 React 훅(useState 또는 useEffect)을 사용할 수 없습니다.
만약 버튼의 클릭 이벤트등이 필요한 경우는, 파일의 선두에 "use client" 라고 기술해, 명시적으로 클라이언트 컴퍼넌트에 변환할 필요가 있습니다.
「기본은 서버에서 가볍게 렌더링해, 인터랙티브한 부분만을 클라이언트에 맡긴다」라고 하는 의식을 가지는 것이, App Router 공략의 열쇠입니다.
4단계: 데이터 가져오기 단순화
지금까지 필수였던 getServerSideProps나 getStaticProps와 같은 Next.js의 독자적인 함수는 폐지되었습니다.
대신, 표준의 fetch API를 컴퍼넌트내에서 직접 await 해 사용하는 것입니다. Next.js가 내부에서 fetch를 확장하고 있어 캐시의 제어등도 이 fetch의 옵션 인수만으로 직관적으로 할 수 있게 되었습니다.
단계를 밟고 이해하면 앱 라우터는 결코 무서운 것이 아닙니다. 보다 고도로 빠른 웹 앱 개발을 위해 꼭 첫 단계를 밟아보세요.