How to apply a specific layout inside a root layout?

I would like to apply a specific layout to a page inside a parent folder which has its own root layout.

I have this folder structure:

src
  app
    (routes)
      admin
        users
        payments
        settings
        example
          [id]
            page.tsx
            layout.tsx
        layout.tsx
        page.tsx
    api
    components
    page.tsx
    layout.tsx

Here I would like to apply a different layout to /admin/example/:id and even I put layout.tsx (example/[id]/layout.tsx), it is still getting admin's layout (admin/layout.tsx) too.

I also looked at route grouping stuff but not really understood why I need to delete my root layout (src/app/layout.tsx) where I put all my general providers such as clerk, upload services, etc.

Solution

Given your file tree, your route /admin/example/:id, which is inside the folder src/app/(routes)/admin/example/[id] has the following layouts associated to it in the following order:

src/app/layout.tsx - your root layout.
src/app/(routes)/admin/layout.tsx - the admin layout.
src/app/(routes)/admin/example/[id]/layout.tsx - the layout for /admin/example/:id.

You have to keep in mind that for a given page.tsx file, the layouts applied are the ones located in any of the parent directories, this is the reason why your /admin/example/:id route renders the admin layout because it is in one of the parent directories of your page file.

Route grouping actually helps you here to avoid having a layout.tsx file that you do not want in the parent directories of your page.tsx.

In this case, your solution would be to re-organize your route tree in such a way that the route /admin/example/:id's page.tsx file does not have the admin's layout.tsx in any of the parent directories.

For example:

src
  app
    (routes)
      admin
        users
        payments
        settings
        layout.tsx
        page.tsx
      (otherAdmin)
        admin
          example
            [id]
              page.tsx
              layout.tsx
    api
    components
    page.tsx
    layout.tsx

By moving the folder src/app/(routes)/admin/example/[id] to src/app/(routes)/(otherAdmin)/admin/example/[id], it will no longer be child of any the admin folder with its layout.tsx file, meaning that in this case, the relevant layouts for this file would be:

src/app/layout.tsx - your root layout.
src/app/(routes)/(otherAdmin)/admin/example/[id]/layout.tsx - the layout for /admin/example/:id.