Change complete layout for a folder route! For example: /reviews/ | Next.js | Page 1

rigid ice Mar 19, 2025, 12:37 PM

#

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.

knotty dirgeBOT Mar 19, 2025, 12:37 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

surreal estuary Mar 19, 2025, 12:49 PM

#

Use route groups to separate your routes into groups that have different layouts.

rigid ice Mar 19, 2025, 12:55 PM

#

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.

surreal estuary Mar 19, 2025, 12:58 PM

#

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.

#

rigid ice Mar 19, 2025, 1:06 PM

#

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?

tribal musk Mar 19, 2025, 1:36 PM

#

rigid ice Cant we replace the complete html layout in sub routes of `layout.tsx`?

Yes that’s what you do with 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)

rigid ice Mar 19, 2025, 1:46 PM

#

Thanks this is what i was looking for. Thank you for your time. @tribal musk @surreal estuary Closing this for now.

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