useSearchParams() should be wrapped in a suspense boundary

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

Why it happens

next build tries to pre-render your page into static HTML. Search params like ?q=shoes only exist when a real request arrives. Next.js explains that reading them through useSearchParams() without a Suspense boundary would turn the whole page into client-side rendering, leaving it blank until JavaScript loads, so the build stops.

The dev server renders on every request, so you never see this until you build. That is why it shows up on deploy.

Fix it by hand

1. Find the component. The error names the page. If the hook is used deep inside, get a clearer stack trace with:

   next build --debug-prerender

2. Wrap the smallest part that reads search params in Suspense. This keeps the rest of the page static:

   'use client'
   import { useSearchParams } from 'next/navigation'
   import { Suspense } from 'react'
   
   function Search() {
     const searchParams = useSearchParams()
     return <input defaultValue={searchParams.get('q') ?? ''} />
   }
   
   export function Searchbar() {
     return (
       <Suspense fallback={null}>
         <Search />
       </Suspense>
     )
   }

3. Or render the page on each request. In a Server Component page, call await connection() from next/server. Older code uses export const dynamic = 'force-dynamic' in a server page or layout; it has no effect in a 'use client' file.
4. Or read params on the server. A Server Component page receives searchParams as a prop and can pass it down; unwrap it with React's use() inside a Suspense boundary.
5. Don't rely on turning the check off. The missingSuspenseWithCSRBailout option only exists in Next.js 14.x.
6. Run next build again, then redeploy.

Stop it happening again

• Run next build locally before every push. Most "works in dev, fails on deploy" Next.js errors come from pre-rendering.
• Put a rule in your agent's project rules file: any client component using useSearchParams gets a Suspense boundary.