Incremental, route-by-route adoption.
Skip to solutionKEEP THE
hardSystem Design
How do you migrate from the Pages Router to the App Router in Next.js?
1.2k views
01
Understand the problem
nextjsmigrationapp-routerpages-router
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Nudge consolestandby
Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.
03
Study the solution
app/ and pages/ can coexist, so you migrate incrementally: move routes into app/ one at a time, convert data functions to async Server Components, replace _app/_document with root layout.js, swap getServerSideProps/getStaticProps for fetch/segment config, and update next/router to next/navigation.
Solution ready — 2 min read
Classified // press E to declassify
04
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.query05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.
Transmission complete // awaiting log
KEEP THE
STREAK ALIVE.
Dossier 72 of 95 decoded in the Next.js track. One more won't hurt.