What is the difference between useRouter in Pages Router vs App Router?
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.