Question 302055 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Next.js how to set 3 different layouts base on project example

I use this starter project:

https://github.com/vercel/nextjs-subscription-payments

The currently default content in above I want to lave original as home.

Now I want add admin and dashboard with different layout.

So I created route:

app/dashboard/layout.tsx - I rename this as DashboardLayout
app/dashboard/page.tsx

for test I place the same content from:

app/layout.tsx
app/page.tsx

The problem is now I have duplicated header and footer when I access to page dashboard. So looks like still in layout dashboard also fetch layout from root app layout.tsx

Can anyone help me with this structure?

Tags:

2

Answers


  1. 0

    It depends on your needs.

    1. If layouts are similiar. I suggest to modify your current navbar and footer for different pages. This will result in less code overall.
    2. If Layouts are completelly different your best bet to add navbar and footer to your child layout. And leave main layout without header and footer.
    3. If for some reason your header and footer must be in root layout. You can try hiding it on different pages. Although this can be hacky solution. And you might need to implement page loader to avoid double header footer effect.
     <html lang="en">
      <body className="bg-black loading">
        <SupabaseProvider>
          <main
            id="skip"
            className="min-h-[calc(100dvh-4rem)] md:min-h[calc(100dvh-5rem)]"
          >
            {children}
          </main>
        </SupabaseProvider>
      </body>
    </html>

    const DashboardLayout = (children) => {
  return (
    <div>
     <DashboardNavbar/>
     {children}
     <DashboardFooter/>
    </div>
  )
}
export default DashboardLayout
    Login or Signup to reply.
  2. 0

    It depends on your needs.

    1.If layouts are similiar. I suggest to modify your current navbar and footer for different pages. This will result in less code overall.
    2.If Layouts are completelly different your best bet to add navbar and footer to your child layout. And leave main layout without header and footer.
    3.If for some reason your header and footer must be in root layout. You can try hiding it on different pages. Although this can be hacky solution. And you might need to implement page loader to avoid double header footer effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search