Next.js Query String Params: When to Use searchParams vs useSearchParams

Next.js developers frequently encounter undefined or stale query parameter values when copying older code snippets into newer projects. The root cause is that Next.js now supports two routing models — the App Router and the Pages Router — each requiring a different API to read URL query strings. In App Router Server Components, the correct approach is to use the searchParams prop passed to the page, which in modern Next.js is a Promise that must be awaited. Client Components in either router should instead use the useSearchParams() hook from next/navigation, which provides read-only, live access to query parameters after client-side navigation. Choosing the right API based on component type and rendering context helps avoid hydration issues and keeps route logic predictable.