Layout for all pages breaks app in NextJs

Question

I have created NextJs app with npx create-next-app and tried to use my own layout. But it breaks the app and I really dont know why. I have these files in folders:

components -> Footer.js, Header.js, Layout.js

pages -> _app.js, index.js

styles -> global.css

Node.Js version is 14.16.1, npm version is 7.9.0

My package.json file looks like this:

{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.1.3",
    "normalize.css": "^8.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

And all other files have basic structure:

_app.js

import 'normalize.css'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

index.js

import Layout from "../components/Layout";

export default function Home() {
  return (
    <Layout >

        <div>
            <p>Paragraph</p>
        </div>

    </Layout>

  )
}

Layout.js

import Header from "./Header";
import Footer from "./Footer";

function Layout({children}){
    return (
        <>

            <Header />

            <main>
            {children}
            </main>

            <Footer />

        </>
    )
}

export default Layout;

Header.js

    function Header(){
        return(
            <Header>
    
            </Header>
        )
    }

export default Header;

Footer.js

function Footer(){
    return(
        <Footer>
            
        </Footer>
    )
}

export default Footer;

I also tried to use layout in _app.js and it did the same.

function MyApp({ Component, pageProps }) {
  return(
      <Layout>
        <Component {...pageProps} />
      </Layout>
      )
}

When I run npm run dev, server starts, but when I open localhost:3000 in browser, it outputs an error in console and NodeJS server starts consuming about 4GB of ram.

The error is here:

Does someone know, what is wrong please?

Answer 1

From the looks of it your Header/Footer function components are calling themselves, you might've meant:

function Footer(){
    return(
        <footer>
            
        </footer>
    )
}

function Header(){
    return(
        <header>

        </header>
    )
}