Next.js 构建过程中遇到错误

Question

⚠ 整个页面/预订被取消到客户端渲染。 https://nextjs.org/docs/messages/deopted-into-client-rendering /reservation ⚠ 整个页面/属性不再采用客户端渲染。 https://nextjs.org/docs/messages/deopted-into-client-rendering /properties ⚠ 整个页面/取消客户端渲染。 https://nextjs.org/docs/messages/deopted-into-client-rendering / 类型错误：获取失败 在 Object.fetch（节点：内部/deps/undici/undici：11730：11） 在 process.processTicksAndRejections （节点：内部/进程/task_queues：95：5）{ 原因：聚合错误 在内部ConnectMultiple（节点：net：1114：18） 在 afterConnectMultiple （节点：net：1667：5） 在 TCPConnectWrap.callbackTrampoline （节点：内部/async_hooks：130：17）{ 代码：'ECONNREFUSED'， [错误]：[[错误]，[错误]] } } 类型错误：获取失败 在 Object.fetch（节点：内部/deps/undici/undici：11730：11） 在 process.processTicksAndRejections （节点：内部/进程/task_queues：95：5）{ 原因：聚合错误 在内部ConnectMultiple（节点：net：1114：18） 在 afterConnectMultiple （节点：net：1667：5） 在 TCPConnectWrap.callbackTrampoline （节点：内部/async_hooks：130：17）{ 代码：'ECONNREFUSED'， [错误]：[[错误]，[错误]] } }

预渲染页面“/”时发生错误。了解更多：https://nextjs.org/docs/messages/prerender-error 类型错误：获取失败 在 Object.fetch（节点：内部/deps/undici/undici：11730：11） 在 process.processTicksAndRejections （节点：内部/进程/task_queues：95：5） ⚠ 整个页面/最喜欢的页面被取消到客户端渲染。 https://nextjs.org/docs/messages/deopted-into-client-rendering/favorite ⚠ 整个页面 /404 已转入客户端渲染。 https://nextjs.org/docs/messages/deopted-int ✓ 生成静态页面 (18/18)

导出在以下路径上遇到错误： /页：/

我不明白这个错误。您能否提供一个简短的解释以及解决该问题的可能解决方案？

Answer 1

这里是静态渲染的页面：https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering

引用：

如果静态渲染路由，调用 useSearchParams 将导致客户端组件树（直到最近的 Suspense 边界）进行客户端渲染。

这允许静态渲染路由的一部分，而使用 useSearchParams 的动态部分则在客户端渲染。

我们建议将使用 useSearchParams 的客户端组件包装在边界中。这将允许其之上的任何客户端组件静态呈现并作为初始 HTML 的一部分发送。示例。

您使用

useSearchParams

，但没有悬念边界。他们举了这个例子：

'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}</>
}

和：

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>
    </>
  )
}

您收到的错误消息只是说明您通过

useSearchParams

进行的渲染完全由客户端渲染完成，因为没有 Suspense border 来指定要渲染客户端的内容，因此假设整个页面是要在客户端呈现。您只需要使用一个 Suspense 边界来包裹您想要在客户端渲染的资源，这样您想要静态渲染的其他部分将符合您的期望。

问题发生在您这边的

/

和

/404

。