Next.js 静态站点生成问题:构建期间 searchParams.toJSON 错误

问题描述 投票:0回答:2

我在构建 Next.js 应用程序以在 Hostinger 云托管上进行静态部署时遇到了一个持续存在的问题。构建过程失败并出现以下错误:

[Error]: Page with `dynamic = "error"` couldn't be rendered statically because it used `searchParams.toJSON`.

我已经彻底检查了我的代码库,并可以确认我没有在应用程序中的任何地方使用 searchParams.toJSON。由于托管限制,主要目标是部署静态版本。

以下是一些关键细节:

我正在使用 Next.js 生成静态站点。

该应用程序没有动态路由,也不使用 searchParams.toJSON。

我对外部 API 使用了大量的获取请求。

该应用程序利用 Redux 进行状态管理。

React 上下文用于全局状态。

该应用程序很复杂,涉及各种组件、页面和交互。

我正在尝试部署在 Hostinger 云托管上。

我尝试了各种故障排除步骤,包括调整请求函数和检查依赖项,但问题仍然存在。我正在寻求有关如何解决此错误并成功构建用于部署的静态页面的指导。

这是我的主要问题:

使用 fetch 请求、Redux 或 React 上下文是否会导致与静态站点生成发生冲突?

使用 fetch、Redux 或 React 上下文时,静态生成是否需要具体考虑或调整?

我感谢社区提供的任何有助于解决此问题的见解、指导或建议。谢谢!

next.js deployment build next.js13
2个回答
2
投票

找到解决方案:Next.js 页面中的“使用客户端”问题

我写这封信是为了分享我发现的解决方案,解决了过去两天我一直在努力解决的有关 Next.js 静态站点生成的问题。我在构建过程中遇到的错误是: “[错误]:带有动态=“错误”的页面无法静态呈现,因为它使用了searchParams.toJSON。”

经过广泛调查,我发现 page.js 组件顶部存在“use client”导致了此错误。关键要点是,在 Next.js 页面中,组件顶部不应有“使用客户端”。删除这条线解决了我的问题。

在两天的时间里,我向各种来源寻求帮助,包括人工智能、论坛和详尽的谷歌搜索。尽管付出了很多努力,但在 8 小时的会议中,我仔细检查了每个组件,取得了突破。我系统地将它们移动到一个新的 Next.js 应用程序,在添加每个应用程序后运行构建。这个过程使我能够隔离有问题的代码行。

我分享此经验是为了为可能遇到类似问题的其他人节省时间。如果您在 Next.js 静态站点生成过程中遇到上述错误,请彻底检查您的组件顶部是否存在“使用客户端”。在页面中省略此行可以防止错误并成功生成静态站点。


0
投票

错误消息“Page withdynamic = "error"无法静态渲染,因为它使用了searchParams.toJSON”表示Next.js正在尝试在构建时静态预渲染页面(为了性能),但遇到了使用 searchParams.toJSON() 的代码。此函数依赖于静态渲染期间不可用的服务器端信息(searchParams)。

我有同样的问题,我将服务器组件导入到静态组件中,因此在服务器端生成期间构建下一个应用程序时,客户端页面无法找到服务器端组件。

所以我只是将该服务器端组件制作为客户端组件。您只需要搜索客户端组件中正在使用的服务器端组件即可。

© www.soinside.com 2019 - 2024. All rights reserved.