Can you completely override the root layout? (is there ever a good reason to?)
Answered
Jumbo flying squid posted this in #help-forum
Jumbo flying squidOP
So i see the root layout is required to have html/body tags.
Lets say in the /manager/blog route, i want to change some things at the root level so i want to have a new html/body on the page. is that possible? I dont know why i'd need such a thing, but i was curious, if we can only place things inside the root layout, or can we ever override it and start fresh in a deeper route?
Lets say in the /manager/blog route, i want to change some things at the root level so i want to have a new html/body on the page. is that possible? I dont know why i'd need such a thing, but i was curious, if we can only place things inside the root layout, or can we ever override it and start fresh in a deeper route?
Answered by luis_llanes
Yes it's definitely possible. Just have in mind that if you navigate from one of the root layouts to the other you will get a full page load since you're essentially re-mounting the whole HTML structure.
I like to think about multiple root layouts as different apps within the same app lol
I like to think about multiple root layouts as different apps within the same app lol
10 Replies
@Jumbo flying squid So i see the root layout is required to have html/body tags.
Lets say in the /manager/blog route, i want to change some things at the root level so i want to have a new html/body on the page. is that possible? I dont know why i'd need such a thing, but i was curious, if we can only place things inside the root layout, or can we ever override it and start fresh in a deeper route?
yes you can create route groups and have multiple root layouts. You can read more about it ([click here](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts))
Jumbo flying squidOP
Cool thanks for that link.
Looks like you can't 'override' the root layout, but can omit it and allow the other folder's layout files become the main one then.
You mean override as displaying a different layout and distribution visually?
You can have nested layouts, and those can vary between each others
Say you have a rootLayout in /app/layout.tsx
This RootLayout will have the <html> <body> tags and all the basic & common configuration across your whole app.
Maybe import the global css, your fonts, your global metadata, and instead of providing a layout (as in HTML elements defining the structure and styles of your pages) just directly render <body>{children}</body> and override the layout on each nested layouts
Idk if it makes sense?
You can have nested layouts, and those can vary between each others
Say you have a rootLayout in /app/layout.tsx
This RootLayout will have the <html> <body> tags and all the basic & common configuration across your whole app.
Maybe import the global css, your fonts, your global metadata, and instead of providing a layout (as in HTML elements defining the structure and styles of your pages) just directly render <body>{children}</body> and override the layout on each nested layouts
Idk if it makes sense?
Most of the times you don’t want to create whole new root layout (with the <html> and <body> tags) for different groups of routes, you just need a nested layout that defines the structure and styles from there down
@luis_llanes You mean override as displaying a different *layout* and distribution visually?
You can have nested layouts, and those can vary between each others
Say you have a rootLayout in /app/layout.tsx
This RootLayout will have the <html> <body> tags and all the basic & common configuration across your whole app.
Maybe import the global css, your fonts, your global metadata, and instead of providing a *layout* (as in HTML elements defining the structure and styles of your pages) just directly render **<body>{children}</body>** and *override* the layout on each nested layouts
Idk if it makes sense?
Jumbo flying squidOP
for 'nested layouts' they seem to always be placed inside the parent html/body...
so /blog pretend would have <div id="blog">{children}</div> where the blog pages would get placed inside of the parent/root body/html layout.
But @B33fb0n3 was pointing out you can instead have mult layouts if you omit the root layout, as seen here:
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
so /blog pretend would have <div id="blog">{children}</div> where the blog pages would get placed inside of the parent/root body/html layout.
But @B33fb0n3 was pointing out you can instead have mult layouts if you omit the root layout, as seen here:
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
@luis_llanes Most of the times you don’t want to create whole new *root layout* (with the <html> and <body> tags) for different groups of routes, you just need a nested layout that defines the structure and styles from there down
Jumbo flying squidOP
yes, i kinda figured most the time that would be optimal, just curious if can get fully changed (which seems possible if omit the root layout).
Thanks for your help as well @luis_llanes !
@Jumbo flying squid for 'nested layouts' they seem to always be placed inside the parent html/body...
so /blog pretend would have <div id="blog">{children}</div> where the blog pages would get placed inside of the parent/root body/html layout.
But <@301376057326567425> was pointing out you can instead have mult layouts if you omit the root layout, as seen here:
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
Yes it's definitely possible. Just have in mind that if you navigate from one of the root layouts to the other you will get a full page load since you're essentially re-mounting the whole HTML structure.
I like to think about multiple root layouts as different apps within the same app lol
I like to think about multiple root layouts as different apps within the same app lol
Answer