Next.js Discord

Discord Forum

Layouts issue

Answered
In&Out posted this in #help-forum
Open in Discord
In&OutOP
Hey folks, i have a layout in app, and another layout in app/(dashboard)/layout.tsx, but for some reason the layout in app is always being applied, why?
Answered by B33fb0n3
You need to create for each layout its own route group. See here: https://nextjs.org/docs/app/getting-started/project-structure#creating-multiple-root-layouts

So instead of having:

/layout.tsx
/(group)/layout.tsx

You want to have:
/(group-one)/layout.tsx
/(group-two)/layout.tsx
View full answer

15 Replies

In&OutOP
## app/layout.tsx
import type { Metadata } from "next";
import { Geist } from "next/font/google";
import "./globals.css";
import { ColorSchemeScript, MantineProvider } from "@mantine/core";
import { ThemeProvider } from "next-themes";
import Navbar from "@/components/Navbar";

const defaultUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "http://localhost:3000";

export const metadata: Metadata = {
  metadataBase: new URL(defaultUrl),
  title: "Next.js and Supabase Starter Kit",
  description: "The fastest way to build apps with Next.js and Supabase",
};

const geistSans = Geist({
  variable: "--font-geist-sans",
  display: "swap",
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        {/* Ensures correct theme color on first render */}
        <ColorSchemeScript />
      </head>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem={true}
        >
          <MantineProvider
            defaultColorScheme="light"
            
          >
            <Navbar />
            {children}
          </MantineProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
## app/(dashboard)/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <div>{children}</div>
    </div>
  );
}
I dont want the <Navbar/> to be there that is in layout
B33fb0n3
You need to create for each layout its own route group. See here: https://nextjs.org/docs/app/getting-started/project-structure#creating-multiple-root-layouts

So instead of having:

/layout.tsx
/(group)/layout.tsx

You want to have:
/(group-one)/layout.tsx
/(group-two)/layout.tsx
Answer
@In&Out so the first layout will have the html and body tag, and other will have other stuff?
B33fb0n3
that depends on the goal that you have. Do you want to have completely different layouts (html and body is different as well) or you at least want to share the html and body stuff?
@In&Out just want home page to have home navbar, and dashboard to not have it
B33fb0n3
ok and do have both the same html and body tag or do they have both a different html and body tag?

So: different, or the same?
@B33fb0n3 ok and do have both *the same* html and body tag or do they have both *a different* html and body tag? So: different, or the same?
In&OutOP
i fixed it, in /app/layout, that layout has default layout with html and children prop only, and rest wont have html tags
looks fine now it seems
is that it?
B33fb0n3
yes, good job
happy to help