[Next] 02. Next router

Next.js에는 자체 라우터가 있습니다

Next.js는 React 기반의 프레임워크답게, 별도의 라우팅 라이브러리를 설치하지 않아도 됩니다.
그냥 디렉토리만 잘 구성하면 끝.

 

하지만 여기서 헷갈리는 개념이 하나 있죠.
Next.js에는 Page Router와 App Router, 두 가지 라우팅 시스템이 있습니다.

Page Router (기존 방식)

• pages 디렉토리 기반
• Next.js의 기존 라우팅 시스템 (Next 12 이하에서 기본)
• 파일 기반 라우팅: pages/about.tsx → /about
• getStaticProps, getServerSideProps 같은 데이터 패칭 함수 사용
• _app.tsx, _document.tsx, _error.tsx 같은 특수 파일로 전체 구조 설정

📌 장점: 단순하고 익숙함 (CRA보다 더 쉬움)
📌 단점: 중첩 레이아웃이나 동적 구조 표현이 제한적

---

App Router (신규 방식)

Next.js 13부터 도입된 새로운 라우팅 시스템
app 디렉토리를 사용하며, React Server Components와 중첩 레이아웃, 동적 렌더링 등 최신 기능을 포함합니다.

• app 폴더 기반으로 라우팅 구성
• layout.tsx, page.tsx, loading.tsx, error.tsx 같은 파일 단위의 역할 분리
• 폴더 구조로 중첩 라우팅 표현 가능
• 서버 컴포넌트/클라이언트 컴포넌트 구분 ("use client" 사용)
• 서버에서 직접 fetch 가능 (getServerSideProps 필요 없음)

 

📌 장점: 유연한 구조, 서버 컴포넌트, 성능 최적화
📌 단점: 러닝 커브 있음, 아직 실무에서는 page router가 많이 쓰임

---

 

🤔 그래서 뭘 공부해야 할까?

선택은 없습니다. 둘 다 해야죠.

• SwiftUI 잘나간다고 UIKit 몰라도 됨?
• Expo 핫하다고 CLI 몰라도 됨?
• Tailwind 쓴다고 CSS 몰라도 됨?

"이제는 다 되는 시대"가 아니라
"다 알아야 되는 시대"입니다.

App Router는 미래고, Page Router는 현재입니다.
당장은 Page Router 위주로 실무를 하더라도, App Router를 미리 익혀두는 사람이 결국 시장을 선점하게 될 겁니다.

 

그래서 다음 장 부터는 우선 page router 부터 살펴보겠습니다.