Javascript NextJs中所有页面的布局

我已经用

npx create next app

创建了NextJs app，并尝试使用我自己的布局。但它破坏了应用程序，我真的不知道为什么。我在文件夹中有以下文件：

组件->

Footer.js

，

Header.js

，

Layout.js

页面->

\u app.js

，

index.js

样式->

global.css

Node.Js

版本是14.16.1，

npm

版本是7.9.0

我的

package.json

文件如下所示：

{
  "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"
  }
}

所有其他文件都具有基本结构：

_app.js

导入“normalize.css”
导入“../styles/globals.css”
函数MyApp（{Component，pageProps}）{
返回
}
导出默认MyApp

index.js 从“./组件/布局”导入布局

导出默认函数Home（）{
返回(
段落

)
}

Layout.js

从“/Header”导入标题；
从“/Footer”导入页脚；
函数布局（{children}）{
返回(
{儿童}
)
}
导出默认布局；

Header.js

函数头（）{
返回(
)
}
导出默认标题；

Footer.js

函数页脚（）{
返回(
)
}
导出默认页脚；

我还尝试在app.js中使用layout，它也这么做了

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

函数MyApp（{Component，pageProps}）{
返回(
)
}

当我运行

npm run dev

时，服务器启动，但当我在浏览器中打开

localhost:3000

时，它在控制台中输出一个错误，NodeJS服务器开始消耗大约4GB的ram

错误在这里：

---

有人知道怎么回事吗？

从外观上看，页眉/页脚函数组件正在调用它们自己，您的意思可能是：

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

函数页脚（）{
返回(
)
}

函数头（）{
返回(
)
}

从外观上看，您的页眉/页脚函数组件正在调用它们自己，您可能打算返回，而不是在Header.js/Footer.js中？是的，现在它可以工作了。非常感谢，我错过了它。很酷，我会把它作为一个答案发布。

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

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

            <Header />

            <main>
            {children}
            </main>

            <Footer />

        </>
    )
}

export default Layout;

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

export default Header;

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

export default Footer;

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

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

function Header(){
    return(
        <header>

        </header>
    )
}