Soy nuevo en Next.js y no sé cuál es el enfoque correcto. Cuando voy a otra página, quiero mostrar mi Encabezado y Pie de página siempre para permanecer en la página.
Mi estructura de carpetas se ve así: captura de pantalla de la estructura de carpetas
Diseño.js
import Nav from "./Nav"; import Footer from "./Footer"; const Layout = ({ children }) => { return ( <> {/* <Nav /> */} <div className="container"> <div className="row"> <div className="col"> <h1>i am layout</h1> {children} </div> </div> </div> {/* <Footer /> */} </> ); }; export default Layout;
Índice.js
import Head from "next/head"; import styles from "../styles/Home.module.css"; export default function Home() { return ( <div className={styles.dvHeader}> <Head> <title>Home</title> <meta name="description" content="This is about page" /> <meta name="keywords" content="html, css, javascript" /> <link rel="icon" href="/favicon.ico" /> </Head> <h1>i am index.js</h1> </div> ); }
_app.js
import Layout from "../components/Layout"; import "../styles/globals.css"; function MyApp({ Component, pageProps }) { return ( <> <Layout> <Component {...pageProps} /> </Layout> </> ); } export default MyApp;