Question 255585 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – The page is not displayed in nextjs. Why?

I am building a web app with nextjs.
I am having trouble.
The sign_up component under the pages directory is not rendered.
It is a blank page.
I looked up the details in the chrome extension and got this warning.

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.

The following is the index.tsx file under components/SignUp directory.

// SignUp/index.tsx 


import type { FC } from "react";

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

The forrowing is the sign_up component under the pages directory.

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;

The following is file structure.

.
└── 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

Although it is displayed in the image,
The my_todo page, which was created with a similar structure (only h1 tag and form), displayed without problems.
I wonder why. If anyone knows, please let me know.

Tags:

2

Answers


  1. 0

    i think have SignUpPage component in the return statement is not returning the JSX. try with this corrected version:

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

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

export default SignUpPage;

    Hope this will help for you.

    Login or Signup to reply.
  2. 0

    The issue is that in your sign_up.tsx file, you are missing the return. It should be like this:

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

    Furthermore, you are using fragments unnecessarily. You can simplify the code by removing them and just return the JSX like so:

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

    Check out the docs here to read more about them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search