Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – My login route layout still shows root layout components in nextjs 14?

I’m new in nextjs (App router).
In my root app/layout.tsx I have sidebar and header components which should be available for all other pages:

import { Inter } from "next/font/google";
import "./globals.css";
import Sidebar from "@/app/components/sidebar";
import Header from "@/app/components/header";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Admin Dashboard",
  description: "Created by me",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="flex min-h-screen bg-[#F9FAFB]">
          <Sidebar />
          <main className="flex-1 min-h-screen ml-1/5 p-4">
            <Header />
            {children}
          </main>
        </div>
      </body>
    </html>
  );
}

it is my login/layout.tsx

export default function LoginLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="flex min-h-screen items-center justify-center bg-[#F9FAFB] w-full">
      <div className="w-full max-w-md p-6 bg-white rounded shadow-md">
        {children}
      </div>
    </div>
  );
}

But when I go to login route, it still shows Header and Sidebar, which it shouldn’t. My login component should be placed in plain background. How to fix it?

Tags:

2

Answers


  1. 0

    Whatever you place in the app/layout.tsx is available to every page inside your application. Layouts are nested as per folder heirarchy. If you don’t want the login page to have it then put the main-layout file inside a folder, something like app/home/layout.tsx and now everypage that has this layout will go inside the app/home route.

    Your login page that do not have this layout will go inside app/login folder

    Login or Signup to reply.
  2. 0

    You can use Route Group feature of nextjs to handle layout for specific route groups.
    You can go through Route Group documentation here
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search