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
/faqs
page 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 build
orvercel --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 Component
import { 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 usingcontext
ingetServerSideProps
orapp/router
.