How to handle different Headers in Reactjs

Question

I am working with Reactjs(Nextjs) and i have different "Header" for home page and different header for rest of pages,So i want to know that how can i use different headers in nextjs,I created "Layout.js" and put "Header" and "footer" inside this and use/import this file in "_app.js", but how can we do this for different headers ? Here is my _app.js file

import React from 'react';
import App from 'next/app';
import Layout from '../components/layout'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
     <Layout>
     <Component {...pageProps} />
     </Layout>
    </>
   );
}
export default MyApp

I'd recommend a read through Per-Page Layouts documentation. — juliomalves
– juliomalves, Commented Aug 28, 2022 at 21:19

Badal Saibo · Accepted Answer · 2022-08-26 12:43:36Z

1

Create a new layout for your homepage, say HomeLayout.
Attach this HomeLayout as a property getLayout on your homepage component.

// src/pages/index.js
import HomeLayout from 'layout/HomeLayout';

const Home = () => {
    return (
        <h1>Home page </h1>
    );
};

Home.getLayout = HomeLayout;

export default Home;

Use this newly attached property on _app.js to conditionally determine which layout to render. If there exists getLayout on a component, we use that layout else we will fallback to our default Layout.

// _app.js
import Layout from '../components/layout'

const App = ({ Component, pageProps }) => {
    const AppLayout = Component.getLayout || Layout;
    return (
      <AppLayout>
        <Component {...pageProps} />
      </AppLayout>
    );
};

export default App;

Reference:

https://nextjs.org/docs/basic-features/layouts

answered Aug 26, 2022 at 12:43

Badal Saibo

3,9031 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user19725334 Over a year ago

i am getting following error "Property 'getLayout' does not exist on type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }"

Badal Saibo Over a year ago

@Rick did you solve that? Seems like a type error

Collectives™ on Stack Overflow

How to handle different Headers in Reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related