TTC
Theo's Typesafe Cult•9mo ago
Ani

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
AniOP•9mo 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
chip•9mo 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
AniOP•9mo ago
Ani
AniOP•9mo ago
I tired both ways still the same issue the just moves the parent layout below the current page
chip
chip•9mo ago
how does your sidebar component styling look like?
Ani
AniOP•9mo 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
AniOP•9mo 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...
Want results from more Discord servers?
Add your server