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.

Modèle d'utilisation du hook useSearchParams avec la limite Suspense dans Next.js. Couvre la combinaison requise de la directive « utiliser le client » et du wrapper Suspense lors de l'accès aux paramètres de requête URL dans les composants clients. À utiliser lors de la création d'interfaces de recherche, de filtres, de pagination ou de toute fonctionnalité nécessitant de lire/manipuler les paramètres de requête d'URL côté client. Source : wsimmonds/claude-nextjs-skills.

Voir l'original