I'm trying to build a project using Next JS for the first time and I've seem multiple videos about the Layout component which seems like a good fit for my project!

However, I cannot get page content to show. The Menu and Footer shows without any problems but not the page content itself.

This is the code I have currently:

File: _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;

File: 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;

This "should" render my different page content and Menu/Footer should be visible on every page I create. I can see the Menu/Footer on every page but no content.

File: index.js

import React from "react";

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

export default index;

File: *orders.js*

What am I missing?

One thing to note is that if I comment out Layout in the _app.js file the page content shows just fine, but then obviously the Menu/Footer won't show.