# Next.js: useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

**Code:** `useSearchParams() should be wrapped in a suspense boundary` · **Category:** Next.js · **Seen on:** Next.js, React

A Client Component using `useSearchParams` is statically rendered, so the build needs a Suspense boundary for the client-only part.

## Meaning

Wrap the component that calls `useSearchParams()` in `<Suspense fallback={...}>`, or mark the page dynamic (`export const dynamic = 'force-dynamic'`). Without Suspense the whole page bails out to client rendering and `next build` fails.

## Common causes

- `useSearchParams` in a component rendered by a static page
- Missing Suspense around it in layout/page
- Shared header component using it
- Build-time prerendering of a page
- Third-party component using the hook

## Quick fix

1. `<Suspense fallback={<p>Loading…</p>}><SearchBar /></Suspense>`
2. Or `export const dynamic = "force-dynamic"` on the page
3. Read `searchParams` from page props on the server instead

## Detailed fix by platform

### Next.js

1. `import { Suspense } from "react"; <Suspense fallback={null}><Filters /></Suspense>`

## How to diagnose

1. **Hook** — useSearchParams?
2. **Suspense** — Around it?
3. **Page** — Static?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/nextjs/usesearchparams-needs-suspense)