NextJS Layout 组件不呈现页面内容

Question

我第一次尝试使用 Next JS 构建一个项目，我似乎有多个关于 Layout 组件的视频，这似乎很适合我的项目！

但是，我无法显示页面内容。菜单和页脚显示没有任何问题，但页面内容本身没有显示。

这是我目前的代码：

文件：_app.js

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

import "../styles/globals.css";
import "antd/dist/antd.css"; // antDesign global css styles

const MyApp = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};

export default MyApp;

文件：Layout.js

import React from "react";
import MainMenu from "../components/MainMenu";
import Footer from "../components/Footer";

const Layout = ({ childern }) => {
  return (
    <>
      <MainMenu />
      {childern}
      <Footer />
    </>
  );
};

export default Layout;

这个“应该”呈现我不同的页面内容，并且菜单/页脚应该在我创建的每个页面上都可见。我可以在每个页面上看到菜单/页脚，但看不到内容。

文件：index.js

import React from "react";

const index = () => {
  return <h1>Home page!</h1>;
};

export default index;

File: *orders.js*

我错过了什么？

需要注意的一点是，如果我在 _app.js 文件中注释掉 Layout，页面内容会显示得很好，但显然菜单/页脚不会显示。

Answer 1

我认为你有一个错字：childern -> children