Estoy tratando de construir un proyecto usando Next JS por primera vez y he visto varios videos sobre el componente de diseño que parece encajar bien en mi proyecto.

Sin embargo, no puedo mostrar el contenido de la página. El menú y el pie de página se muestran sin problemas, pero no el contenido de la página en sí.

Este es el código que tengo actualmente:

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

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

Este "debería" mostrar el contenido de mi página diferente y el Menú/Pie de página debería estar visible en cada página que cree. Puedo ver el Menú/Pie de página en cada página pero no hay contenido.

Archivo: index.js

 import React from "react"; const index = () => { return <h1>Home page!</h1>; }; export default index; File: *orders.js*

¿Qué me estoy perdiendo?

Una cosa a tener en cuenta es que si comento Diseño en el archivo _app.js , el contenido de la página se muestra bien, pero obviamente el Menú/Pie de página no se mostrará.