nextjs-use-search-params-suspense

Use the useSearchParams hook from next/navigation to read URL query parameters in client components. The hook returns a ReadonlyURLSearchParams object that lets you access query values like search terms, filters, or pagination parameters directly from the URL.

Suspense is required because useSearchParams reads parameters asynchronously during hydration in client components. Wrapping useSearchParams in a Suspense boundary prevents hydration mismatches between server and client renders, ensuring the component displays only after parameters are available.

Yes, useSearchParams works for any client-side URL parameter manipulation—search boxes, category filters, pagination controls, and sorting. After reading parameters with useSearchParams, use router.push to update the URL when users change filters or navigate between pages.

Two requirements: add the 'use client' directive at the top of your component file to mark it as a client component, and wrap the useSearchParams hook call inside a Suspense boundary to handle asynchronous parameter reading.

Import useRouter from next/navigation and call router.push with a new URL containing updated query parameters. This changes the URL and triggers a re-read of useSearchParams, updating your UI without a full page reload.