Next.js 14 Hide Root layout in another page

Question

I'm using app router in Next.js 14 project. And my project folder structure is like this.

-- dashboard/
              /page.tsx      # main layout is used
              /layout.tsx
              --create
                  /page.tsx      # I want to hide main layout in this page
                  /layout.tsx

layout.tsx                # main layout, used in ALL pages

I should place /dashboard/create page in dashboard folder. So I think I can't move create page another folder.

How can I hide layout?

nyarthan · Accepted Answer · 2024-04-30 10:15:11Z

2

You can use Route Groups to apply different layouts without affecting the routing.

In your case it could look something like this:

.
├── (primary)/
│   ├── layout.tsx  <- formerly "main layout"
│   └── dashboard/
│       ├── layout.tsx  <- "dashboard layout"
│       └── page.tsx
└── (secondary)/
    └── dashboard/
        ├── layout.tsx  <- "dashboard layout"
        └── create/
            ├── layout.tsx  <- "dashboard create layout"
            └── page.tsx

You can ofcourse reuse a component to avoid duplication of the "dashboard layout".

Also the naming of the route groups does not matter - they should probably have a better name then "primary" and "secondary".

answered Apr 30, 2024 at 10:15

nyarthan

5355 silver badges18 bronze badges

Thank you. The answer was really helpful. I have one more question. I wonder if it is okay to create the same dashboard folder. It works well, but is there a possibility that there may be a performance problem?
– Jinho KIM
Commented May 2, 2024 at 0:45
I'm not sure what you mean with the same dashboard folder. If you have a layout that is applied everywhere except for this one page you must use Route Groups on the first level. This shouldn't have an impact on performance.
– nyarthan
Commented May 2, 2024 at 9:26

Add a comment |

Johnny Missile · Accepted Answer · 2024-04-30 10:07:55Z

2

You can separate the page in a separated folder called for ex (without-layout) and have the rest of your route inside (with-layout) with the layout.tx inside.

The folder with parenthesis is a way to separate your code without creating path.

ex:

/dashboard
  layout.tsx                # used in ALL pages
  /(without-layout)
    /create
      page.tsx
  /(with-layout)
    layout.tsx             # used in all pages inside "(with-layout)"
    ...

answered Apr 30, 2024 at 10:07

Johnny Missile

2923 silver badges9 bronze badges

I am assuming by "ALL pages" OP means all pages, not just the ones under /dashboard, so this solution wouldn't work
– nyarthan
Commented Apr 30, 2024 at 10:18
@nyarthan in that case he can move the folder accordingly. but it's the same logic
– Johnny Missile
Commented Apr 30, 2024 at 10:32

Add a comment |

Collectives™ on Stack Overflow

Next.js 14 Hide Root layout in another page

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related