Next.js 13.4 이후 App Router가 도입되면서 기존의 Page Router에서 라우팅 방식이 크게 변경되었습니다. getServerSideProps, getStaticProps 등 기존의 데이터 페칭 방식이 사라지고, 대신 서버 컴포넌트(Server Components) 기반의 새로운 라우팅 패턴이 도입되었습니다.
이번 글에서는 기존 Page Router를 사용하던 프로젝트를 App Router로 전환하는 방법을 소개합니다.
또한, useRouter, useParams, usePathname, useSearchParams 등의 주요 훅을 기존 방식과 비교하며, 마이그레이션 가이드를 제공하겠습니다.
| 기능 | Page Router (pages/) |
App Router (app/) |
|---|---|---|
| 라우팅 방식 | 파일 기반 pages/ |
폴더 기반 app/ |
| 데이터 페칭 | getServerSideProps, getStaticProps |
서버 컴포넌트 (async function) |
| 라우팅 훅 | useRouter() (next/router) |
useRouter(), useParams(), usePathname(), useSearchParams() (next/navigation) |
| 리다이렉트 | next/router에서 router.push() |
useRouter().push() 또는 redirect() |
| Middleware 지원 | middleware.ts로 전역 처리 |
middleware.ts 동일 방식 유지 |
💡 핵심 변화
App Router는 서버 컴포넌트를 기본값으로 사용하고, 클라이언트 컴포넌트는use client를 선언해야 함- 기존
useRouter()에서 쿼리 스트링(query)을 처리하는 방식이 변경됨useParams(),usePathname(),useSearchParams()를 활용해 더 직관적으로 데이터 접근 가능
useRouter() 변경 방법기존 Page Router에서는 useRouter()를 사용해 현재 경로 정보와 쿼리 파라미터를 가져왔습니다.
pages/ 기반)import { useRouter } from 'next/router';
const MyComponent = () => {
const router = useRouter();
const { id } = router.query; // 쿼리 스트링 가져오기
return <h1>Page ID: {id}</h1>;
};