javascript - Hvordan fikse Next.js 14.1 prerendering-feil

Jeg oppgraderte nylig min Next.js 14.01 til 14.1, og jeg fikk denne feilen under byggingen i appen min. Hvordan kan jeg fikse denne feilen?

det står:

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

Vennligst hjelp meg med å fikse denne feilen.

Svar #1

De følgende sidene gjengir en klientkomponent som bruker usePathnames.

Fordi feilmeldingen viser alle sidene dine, må komponenten gjengis i app/layout.tsx.

Denne hooken henter searchparams fra Request som ikke er tilgjengelig ved byggetid. Bruk av denne hooken vil deaktivere statisk forhåndsgjengivelse for hele ruten. Feilen foreslår at du kan dra nytte av streaming og delvis forhåndsgjengi de delene av ruten som ikke er avhengige av verdier hentet ved request-tid.

For å fikse:

  1. Finn komponenten som bruker useSearchParams (Du kan bruke IDE-søk)
  2. pakk det inn i en <Suspense>-grense:
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>
}

Svar #2

Bare legg til loading.tsx i roten av appen. Og hvis du har laget noen grupperuting, legg bare til loading.tsx der også. Det fungerte for meg

Relaterte artikler