Bug Report: Deployment Failure on Vercel (useSearchParams Issue)
Current Behavior
- The deployment on Vercel fails with the error:
arduino
CopyEdit
useSearchParams() should be wrapped in a suspense boundary at page "/faqs"- The build log suggests that
useSearchParams()is triggering a Client-Side Rendering (CSR) bailout, which is not allowed for statically generated pages.
Expected Behavior
- The
/faqspage should successfully build and deploy without errors. - The domain should be assigned correctly upon a successful production deployment.
Reproduction Steps
- Deploy the project on Vercel using
next buildorvercel --prod. - The build fails with the error message related to
useSearchParams(). - The domain assignment also fails due to the unsuccessful deployment.
Code & Configuration
/faqs/page.tsx (Before)
tsx
CopyEdit
import { useSearchParams } from "next/navigation";export default function FAQs() { const searchParams = useSearchParams(); const query = searchParams.get("query"); return <div>FAQ Query: {query}</div>;}Proposed Fix
To resolve this issue, we should wrap useSearchParams() inside a <Suspense> boundary and ensure the page is treated as a Client Component.
✅ Fixed Version:
tsx
CopyEdit
"use client"; // Ensure this is a Client Componentimport { useSearchParams } from "next/navigation";import { Suspense } from "react";export default function FAQs() { return ( <Suspense fallback={<p>Loading...</p>}> <FAQsContent /> </Suspense> );}function FAQsContent() { const searchParams = useSearchParams(); const query = searchParams.get("query"); return <div>FAQ Query: {query}</div>;}Alternative: If /faqs Needs Static Rendering
- Instead of using
useSearchParams(), fetch the query usingcontextingetServerSidePropsorapp/router.