Deviopath › Next.js

Read the Search Query

Easy · Navigation

In a Client Component, useSearchParams() from next/navigation gives you the query string of the current URL as a read-only URLSearchParams. For /search?q=shoes, searchParams.get("q") returns "shoes" (and null when there is no q).

In the <h1>:

- show Results for: <q> when q has a value, for example Results for: shoes

- show Type something to search when q is missing or empty

Good to know: in a real app, a component that uses useSearchParams() should be wrapped in <Suspense> so the rest of the page can still be pre-rendered.

Next: Back Button