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.