18 replies

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

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

Nextjs routing and layout inheritence issue

Similar Threads

Nextjs routing and layout inheritence issue

Similar Threads

Similar Threads

Similar Threads