nextjs-use-search-params-suspense

SKILL.md

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.

Patrón para usar el gancho useSearchParams con límite de suspenso en Next.js. Cubre la combinación requerida de la directiva 'usar cliente' y el contenedor Suspense al acceder a los parámetros de consulta de URL en los componentes del cliente. Úselo al crear interfaces de búsqueda, filtros, paginación o cualquier característica que necesite leer/manipular parámetros de consulta de URL en el lado del cliente. Fuente: wsimmonds/claude-nextjs-skills.

Ver original