How to implement specifics layouts for routes & group routes?

[slim silo]

Hello guys, I'm building an pwa app and got myself into some questions.

my app is going to have different pages, some with a shared structure (considering only header and footer) and other are going to have their unique structure (header and footer too, some will have only a header and no footer, and so on).

for example a login page, that wont have header neither footer, just the content (a form), a home that wil have an ellipse for settings, a message and some random icon and some random page that will have a different structure appart the previous.

do you guys already got yourself into something like this? what approach did you choose?

I've read some posts online about this and found this reddit post:
https://www.reddit.com/r/nextjs/comments/1bbhb91/how_to_create_multiple_layouts_in_nextjs/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

but I dont think this is a good approach because with this I might need to create a diferente route group just for one page (that might not be viable)

ps: its my first project using this framework, so I might be asking something really stupid, but any help will be usefull.

[thick sigil]

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)

[hollow plume]

Hi.

I think that it's better to use shared layout component like this.

export default function SharedLayout({ children }: { children: React.ReactNode }) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
);
}

[slim silo]

thanks for the help man, I really appreciate it.

but in this case, will I still need the custom layouts for any page that share this component or I will add this shared layout in everypage?