Next.js Discord

Discord Forum

layout rendering

Answered
! nolikas posted this in #help-forum
Open in Discord
How do I render a Navbar.tsx element in all of my pages except in /dashboard page and it's children I want to render Sidebar.tsx element?
Answered by B33fb0n3
yes. Default layout with just html and body. Or if you also want to seperate that take a look at [this](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
View full answer

39 Replies

@! nolikas How do I render a `Navbar.tsx` element in all of my pages except in `/dashboard` page and it's children I want to render `Sidebar.tsx` element?
you can use route groups for that. Group your parts of your app with specific groups to apply specific components and layouts only to this part of your app: https://nextjs.org/docs/app/building-your-application/routing/route-groups
So in theory if I wrap a folder with (), it will not use my main layout.tsx in app/ directory?
@! nolikas So in theory if I wrap a folder with `()`, it will not use my main `layout.tsx` in `app/` directory?
this is the theory:

You see, that you can have multiple groups and each group can have it's own layout. So the layout inside your app applies to all childs under it (both groups), but the layout in group1 will only apply to group1 and the layout in group2 will only apply to group2 ^^
oh so layout.tsx would still apply to ALL of my pages
Rough harvester ant
doesnt Next take the (folders) as comments for organization purposes?
huh
didnt know that
Rough harvester ant
For organizational purposes no?
@Rough harvester ant For organizational purposes no?
for organizational purposes? wdym?
Rough harvester ant
yea
uhh hold on
lemme send it
so it doesnt actually change the routing, it just keeps your application more tidy
So what would be the best way for me to render Navbar in all pages and Sidebar only on dashboard? Should I just remove root layout, add all main pages to () wrapped folder, put that layout over there and just keep dashboard on another () folder?
if I understood that correctly, yes
Rough harvester ant
honestly thats a tough one, but yea that actually should owrk, the (folder1)/layout (folder2)/layout
try that out
and don't forget to create a root layout
wont nextjs freak out if they see I have no layout and no page.tsx?
Rough harvester ant
well that depends
@! nolikas wont nextjs freak out if they see I have no layout and no `page.tsx`?
yea, create a root layout with html and body tag
Rough harvester ant
you need to have a root layout
and I think you need a / path too
but one of the folders can be:
@B33fb0n3 yea, create a root layout with html and body tag
just default layout right?
@! nolikas just default layout right?
yes. Default layout with just html and body. Or if you also want to seperate that take a look at [this](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
Answer
Rough harvester ant
(root)/page.tsx and (root)/layout.tsx will be your app
and (dashboard)/layout.tsx and (dashboard)/dashboard/page.tsx your /dashboard route
happy to help. Please mark solution
and also page.tsx on root doesnt matter right?
yes, that doesnt matter
Okay thanks again
np