What is the difference between useRouter in Pages Router vs App Router?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for Next.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
Next.js has different router hooks for the Pages Router and App Router — they come from different imports. Pages Router useRouter: import { useRouter } from "next/router"; — single hook for all routing needs. Provides: router.push("/path") (navigate), router.replace("/path") (no history), router.back(), router.reload(), router.prefetch("/path"), router.query (route params + query string as one object), router.pathname, router.asPath (actual URL with query), router.isFallback, router.events (navigation events). App Router hooks (from "next/navigation"): import { useRouter, usePathname, useSearchParams, useParams } from "next/navigation";. useRouter: navigation only — router.push("/path"), router.replace(), router.back(), router.forward(), router.refresh() (re-renders Server Components). NO query/params — use separate hooks. usePathname(): current pathname string only. useSearchParams(): URL search params as URLSearchParams object (must be wrapped in Suspense). useParams(): dynamic route params. Why the split? App Router's architecture separates concerns — params, path, and search params are distinct reactive values. Also, useSearchParams needs Suspense because it can cause client-side rendering. redirect() and notFound(): server-side navigation functions imported from "next/navigation" — usable in Server Components and Server Actions.
Common Mistake
Don't just define the term — demonstrate that you understand when to use it and when not to. Showing awareness of trade-offs is what separates average from strong Next.js candidates.