useSearchParams() should be wrapped in a suspense boundary

TL;DR

Wrap the component that calls useSearchParams in a [Suspense] boundary. The static prerender succeeds once the hook is under Suspense.

The exact error

useSearchParams() should be wrapped in a suspense boundary

Steps to fix

1. Find the page or component the build error names
2. Wrap the part that calls useSearchParams() in a [Suspense] boundary with a fallback
3. Keep the fallback simple (a skeleton or null)
4. Rebuild; the prerender error should be gone

When this applies

• Next.js 13+ app router with static rendering
• Reading query params with useSearchParams in a statically generated page

When this does NOT apply

• Pages router
• Dynamic routes that already opt out of static rendering

Tool + versions

Next.js 13+ app router

Why it happens

useSearchParams reads the request URL, which is dynamic. During a static prerender there is no request, so Next.js bails out to client rendering and requires a Suspense boundary to do it.

Edge cases

• usePathname has the same requirement
• Adding export const dynamic = 'force-dynamic' is the alternative, but Suspense keeps the static shell

Where this came from

Resolved from a real public thread: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout (docs:missing-suspense-with-csr-bailout).

Asked: build fails on a page using useSearchParams. Verified fix: wrap the hook usage in a Suspense boundary so Next.js can bail out to client rendering. Source: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout