nextjs-use-search-params-suspense

Why Suspense? Next.js uses React 18's Suspense to handle the async nature of reading URL params during server-side rendering and hydration.

| Access method | searchParams prop | useSearchParams() hook | | Requires 'use client' | ❌ No | ✅ Yes | | Requires Suspense | ❌ No | ✅ Yes | | Can be async | ✅ Yes | ❌ No | | Can update params | ❌ No (use Link/redirect) | ✅ Yes (use router.push) | | Best for | Initial load, SEO | Dynamic filters, real-time updates |

This is the recommended pattern for client-side URL parameter handling in Next.js App Router.

Modello per l'utilizzo dell'hook useSearchParams con limite Suspense in Next.js. Copre la combinazione richiesta della direttiva "use client" e del wrapper Suspense quando si accede ai parametri di query dell'URL nei componenti client. Da utilizzare durante la creazione di interfacce di ricerca, filtri, impaginazione o qualsiasi funzionalità che debba leggere/manipolare i parametri di query degli URL sul lato client. Fonte: wsimmonds/claude-nextjs-skills.