Issue
I recently upgraded my Next.js 14.01 to 14.1 and I got this error while doing the build in my app how can I fix this error?
it says :
Error occurred prerendering page "/collections". Read more: https://nextjs.org/docs/messages/prerender-error
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/contactus". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
Error occurred prerendering page "/contactus". Read more: https://nextjs.org/docs/messages/prerender-error
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/login". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
Error occurred prerendering page "/login". Read more: https://nextjs.org/docs/messages/prerender-error
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/orders". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
Error occurred prerendering page "/orders". Read more: https://nextjs.org/docs/messages/prerender-error
⨯ useSearchParams() should be wrapped in a suspense boundary at page "/register". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
Error occurred prerendering page "/register". Read more: https://nextjs.org/docs/messages/prerender-error
✓ Generating static pages (21/21)
> Export encountered errors on following paths:
/_not-found
/admin/add-products/page: /admin/add-products
/admin/manage-orders/page: /admin/manage-orders
/admin/manage-products/page: /admin/manage-products
/admin/page: /admin
/cart/page: /cart
/checkout/page: /checkout
/collections/page: /collections
/contactus/page: /contactus
/login/page: /login
/orders/page: /orders
/register/page: /register
Error: Command "npm run build" exited with 1
Please help me to fix this error.
Solution
The follwing pages renders a Client Component the uses usePathnames
.
This hook gets the searchparams from the Request
which is not available at the building time. Using this hook will disable Static PreRendering for the entire route. The error suggest you to benefit from Streaming and partially pre-render the parts of the route that doesn't depend on request time values.
To fix:
- Find the component that uses
useSearchParams
(You can use the IDE search) - wrap it in a
<Suspense>
boundary:
import {useSearchParams} from "next/navigation";
function MyComponent() {
const searchParams = useSearchParams()
// ...
}
// app/page.tsx
import {Suspense} from "react";
export default function Page() {
return <div>
<h1>...</h1>
<Suspense fallback={<>Loading...</>}>
<MyComponent />
</Suspense>
</div>
}
Answered By - Ahmed Abdelbaset
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.