Next.js中sign_up页面空白，报Maximum update depth exceeded错误

问题根源 #

你的pages/sign_up.tsx组件存在一个低级但致命的问题：组件函数没有返回JSX元素。

看你的代码：

const SignUpPage = () => {
  <>
    <Layout pageTitle="Sign Up">
      <SignUp />
    </Layout>
  </>
};

这里箭头函数内部虽然写了JSX片段，但没有使用return语句，导致组件实际返回undefined。这种情况下，Next.js的渲染流程会出现异常，框架反复尝试处理无效的渲染结果，最终触发Maximum update depth exceeded的错误，同时页面因为没有有效内容而显示空白。

你提到的my_todo页面能正常显示，大概率是因为它的组件函数正确返回了JSX结构。

修复方案 #

给SignUpPage函数加上return语句，让它返回正确的JSX结构：

// pages/sign_up.tsx
import { SignUp } from "../components/SignUp";
import { Layout } from "src/layouts/Layout";

const SignUpPage = () => {
  return (
    <>
      <Layout pageTitle="Sign Up">
        <SignUp />
      </Layout>
    </>
  );
};

export default SignUpPage;

补充说明 #

当组件返回undefined时，React/Next.js会判定渲染出现错误，会尝试重新渲染组件以恢复正常。如果你的Layout组件内部存在状态更新逻辑，这种重复渲染会触发无限的状态更新循环，最终触发React的最大更新深度限制，也就是你看到的错误警告。

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