Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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.

Tags:

2

Answers


  1. 0

    The follwing pages renders a Client Component the uses usePathnames.

    enter image description here

    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>
}
    Login or Signup to reply.
  2. 0

    Just add loading.tsx to the root of app. and if you made any group routing then just add loading.tsx there too. that’s worked for me

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search