Search code examples
javascriptreactjstypescriptnext.js

How to fix Next.js 14.1 prerendering Error

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

enter image description here

Please help me to fix this error.

Solution

  • The follwing pages renders a Client Component that uses usePathnames.

    enter image description here

    Because the error message lists all your pages, the component must be rendered in app/layout.tsx.

    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:

    1. Find the component that uses useSearchParams (You can use the IDE search)
    2. 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>
}