How to implement specifics layouts for routes & group routes?
Unanswered
Birman posted this in #help-forum
BirmanOP
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.
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.
5 Replies
Hi.
I think that it's better to use shared layout component like this.
export default function SharedLayout({ children }: { children: React.ReactNode }) {
return (
#Unknown Channel
<Header />
<main>{children}</main>
<Footer />
</>
);
}
return (
#Unknown Channel
<Header />
<main>{children}</main>
<Footer />
</>
);
}
BirmanOP
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?
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?
the question is, how will I add this shared components in the pages that use it? in the layout, directly on the page?