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;