Skipping RootLayout
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
Hello,
I am using same layout on the whole application, but on one page, I want to skip it.
Users will have option to create their own website from predefined template, and it should not be displayed with the root layout.
example.com/custom-users-website
only on that page I don't need it.
I am using app router. Will this be easier with pages router?
I was thinking of routing groups, but it won't help because I am using that layout on the root page, in case I remove everything from the root layout(except html, body) and wrap my root Page.tsx with nav, footer and everything else, it will re-render as it's not part of Layout.tsx file.
Another option is redirecting from "/" to "anything/home" but it will be bad for SEO I guess.
Please help! 😄
I've just started with Next.js from weeks ago.
Thanks!
I am using same layout on the whole application, but on one page, I want to skip it.
Users will have option to create their own website from predefined template, and it should not be displayed with the root layout.
example.com/custom-users-website
only on that page I don't need it.
I am using app router. Will this be easier with pages router?
I was thinking of routing groups, but it won't help because I am using that layout on the root page, in case I remove everything from the root layout(except html, body) and wrap my root Page.tsx with nav, footer and everything else, it will re-render as it's not part of Layout.tsx file.
Another option is redirecting from "/" to "anything/home" but it will be bad for SEO I guess.
Please help! 😄
I've just started with Next.js from weeks ago.
Thanks!
Answered by Rafael Almeida
You can use Route Groups for that: https://nextjs.org/docs/app/building-your-application/routing/route-groups
Create one route group for the whole app and another one specific for these custom pages, which would render a different root layout
Create one route group for the whole app and another one specific for these custom pages, which would render a different root layout
4 Replies
You can use Route Groups for that: https://nextjs.org/docs/app/building-your-application/routing/route-groups
Create one route group for the whole app and another one specific for these custom pages, which would render a different root layout
Create one route group for the whole app and another one specific for these custom pages, which would render a different root layout
Answer
Asian black bearOP
Thank you Rafael!
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
There is option to have multiple Root Layouts.
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
There is option to have multiple Root Layouts.
if we are using routing groups, then root page.tsx don't have to be in /app folder
yep! that's the idea