Next.js中Maximum call stack size exceeded错误的解决求助

栈溢出错误几乎都是无限递归/循环调用导致的，结合你提到的文件和场景，按以下步骤排查解决：

1. 排查布局文件冲突 #

你同时存在layout.js和layout.jsx，Next.js App Router对布局文件的解析有严格规则，两个同名不同后缀的布局文件可能触发无限嵌套渲染：

• 保留其中一个布局文件（建议用layout.js，符合App Router默认规范），删除另一个，测试是否恢复正常。
• 检查根布局和landing路由的子布局是否存在嵌套自身的逻辑，比如根布局里又渲染了<Layout />。

2. 检查组件循环引用 #

循环引用是栈溢出的常见原因：

• 梳理组件导入关系：比如layout.js导入了page.jsx，而page.jsx又导入了layout.js；或者Heading.jsx和button.jsx互相导入。
• 解决方式：将公共逻辑抽离为独立工具模块，移除组件间的循环依赖。

3. 排查组件内部无限递归 #

检查每个组件的渲染逻辑：

• Heading.jsx/button.jsx：是否在组件内部直接渲染了自身（比如const Heading = () => <Heading />），或者通过条件渲染触发无限递归。
• page.jsx：是否存在永远为真的条件渲染（比如{true && <Page />}），导致组件反复渲染自身。

4. 检查ShadCN组件的错误封装 #

自定义ShadCN组件时，错误的嵌套或props传递可能触发无限重渲染：

• 比如button.jsx中，是否错误地在内部渲染了<Button />，或者useCallback/useMemo的依赖项设置错误（比如依赖项是一个每次渲染都生成新引用的对象），导致组件无限更新。

5. 定位错误源头 #

如果以上步骤没解决，查看错误堆栈的调用链：

• 错误信息里会显示重复调用的组件名称，找到那个组件后，重点检查它的渲染逻辑和依赖关系。

内容的提问来源于stack exchange，提问作者Janani