App Router vs Pages Router

두 router, 한 repo — 일단은

Next.js 는 아직 두 router 다 지원해. Legacy app 들이 다 이사 안 했거든. 새 작업은 App Router (app/ 디렉토리) 로 가. Pages Router (pages/) 는 migration 용이고 새 feature 안 들어와.

능력	Pages Router	App Router
Directory	`pages/`	`app/`
Default render	Client	Server
Data fetching	`getServerSideProps` / `getStaticProps`	`async` component, 직접 `fetch`
Layout	`_app.tsx` 수동 wrap	segment 마다 `layout.tsx`
Loading UI	수동	`loading.tsx` + Suspense
Error UI	`_error.tsx`	`error.tsx` + `global-error.tsx`
Streaming	제한적	일등 시민
Server Action	없음	있음

Mental model 의 이동

Pages Router 는 data fetching function 따로 있는 page 로 생각하고, App Router 는 route segment 로 묶이는 composable Server & Client Component 로 생각해. "Next.js 가 이상해진 것 같아" 반응 대부분이 syntax 가 아니라 이 mental shift 때문이야.

같은 project 안 공존

Segment 단위로 동시 작동. 같은 path 가 app/ 와 pages/ 둘 다 있으면 App Router 가 이김. Big-bang rewrite 안 해도 돼 — route 단위로 옮겨.

Code

Pages Router — data 가 따로·tsx

// pages/blog/[slug].tsx
export async function getServerSideProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

export default function BlogPost({ post }) {
  return <article>{post.content}</article>;
}

App Router — fetch 가 component 안에·tsx

// app/blog/[slug]/page.tsx
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params; // v15+: params 가 Promise
  const post = await fetchPost(slug);
  return <article>{post.content}</article>;
}

App Router vs Pages Router

두 router, 한 repo — 일단은

Mental model 의 이동

같은 project 안 공존

Code

External links

Exercise

Progress

댓글 0