Is multiple root layout (shares same subroutes) possible?

[yoshi95]

Hi,

I am building a site (using [email protected]) that has 2 top level entry route

• www.some-lifestyle.com/furniture
• www.some-lifestyle.com/clothing

both entry routes share the same subroutes, but with different css. I am able to achieve this with lots of duplication in sub-route folders, like the following

.
└── app/
    ├── clothing/
    │   ├── product/
    │   │   └── page.tsx
    │   ├── category/
    │   │   └── ...
    │   ├── layout.tsx
    │   ├── page.tsx
    │   └── clothing.css
    └── furniture/
        ├── [duplicated as clothing... except]
        └── furniture.css

I am trying to remove the subroute duplication, by doing something like this

Attempt 1

• layout.tsx dynamic-import
  • ./styles/furniture.tsx if params.type is furniture
  • ./styles/closthing.tsx if params.type is clothing

.
└── app/
    └── [type]/
        ├── product/
        │   └── page.tsx
        ├── category/
        │   └── ...
        ├── styles/
        │   ├── furniture.css
        │   ├── furniture.tsx
        │   ├── clothinig.css
        │   └── clothing.tsx
        ├── layout.tsx - dynamic import `styles/(clothing|furniture).tsx`
        └── page.tsx

but this does not work because NextJS RSC will add preload tags for all css, overriding styles and loading fonts for both brand/subroutes

Attempt 2

I now try to use the concept of parallel routes with slots, conditionally rendering @clothing or @furniture slot based on the params.type

.
└── app/
    └── [type]/
        ├── product/
        │   └── page.tsx
        ├── category/
        │   └── ...
        ├── @furniture/
        │   ├── layout.tsx - returns null of `type` is clothing
        │   ├── page.tsx - imports `furniture.css`
        │   └── furniture.css
        ├── @clothing/
        │   ├── layout.tsx - returns null if `type` is furniture
        │   ├── page.tsx - imports `clothing.css`
        │   └── clothing.css
        ├── layout.tsx - use `@clothing|@furniture` slots based on `type`
        └── page.tsx

but again, NextJS adds preload tag for both css

Attempt 3

I randomly stumbled on this when searching for similar issues/discussions, that prefetch heuristics was updated, up to loading boundary
https://github.com/vercel/next.js/pull/49077/files

without understanding the underlying code I added loading.tsx to each slot, hoping it would not preload the css file, and as expected it did not work.

now I am out of ideas

I am now out of ideas on how to remove the duplication. I have a lot more microsites/landing page that has different top level layout/css to drive distinct branding from emails/search traffic, but all with same subroutes.

Would love to understand if this is doable at all, or how this could be achieve? I am assuming this is a common setup, open to suggestion if not.

Thanks in advance

[yoshi95]

A similar discussion happened here, but it is not specific to app router
#22136

I dont know if similar work arounds applies to app router, specifically around the preload heuristics in app-router

[yoshi95]

also found this
vercel/platforms#378

but the workaround here seems to require all tenants/brands/domains' styles/css variables combined into 1 file and at request time determine which classes to apply at root level, vs loading only the tenant/brand/domain's css