nextjs-use-search-params-suspense
SKILL.md
Next.js: useSearchParams with Suspense Pattern
Pattern Overview
The useSearchParams hook requires TWO things:
- Component must have
'use client'directive - Component must be wrapped in a
<Suspense>boundary
This is a Next.js requirement, not optional!
Why This Pattern?
useSearchParams reads URL query parameters:
/search?q=shoes→searchParams.get('q')returns"shoes"/products?category=electronics&sort=price→ Read multiple params
Why Suspense? Next.js uses React 18's Suspense to handle the async nature of reading URL params during server-side rendering and hydration.