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