Next.js 답게 개발하기: 앱 라우터의 설계 원리와 실전 가이드

Next.js에는 크게 두 가지의 라우터가 함께 제공되는데요.

바로 현재 주류로 자리 잡은 새로운 방식의 ‘앱 라우터(App Router)‘와 기존의 ‘페이지 라우터(Pages Router)‘입니다.

특히 앱 라우터는 ‘리액트 서버 컴포넌트(React Server Components, RSC)‘를 비롯한 리액트의 혁신적인 기능들을 지원하는 프레임워크거든요.

그래서 기능, 설계, 개발 프랙티스 등 모든 면에서 페이지 라우터와는 아주 큰 차이를 보입니다.

이 글은 Next.js와 RSC의 핵심 철학을 바탕으로 한 설계와 실전 적용법을 정리한 내용인데요.

이 시리즈를 통해 Next.js에 대한 여러분의 이해를 한 단계 더 깊게 만들어 드리는 것이 제 목표입니다.

미리 알아두실 점

#

이 글은 ‘Next.js v15’ 버전을 기준으로 작성되었는데요.

본문에서 별다른 언급이 없다면, 여기서 말하는 ‘Next.js’는 모두 앱 라우터를 가리키는 것입니다.

이런 분들께 추천합니다

#

Next.js에 대해 설명은 할 수 있지만, 아직 깊게 사용해 보지 않은 초급 개발자분들이 읽어보시면 좋은데요.

Next.js를 이용해 개발하면서 어려움을 겪고 있는 중급 개발자분들께도 분명 큰 도움이 될 겁니다.

물론 초급자분들도 쉽게 이해할 수 있도록 최대한 친절하게 설명하려고 노력했지만, 이 글이 완전한 ‘입문서’는 아니거든요.

그래서 일부 내용은 전제 지식으로 간주하고 설명을 생략하는 부분도 있습니다.