Next.js · next build (prerender)

useSearchParams() should be wrapped in a suspense boundary

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

What it means

A Client Component reads the URL query with useSearchParams on a page Next.js prerenders. The query isn't known at build time, so Next.js needs a <Suspense> boundary to render a fallback there. next dev doesn't complain; next build does.

Common causes

• A login or search page reads ?error= or ?q= with useSearchParams
• The hook sits in a component used in layout.tsx, so every page fails

How to fix it

1. Wrap the component that calls useSearchParams in <Suspense> in its parent
2. Or read searchParams in the page (a Server Component prop) and pass the value down

import { Suspense } from "react";
import { LoginForm } from "./login-form"; // calls useSearchParams()

export default function Page() {
  return (
    <Suspense fallback={null}>
      <LoginForm />
    </Suspense>
  );
}

Prompt for Cursor or Claude Code

next build fails: useSearchParams() should be wrapped in a suspense boundary. Find every component that calls useSearchParams and wrap where it's rendered in <Suspense> with a sensible fallback. Don't make the whole page dynamic to work around it.

Not quite your error? Paste yours into the free VibeBoot Doctor or browse the Next.js error fixer.