#What is best practice to have different layouts?

16 messages · Page 1 of 1 (latest)

summer token
#

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?

sonic idolBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

naive walrus
#

In that case you use route groups

#

Read it completely and carefully

summer token
#

Thanks, this seems quite daunting though `The <html> and <body> tags need to be added to each root layout.

`

summer token
#

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.png
#

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

naive walrus
naive walrus
summer token
# naive walrus The folder doesnt get included in the url anyways. Also App router is heavily f...

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

naive walrus