Next.js Discord

Discord Forum

Change complete layout for a folder route! For example: /reviews/

Answered
Anbu posted this in #help-forum
Open in Discord
AnbuOP
I have a app that will display landing page and has admin page.

The layout will be fully changed.

For example,
I have a layout.tsx file at root and having a set of components loaded for site landing page.
I do have reviews/layout.tsx file and have many routes inside the reviews folder for example, reviews/about, reviews/youtube, reviews/events which should take fresh layout which will reference class. etc.

I wanna change complete layout for a folder route (review)! But currently it is inheriting the parent layout file.

I tried it using template.tsx still same problem.
Answered by Asian black bear
Use route groups to separate your routes into groups that have different layouts.
View full answer

10 Replies

Asian black bear
Use route groups to separate your routes into groups that have different layouts.
Answer
AnbuOP
i tried that too, but since i have another route called, /about in route and i have /reviews/about, if we have it in (reviews), it has some complex.

For that, i created a route inside (reviews)/reviews/ and moved all the route inside this. But still it is inherited from the parent layout file.
Asian black bear
You just split it something like this:
/app/layout.tsx -- root layout with elements shared by EVERYTHING
/app/(reviews)/reviews/layout.tsx -- layout for everything under /reviews
/app/(reviews)/reviews/...
/app/(everything-else)/about
/app/(everything-else)/admin
...
You just need to separate things into distinct route groups that they aren't nested if you don't want to inherit layouts.
AnbuOP
okay but in my /app/layout.ts i have a layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className="scroll-smooth">
      <head>
        <link rel="canonical" href="https://anbuselvan-annamalai.com" />
      </head>
      <body className="bg-slate-900">
        <ConditionalNavigation />
        <main>{children}</main>
        <Footer />
        <ScrollHandler />
        <Toaster position="bottom-right" />
        <Analytics />
        <SpeedInsights />
        ...
})


I dont want bg-slate-900 in my reviews layouts. How to remove that?
Cant we replace the complete html layout in sub routes of layout.tsx?
@Anbu Cant we replace the complete html layout in sub routes of `layout.tsx`?
LuisLl
Yes that’s what you do with [multiple root layouts](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts) but navigating between different sections s of your app that are in different layouts will trigger a full page load.

It’s not technically a sub-layout, it’s another root layout so it requires the full HTML structure (<html> <body>) otherwise it won’t work.
But that might not even be what you need. If you just want different parts of your app to have different backgrounds then don’t hard-code the background color at the top-most layout, do it inside the nested layout you actually want to have the color, and this way you won’t need multiple root layouts (the solution mentioned above)
AnbuOP
Thanks this is what i was looking for. Thank you for your time. @LuisLl @Asian black bear Closing this for now.