useSearchParams() should be wrapped in a suspense boundary Next.js Origin: On your device Last updated 5 Nov 2026

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

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

Exact message you may see useSearchParams() should be wrapped in a suspense boundary at pageMissing Suspense boundary with useSearchParamsError occurred prerendering page. useSearchParams() should be wrapped in a suspense boundaryRead more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
Explore the map of this error Full error map →
Seen on: Next.js React

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?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

[Vue warn]: Component is missing template or render function — Vue: [Vue warn]: Component is missing template or render function. (Vue)[Vue warn]: Component…Component provided template option but runtime compilation is not supported — Vue: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js" (Vue)Component provided te…Dynamic server usage — Error: Dynamic server usage: Route /x couldn't be rendered statically because it used `cookies` (React)Dynamic server usageFailed to compile: ESLint errors during next build — Next.js: Failed to compile. ./src/app/page.tsx 12:7 Error: 'x' is assigned a value but never used. @typescript-eslint/no-unused-vars (Next.js)Failed to compile: ES…Feature flags __VUE_OPTIONS_API__ not explicitly defined (esm-bundler) — Vue: You are running the esm-bundler build of Vue — configure your bundler to explicitly replace feature flag globals (__VUE_OPTIONS_API__) (Vue)Feature flags __VUE_O…next build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…next build: JavaScript heap out of memory — Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build) (Next.js)next build: JavaScrip…Page is missing generateStaticParams() (output: export) — Next.js: Page "/blog/[slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config (Next.js)Page is missing gener…useSearch…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.