Nextjs routing and layout inheritence issue
Hey I am having some trouble with layouts in nextjs:
here is my file tree:
and the root layout.tsx is being inheritied in the dashboard page even though I have this in (dasboard)/layout.tsx
Maybe it's just because I am extreemly sleep deprived but I don't see what I am doing wrong here
7 Replies
my /dashboard/[projectId]/layout.tsx:
The content of the parent layout just shifts veritcally in the page
so if I scroll down i see it
super sleep deprived right now so apologies in advance if it's something super simple I'm missing
uhm, don't you need to move layout.tsx into dashboard/
and not (dashboard)
() is just to group routes, it doesn't have any effect on the routes itself
i.e for you to organize stuff
ah, disregard
you can actually have layouts in groups
Routing: Route Groups | Next.js
Route Groups can be used to partition your Next.js application into different sections.
I tired both ways
still the same issue
the just moves the parent layout below the current page
how does your sidebar component styling look like?
temp fix: when I used <Link> no problems but when I type and paste in the url the vertical thing happens - investigating8
facing this issue as well so they maybe related:
https://github.com/vercel/next.js/discussions/53026
GitHub
Why do nested layouts/pages render before their parent layouts? · v...
Imagine I have this simple nested setup in NextJS's app router: app/ - layout.tsx (we'll call this "outer layout") - /inner - layout.tsx (we'll call this "inner layout&qu...