Next.js Discord

Discord Forum

Best practices for nested layouts?

Unanswered
Turkish Angora posted this in #help-forum
Open in Discord
Turkish AngoraOP
I am setting up a Next project and while reading through the documentation on nested layouts I am still left with some questions.

Do I need to include global components in each child layout? Example such as headers/footers?

I want my root layout to have my header, footer, and global navigation included in it, and everything else be specific to that individual page.

Will Next.Js handle this automatically? Or do I need to import my global components into each new layout?

Thanks for any help!

3 Replies

Do I need to include global components in each child layout? Example such as headers/footers?

Nope , since layouts are nested, you only need headders/footers of the website at one of the common layout that will be used by children routes.
For example if you want headers/footers to be common in people who accessed the rotue /dashboard but not in /, then you'd put the headers and footers in /dashboard/layout.tsx.

That way, people who visit /dashboard/project/1 would still have the same headers and footers from/dashboard

Hope this clears up your confusion!
This way you also need to only do your Root Layout once. Please do not add <html> and <body> in other places beside your root layout xD