• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

102
Vistas
Common Header and Footer in Next.js

I am new to Next.js and don't know what is the correct approach. When I go to another page I want to display my Header and Footer always to stay on the page.

My folder structure look like this - folder structure screenshot

Layout.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;

Index.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;
about 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda