javascript - NextJs 中所有页面的布局都会中断应用程序

问题描述

我已经创建了 NextJs 应用程序npx create-next-app并尝试使用我自己的布局。但它破坏了应用程序，我真的不知道为什么。我在文件夹中有这些文件：

组件 -> Footer.js, Header.js,Layout.js

页 -> _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

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

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

export default MyApp

index.js

从“../components/Layout”导入布局；

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

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

    </Layout>

  )
}

布局.js

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

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

            <Header />

            <main>
            {children}
            </main>

            <Footer />

        </>
    )
}

export default Layout;

页眉.js

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

export default Header;

页脚.js

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

export default Footer;

我也尝试在 _app.js 中使用布局，它也是这样做的。

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

当我运行时npm run dev，服务器启动，但是当我localhost:3000在浏览器中打开时，它在控制台中输出一个错误，并且 NodeJS 服务器开始消耗大约 4GB 的内存。

错误在这里：

有人知道，请问有什么问题吗？

标签： javascriptnode.jsmemorynext.js