Next.js Discord

Discord Forum

How to Remove or Replace a Component in Root Layout with a Nested Layout in Next.js?

Answered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
I am working on a Next.js project and utilizing nested layouts to manage my UI structure. I have a Root Layout where I have defined several components like Navbar, Header, Footer, etc. However, when I navigate to a page with a specific nested layout, I want to remove or replace the Header component defined in the Root Layout. Here's a simplified version of my code:

Root Layout:
<html lang="ne" suppressHydrationWarning>
  <body>
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {width !== null ? (width > 768 ? <Navbar collision={false} /> : <HamburgerMenu />) : null}
      <Header title={title} content={content}/>
      <div className={'flex justify-center mt-10'}>
        <div className="flex flex-col space-x-4">
          {children}
        </div>
      </div>
      <Footer position={false}/>
    </ThemeProvider>
  </body>
</html>


Nested Layout:
export default function formLayout({children,
                                   }: {
    children: React.ReactNode
}) {
    const {width} = useWindowSize()

    return (
        // remove the <Header/> component here somehow
        <section>
            <div className="flex items-center justify-center h-screen">
                <div>
                    {children}
                </div>
            </div>
        </section>
    )
}

this may sound as simple as removing the Header component in the root layout, but i need the header component to be displayed on the homepage ('/'). how should i approach this dilemma?
Answered by Mossyrose gall wasp
i would use usePathname to display components in specific page its not best solution but it works for this situation
View full answer

1 Reply

Mossyrose gall wasp
i would use usePathname to display components in specific page its not best solution but it works for this situation
Answer