Home There is a way to remove component <Header /> inside _app.tsx in one single page?

Questions

There is a way to remove component <Header /> inside _app.tsx in one single page?

February 15, 2022

I have a component inside my _app.tsx file, This componennt is rendered in all pages, but I want that in my page payment.tsx this component doesnt exist, there is some way to do it?

>Solution :

Something like this should work:

// pages/payment

export default function Payment() {
  // ...
}

Payment.hideHeader = true;

// pages/_app

import Header from '...';

export default function App({ Component, pageProps }) {
  return (
    <>
      {!Component.hideHeader && <Header />}
      <Component {...pageProps} />
    </>
  );
}

You might need to customize types, etc. as you’re using TS. Refer this: https://nextjs.org/docs/basic-features/layouts#with-typescript.