Encountering an error during Next.js Build

Question

⚠ Entire page /reservation deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /reservation ⚠ Entire page /properties deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /properties ⚠ Entire page / deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering / TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11730:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { cause: AggregateError at internalConnectMultiple (node:net:1114:18) at afterConnectMultiple (node:net:1667:5) at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) { code: 'ECONNREFUSED', [errors]: [ [Error], [Error] ] } } TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11730:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { cause: AggregateError at internalConnectMultiple (node:net:1114:18) at afterConnectMultiple (node:net:1667:5) at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) { code: 'ECONNREFUSED', [errors]: [ [Error], [Error] ] } }

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11730:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) ⚠ Entire page /favorite deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /favorite ⚠ Entire page /404 deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-int ✓ Generating static pages (18/18)

Export encountered errors on following paths: /page: /

I don't understand the error. Could you provide a brief explanation, as well as a possible solution to resolve it?

Answer 1

Here's the page for static rendering: https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering

Quote:

If a route is statically rendered, calling useSearchParams will cause the Client Component tree up to the closest Suspense boundary to be client-side rendered.

This allows a part of the route to be statically rendered while the dynamic part that uses useSearchParams is client-side rendered.

We recommend wrapping the Client Component that uses useSearchParams in a boundary. This will allow any Client Components above it to be statically rendered and sent as part of initial HTML. Example.

You use useSearchParams but have no Suspense boundary. They give this example:

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // This will not be logged on the server when using static rendering
  console.log(search)
 
  return <>Search: {search}</>
}

and:

import { Suspense } from 'react'
import SearchBar from './search-bar'
 
// This component passed as a fallback to the Suspense boundary
// will be rendered in place of the search bar in the initial HTML.
// When the value is available during React hydration the fallback
// will be replaced with the `<SearchBar>` component.
function SearchBarFallback() {
  return <>placeholder</>
}
 
export default function Page() {
  return (
    <>
      <nav>
        <Suspense fallback={<SearchBarFallback />}>
          <SearchBar />
        </Suspense>
      </nav>
      <h1>Dashboard</h1>
    </>
  )
}

The error message you get is simply stating that your rendering by useSearchParams was done entirely by client-side rendering because there was no Suspense boundary to specify what to render client-side, therefore it was assumed that the entire page is to be rendered client-side. You will simply need to use a Suspense boundary wrapped around your resources that you want to render on client-side, so the other parts that you want to be statically rendered will be complying to your expectations.

The issue happened at / and /404 at your end.