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.

Pattern for using useSearchParams hook with Suspense boundary in Next.js. Covers the required combination of 'use client' directive and Suspense wrapper when accessing URL query parameters in client components. Use when building search interfaces, filters, pagination, or any feature that needs to read/manipulate URL query parameters client-side. Source: wsimmonds/claude-nextjs-skills.

View raw