Next.js Discord

Discord Forum

How do I override layout?

Unanswered
abdurrahmantalha posted this in #help-forum
Open in Discord
abdurrahmantalhaOP
so this is what I did

import { Metadata } from "next";
import React from "react";

export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
};

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
    return <div>{children}</div>;
}


this is the layout inside the (dashboard) folder, and this is the root layout:
import "./globals.css";
import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import Navbar from "./components/Layout/Navbar";

const poppins = Poppins({ subsets: ["latin"], weight: "300" });

export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body className={poppins.className}>
                 <Navbar/>
                {children}
            </body>
        </html>
    );
}

The navbar from the root layout is still appearing did I do something wrong?

3 Replies

DirtyCajunRice | AppDir
if you want them to be totally isolated root, thet both need to be grouped, and both need html and body
abdurrahmantalhaOP
thank you it worked