← All errors · Next.jsNext.js App Router & config errors

useSearchParams() should be wrapped in a suspense boundary

Exact error

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

What it means

During a production build of a statically rendered page, a client component calls useSearchParams() without a <Suspense> boundary, so Next.js would have to client-render the whole page.

Likely causes

• Calling useSearchParams() in a component rendered by a static page without Suspense.

How to fix it

1. Wrap the component that uses search params in Suspense:

   import { Suspense } from 'react';
   import SearchBar from './SearchBar'; // 'use client' + useSearchParams
   
   export default function Page() {
     return (
       <Suspense fallback={null}>
         <SearchBar />
       </Suspense>
     );
   }

Prevent this next time

• Run `next build` (not just `next dev`) before every deploy; several of these errors only appear in production builds.
• Keep a checked-in `.env.example` listing every required variable.

Related errors

• Dynamic server usage: Route couldn't be rendered statically
• You're importing a component that needs useState. It only works in a Client Component