我正在用nextjs构建一个web应用程序。我有麻烦了。pages目录下的sign_up组件不会呈现。这是一张白纸。我在Chrome扩展程序中查找了详细信息，得到了这个警告。

Unhandled Runtime Error
Error: Maximum update depth exceeded. 
This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. 
React limits the number of nested updates to prevent infinite loops.

下面是components/SignUp目录下的index.tsx文件。

// SignUp/index.tsx 

import type { FC } from "react";

export const SignUp: FC = () => {
  return (
    <>
      <h1>user registration</h1>
    </>
  );
};

forrowing是pages目录下的sign_up组件。

pages/sign_up.tsx

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

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

export default SignUpPage;

以下是文件结构。

.
└── frontend/
    └── src/
        ├── api
        ├── components/
        │   ├── Dashboard
        │   ├── Login
        │   ├── MyTodo
        │   └── SignUp/
        │       ├── index.tsx
        │       └── schema.ts
        ├── layouts
        ├── pages/
        │   ├── _app.tsx
        │   ├── _error.tsx
        │   ├── 404.tsx
        │   ├── dashboard.tsx
        │   ├── index.tsx
        │   ├── my_todo.tsx
        │   └── sign_up.tsx      
        ├── styles
        └── util

虽然在图像中显示了my_todo页面，但使用类似的结构（只有h1标签和表单）创建的页面显示没有问题。我想知道为什么。如果有人知道，请告诉我。