Skip to content
Home / Migrations / Next.js Pages Router → Next.js App Router

Next.js Pages Router → Next.js App Router

hard

App Router is Next.js's future. React Server Components, server actions, streaming, and layouts replace getServerSideProps/getStaticProps.

Estimated: 8-24h · 6 steps
Progress0%
Step 1: Create parallel app/ directory

You can run pages/ and app/ simultaneously. Migrate incrementally. Create app/layout.tsx first.

mkdir app && touch app/layout.tsx
Step 2: Convert _app.tsx and _document.tsx

Move global CSS imports, fonts, and providers to app/layout.tsx. Metadata API replaces next/head.

export const metadata = { title: 'My App' }
export default function Layout({ children }) { return <html><body>{children}</body></html> }
Step 3: Migrate pages one by one

pages/blog.tsx → app/blog/page.tsx. getServerSideProps → async server component. getStaticProps → generateStaticParams + cached fetch.

Step 4: Replace data fetching

getServerSideProps → direct async/await in server components. getStaticProps → fetch with { next: { revalidate } }. SWR/React Query → still works in client components.

Step 5: Update API routes

pages/api/*.ts → app/api/*/route.ts. Change (req, res) → Request/Response Web API style.

Step 6: Mark client components

Add 'use client' to components using useState, useEffect, event handlers, browser APIs.

✓ All pages render correctly. No hydration errors. Performance improved.

What this migration involves

Moving from Next.js Pages Router to Next.js App Router is rated hard and takes about 8-24h on a typical project. The guide breaks it into 6 steps, 2 of which ship with runnable commands and 1 with a verification check.

Related migrations

Gatsby → Astro — medium, 4-10hNext.js Markdown blog → Astro Content Layer — medium, 3-6hVue 2 → Vue 3 — hard, 16-40h

FAQ

How long does migrating from Next.js Pages Router to Next.js App Router take?

Around 8-24h for a typical project — 6 steps, difficulty rated hard, 2 of them with copy-paste commands.

Is moving from Next.js Pages Router to Next.js App Router reversible?

No reverse guide is tracked yet, so treat this as a one-way move and keep a full export of your Next.js Pages Router data before you start.

What does Next.js App Router cost compared to Next.js Pages Router?

Pricing for both tools is contact-based or not tracked yet.