Next.js Discord

Discord Forum

How do I hide root layout on some pages?

Unanswered
Argentine hake posted this in #help-forum
Open in Discord
Avatar
Argentine hakeOP
In the app directory, whatever is in layout.tsx get shown in all pages, but what if I don't it to be shown on specific pages, for example, login, payment page etc, how can I do it?

19 Replies

Avatar
!=tgt
make another layout.tsx inside a child folder
which will override it
like /login/layout.tsx
Avatar
Argentine hakeOP
in that case, that layout.tsx becomes root layout.tsx children nah?
Avatar
!=tgt
nope
it's it's own
Avatar
Argentine hakeOP
what if I want it to be root layout children? lets say root layout got navbar, and child layout got sidebar for categories, which is common for a lot of child pages, how can i achieve it?
Avatar
!=tgt
I don't think you could do that
Avatar
Argentine hakeOP
Image
for example above page
Avatar
Smultar.json
@Argentine hake try using route grouping.
Each route group folder has a seperate layout, and only renders the URL that is called.
Avatar
Blackpoll Warbler
I have managed to achieve the seperation of the root layout by having a (root) grouped with a page.tsx defined in there
(root) -> page.tsx
app->src->layout.tsx
Now my /login/ route isnt affected by the root layout
Dont know how this is supposed to work but it works, came here to ask if this is the correct practices and if not might even be a bug?
Avatar
Blackpoll Warbler
** also make sure to add your template that you want to have applied to your root page im not sure if the template is needed