Nextjs routing and layout inheritence issue

Hey I am having some trouble with layouts in nextjs: here is my file tree:

src/app
├── (dashboard)
│   ├── dashboard
│   │   └── [projectId]
│   │       ├── _components

│   │       ├── home
│   │       │   └── page.tsx
│   │       ├── layout.tsx
│   │       ├── sidebar.tsx
│   │       └── tasks
│   │           ├── CustomNode.tsx
│   │           ├── flow.tsx
│   │           └── page.tsx
│   └── layout.tsx

├── layout.tsx

src/app
├── (dashboard)
│   ├── dashboard
│   │   └── [projectId]
│   │       ├── _components

│   │       ├── home
│   │       │   └── page.tsx
│   │       ├── layout.tsx
│   │       ├── sidebar.tsx
│   │       └── tasks
│   │           ├── CustomNode.tsx
│   │           ├── flow.tsx
│   │           └── page.tsx
│   └── layout.tsx

├── layout.tsx

and the root layout.tsx is being inheritied in the dashboard page even though I have this in (dasboard)/layout.tsx

import React from 'react'
export default function DashboardRootLayout({ children }: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

import React from 'react'
export default function DashboardRootLayout({ children }: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Maybe it's just because I am extreemly sleep deprived but I don't see what I am doing wrong here

7 Replies

Ani•3mo ago

my /dashboard/[projectId]/layout.tsx:

import React from 'react'
import { Sidebar } from './sidebar'
import { Navbar } from './_components/navbar'
import { getUserAuth } from '@/server/auth'
import { redirect } from 'next/navigation'


export default async function DashboardLayout({
  children,
  params

}: {
  children: React.ReactNode,
  params: {
    projectId: string
  }
}) {
  const { session } = await getUserAuth()
  if (!session || !session.user) {
    redirect('/auth/login')
  }
  return (

    <div className="flex h-screen">
      <Sidebar id={params.projectId} />
      <main className="flex-1 overflow-y-auto">
        <Navbar session={session} />
        <div className="overflow-y-auto p-8 pt-2 md:p-8">
          {children}
        </div>
      </main>
    </div>

  )
}

import React from 'react'
import { Sidebar } from './sidebar'
import { Navbar } from './_components/navbar'
import { getUserAuth } from '@/server/auth'
import { redirect } from 'next/navigation'


export default async function DashboardLayout({
  children,
  params

}: {
  children: React.ReactNode,
  params: {
    projectId: string
  }
}) {
  const { session } = await getUserAuth()
  if (!session || !session.user) {
    redirect('/auth/login')
  }
  return (

    <div className="flex h-screen">
      <Sidebar id={params.projectId} />
      <main className="flex-1 overflow-y-auto">
        <Navbar session={session} />
        <div className="overflow-y-auto p-8 pt-2 md:p-8">
          {children}
        </div>
      </main>
    </div>

  )
}

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

chip•3mo ago

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

Ani•3mo ago

yup https://nextjs.org/docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout

Routing: Route Groups | Next.js

Route Groups can be used to partition your Next.js application into different sections.

Ani•3mo ago

I tired both ways still the same issue the just moves the parent layout below the current page

chip•3mo ago

how does your sidebar component styling look like?

Ani•3mo ago

import { NavItem } from '@/types/nav'
import {  Home, LayoutList, UserCog } from 'lucide-react'
import Link from 'next/link'
import React from 'react'
import { Item } from './_components/Item'

export const Sidebar = ({
  id
}: {
  id: string
}) => {
  const links: NavItem[] = [
    {
      link: `/dashboard/${id}/home`,
      name: `Home`,
      icon: <Home className="h-4 w-4" />
    },
    {
      link: `/dashboard/${id}/tasks`,
      name: `Tasks Flow Chart`,
      icon: <LayoutList className='h-4 w-4' />
    },
    {
      link: `/dashboard/${id}/users`,
      name: `Users`,
      icon: <UserCog />
    }
  ]

  return (
    <div className="hidden border-r bg-muted/40 md:block min-w-[250px]">
      <div className="flex h-full max-h-screen flex-col gap-2">
        <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
          <Link href="/" className="flex items-center gap-2 font-semibold">
            <span className="">LOGO</span>
          </Link>
        </div>
        <div className="flex-1">
          <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
            {
              links.map((item) => <Item item={item} key={item.name} />)
            }
          </nav>
        </div>

      </div>
    </div>
  )
}

import { NavItem } from '@/types/nav'
import {  Home, LayoutList, UserCog } from 'lucide-react'
import Link from 'next/link'
import React from 'react'
import { Item } from './_components/Item'

export const Sidebar = ({
  id
}: {
  id: string
}) => {
  const links: NavItem[] = [
    {
      link: `/dashboard/${id}/home`,
      name: `Home`,
      icon: <Home className="h-4 w-4" />
    },
    {
      link: `/dashboard/${id}/tasks`,
      name: `Tasks Flow Chart`,
      icon: <LayoutList className='h-4 w-4' />
    },
    {
      link: `/dashboard/${id}/users`,
      name: `Users`,
      icon: <UserCog />
    }
  ]

  return (
    <div className="hidden border-r bg-muted/40 md:block min-w-[250px]">
      <div className="flex h-full max-h-screen flex-col gap-2">
        <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
          <Link href="/" className="flex items-center gap-2 font-semibold">
            <span className="">LOGO</span>
          </Link>
        </div>
        <div className="flex-1">
          <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
            {
              links.map((item) => <Item item={item} key={item.name} />)
            }
          </nav>
        </div>

      </div>
    </div>
  )
}

temp fix: when I used <Link> no problems but when I type and paste in the url the vertical thing happens - investigating8

Ani•3mo ago

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...

Gaming

Programming

Nextjs routing and layout inheritence issue