How to use Header Footer in Reactjs

Question

I am new in Reactjs(Nextjs), I want to create file "header" and "footer" so i can use this file in all pages,So i want to know how can i do this and which is better option

1. Should i create "Layout.js" and then call Header in this file
2. Or should i use "Header" and "footer" in _app.js (without create layout file)

Here is my layout.js

import React, { Component } from 'react';
import Header from './Header';

class Layout extends Component {
  

    render () {
        const { children } = this.props
        return (
          <div className='layout'>
            <Header />
            {children}
          </div>
        );
      }
    }

or there is any other way,How can i do this,Thank you in advance.

Answer 1

Please refer this documentation for basic layout feature in NextJs

First create Layout component

import Header from './header'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Header/>
      <main>{children}</main>
      <Footer />
    </>
  )
}

Import and use the < Layout > component in the entry file,

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      {/* All your page components */}
    </Layout>
  )
}

This will wrap your page components in the Header and Footer included in the Layout.

Answer 2

First create your Header & Footer then if you are using React.js go to App and put header and footer there like below:

const App = () => {
 return (
  <>
   <Header />
     // your routes go here 
   <Footer />
  </>
 )
}

For Next.js go to _app.tsx/jsx the entry point of all your pages

export default function MyApp({ Component, pageProps }) {
  return (
   <>
    <Header />
    <Component {...pageProps} />
    <Footer />
   </>
  );
}

if you want to make different layouts or isolate that layout in a separate component you can do so.