useSearchParams() should be wrapped in a suspense boundary at page

Help
1

Hello guys, am trying to deploy my project but i keep on getting this error, how can i solve it?

 ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/search". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
    at i (/vercel/path0/.next/server/chunks/3911.js:4:7013)
    at d (/vercel/path0/.next/server/chunks/3911.js:209:81130)
    at h (/vercel/path0/.next/server/chunks/6500.js:1:22449)
    at nF (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:46843)
    at nH (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:48618)
    at nW (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:67762)
    at nz (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:65337)
    at nY (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:71193)
    at nH (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:60968)
    at nW (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:67762)
Error occurred prerendering page "/search". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /(dashdoard)/(routes)/search/page: /search, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1
Exiting build container

below is my page.tsx

import { getJobs } from "@/actions/get-job";
import SearchContainer from "@/components/search-container";
import { db } from "@/lib/db";
import { auth } from "@clerk/nextjs/server";
import {CategoriesList} from "./_components/categories-list";
import {PageContent} from "./_components/page-content";
import { Suspense } from "react";
// import { Suspense } from "react";


interface SearchProps {
    searchParams: Promise<{
        title?: string;
        categoryId? : string;
        createdAtFilter?: string;
        shiftTiming?: string;
        workMode?: string;
        yearsOfExperience?: string;
    }>
}

export default async function SearchPage({searchParams}: SearchProps)  {
    const categories = await db.category.findMany({
        orderBy: {
            name: "asc",
        },
    });

    const { userId } =  await auth();

    // Await searchParams to get the actual object
    
    const resolvedSearchParams = await searchParams;
    
    const jobs = await getJobs({...resolvedSearchParams});


  return (
    <>
    
       <div className="px-6 pt-6 block md:hidden md:mb-0">
        <Suspense>
            <SearchContainer/>
        </Suspense>
          

      </div>

      <div className="p-6">
        {/* categories */}
        <CategoriesList categories={categories}/>

        {/* applied filters */}

        {/* page content */}
        <PageContent jobs={jobs} userId={userId}/>
      </div>
      
    </>
  )
}
4

Have you taken a look at this?

5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.