Netlify部署Next.js应用时出现与"use client"相关的500内部服务器错误的排查求助

各位开发者朋友，我现在碰到个棘手的问题：把Next.js应用部署到Netlify后，主页一直报500内部服务器错误，但只要我移除主页里带"use client"指令的组件，部署就立刻恢复正常。

我必须保留这些"use client"组件，因为要靠它们用useState管理状态，这部分功能是业务必需的。另外我还发现一个奇怪的现象：如果手动在地址栏输入/about访问关于页，再通过页面内的链接导航回主页，主页就能正常显示；可一旦刷新主页，500错误就又会出现。

控制台提示我查看相关Next.js文档，但我排查了半天也没找到症结，而且自己写的ErrorBoundary组件完全没发挥作用，根本没渲染出fallback的内容。

以下是我当前主页的代码：

"use client";

import React from "react";

import Description from "../components/description";

import FilterCardsClient from "../components/filters/filterCards";

import ErrorBoundary from "../components/errorBoundary";

export default function Page(props) {

return (

<div className="my-8 w-full rounded-lg p-4 text-gray-600 md:p-0">

{/* Description */}

<Description />

{/* Cards */}

<ErrorBoundary fallback={<p>Something went wrong</p>}>

<FilterCardsClient props={props} />

</ErrorBoundary>

</div>

);

}

还有我的ErrorBoundary组件代码：

import React from "react";

class ErrorBoundary extends React.Component {

constructor(props) {

super(props);

this.state = { hasError: false };

}

static getDerivedStateFromError(error) {

// Update state so the next render will show the fallback UI.

return { hasError: true };

}

componentDidCatch(error, info) {

// Example "componentStack":

//   in ComponentThatThrows (created by App)

//   in ErrorBoundary (created by App)

//   in div (created by App)

//   in App

logErrorToMyService(error, info.componentStack);

}

render() {

if (this.state.hasError) {

// You can render any custom fallback UI

return this.props.fallback;

}

return this.props.children;

}

}

export default ErrorBoundary;

有没有朋友能帮我分析下问题出在哪？怎么才能解决这个500错误，同时保留"use client"组件的功能？

备注：内容来源于stack exchange，提问作者Wamz