hardSystem Design

How do you migrate from the Pages Router to the App Router in Next.js?

Q: How do you migrate from the Pages Router to the App Router in Next.js?

**TL;DR.** app/ and pages/ **coexist**, so migrate **incrementally**: move routes into app/ one at a time, convert data functions to **async Server Components**, replace _app / _document with a **root layout**, swap getServerSideProps / getStaticProps for fetch /segment config, and update next/router → next/navigation . pages/ (legacy) still works route by route <rect class='d-box-accent' x='252' y='45'

1.2k views

Understand the problem

Incremental, route-by-route adoption.

nextjsmigrationapp-routerpages-router

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Router import change

// Pages Router
import { useRouter } from 'next/router';
const { query, push } = useRouter();

// App Router (Client Component)
'use client';
import { useRouter, usePathname, useSearchParams } from 'next/navigation';
const router = useRouter();
const params = useSearchParams();   // replaces router.query

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does Next.js handle CSS (CSS Modules, global, Tailwind, CSS-in-JS)?

How do Server and Client Components compose in Next.js?