Next.js Discord

Discord Forum

What is best practice to have different layouts?

Answered
Reddish carpenter ant posted this in #help-forum
Open in Discord
Avatar
Reddish carpenter antOP
Hi there!

So for example, you have a website layout, that includes header, main and footer, and a different layout might have sidebar, main

Depending on the page, the above might need to be used.

Currently I have a website that has normal stuff, header, main footer and if the user wants to auth, I don't want to show the header and fototer, so my idea was this:

and then put this somewhere in a component folder /layouts and use it wherever needed
async function LayoutMain({ children }) {

  return (
    <>
      <Header />
        <main>
          {children}
        </main>
      <Footer />
    </>
  )
}

export default Index;

async function LayoutEmpty({ children }) {

  return (
    <>
        <main>
          {children}
        </main>
    </>
  )
}

export default Index;


Is there a better way to manage this?
Answered by SupremeDeity
The folder doesnt get included in the url anyways.

Also App router is heavily folder based. Thats just the way it works.
View full answer

14 Replies

Avatar
SupremeDeity
In that case you use route groups
Read it completely and carefully
Avatar
Reddish carpenter antOP
Thanks, this seems quite daunting though The <html> and <body> tags need to be added to each root layout.
Avatar
Reddish carpenter antOP
I find this a bit ridiculous tbh xd So if from my entire app I have (auth), I need to put everything else in a new folder to group the 'web' or whatever name I should give, and pull the layout there and anew layout for auth?

I mean, it makes sense actually, and its nice, but grouping by creating folder seems a bit meh.

But maybe that's a better solution.

Am I BIASED against this way of doing things maybe? Only used nextjs a few times years ago
Image
Maybe this is just a different way of looking at this I suppose
I can name (app) iornically I suppose it makes sense if we thin kabout it
its a nice solution to what you or I used to do with importing it new to files this is a lot cleaner tbh
thanks for the help xD
Avatar
SupremeDeity
If you were doing normal html, you would have to do it for every. single. page.
Avatar
SupremeDeity
The folder doesnt get included in the url anyways.

Also App router is heavily folder based. Thats just the way it works.
Answer
Avatar
Reddish carpenter antOP
Yeah, I like it, been using it now the past 10hours or such and I get the idea, it has pros and cons, but I like it, and yes, this is a lot better than doing it every single page with a component - I mean, you would just have to import MainHTML component, but the above is cleaner, just had to adjust my mindset to this


Really appriciate your help, the docs and insight on this 😄 Super exiting for this project
I quite like this nextjs
Avatar
SupremeDeity
Please mark the answer using this @Reddish carpenter ant