Layout Issue
Answered
Harlex posted this in #help-forum
HarlexOP
In my next application, I have 2 layouts named RootLayout and LoginLayout, root is outside and login is under the login folder, of course I have a page.tsx file there, I included things like header footer in root, but I did not include things like header footer in login, but when I go to /login, header sidebar etc. appears.
import type { Metadata } from "next";
import "./globals.css";
import Header from "./components/layout/Header/Header";
import Footer from "./components/layout/Footer/Footer";
import Sidebar from "./components/layout/Sidebar/Sidebar";
import ClientProvider from "./components/layout/ClientProvider";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<ClientProvider>
<Sidebar />
<Header />
<main className="pl-[270px]">
<div className="container flex flex-col min-h-screen">
<div className="mb-5 mt-[90px] grow">{children}</div>
<Footer />
</div>
</main>
</ClientProvider>
</body>
</html>
);
}import "../../globals.css";
import ClientProvider from "@/app/components/layout/ClientProvider";
export default function LoginLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ClientProvider>
<main>{children}</main>
</ClientProvider>
);
}Answered by B33fb0n3
it looks like you haven't done what I linked you here: https://nextjs-forum.com/post/1273544295856734339#message-1273547535675424833
As you can see: the green box (layout) is on top of the yellow box (layout). Like that the yellow box is nested in the green box. Please do this: https://nextjs-forum.com/post/1273544295856734339#message-1273547493186994217
As you can see: the green box (layout) is on top of the yellow box (layout). Like that the yellow box is nested in the green box. Please do this: https://nextjs-forum.com/post/1273544295856734339#message-1273547493186994217
19 Replies
@Harlex In my next application, I have 2 layouts named RootLayout and LoginLayout, root is outside and login is under the login folder, of course I have a page.tsx file there, I included things like header footer in root, but I did not include things like header footer in login, but when I go to /login, header sidebar etc. appears.
tsx
import type { Metadata } from "next";
import "./globals.css";
import Header from "./components/layout/Header/Header";
import Footer from "./components/layout/Footer/Footer";
import Sidebar from "./components/layout/Sidebar/Sidebar";
import ClientProvider from "./components/layout/ClientProvider";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<ClientProvider>
<Sidebar />
<Header />
<main className="pl-[270px]">
<div className="container flex flex-col min-h-screen">
<div className="mb-5 mt-[90px] grow">{children}</div>
<Footer />
</div>
</main>
</ClientProvider>
</body>
</html>
);
}
tsx
import "../../globals.css";
import ClientProvider from "@/app/components/layout/ClientProvider";
export default function LoginLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ClientProvider>
<main>{children}</main>
</ClientProvider>
);
}
nested layouts apply each other. So the login layout is nested inside the real root layout and because of that it appears. If you need multiple root layouts, you might want to structure your project [like this](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)[:](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Froute-group-multiple-root-layouts.png&w=1920&q=75)
@B33fb0n3 nested layouts apply each other. So the login layout is nested inside the real root layout and because of that it appears. If you need multiple root layouts, you might want to structure your project [like this](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)[:](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Froute-group-multiple-root-layouts.png&w=1920&q=75)
HarlexOP
@B33fb0n3 I did what was written in the document but there is the same problem again, could I have done something wrong?
why do you have
(pages) folder?@averydelusionalperson why do you have `(pages)` folder?
HarlexOP
I put it under the (pages) folder to make it more organised
You prolly have a layout folder under (pages) folder, so the login layout is being nested inside that rootlayout
can you share that app/layout.tsx file?
@averydelusionalperson You prolly have a layout folder under (pages) folder, so the login layout is being nested inside that rootlayout
HarlexOP
but (pages) does this folder not pass the application
@Harlex In my next application, I have 2 layouts named RootLayout and LoginLayout, root is outside and login is under the login folder, of course I have a page.tsx file there, I included things like header footer in root, but I did not include things like header footer in login, but when I go to /login, header sidebar etc. appears.
tsx
import type { Metadata } from "next";
import "./globals.css";
import Header from "./components/layout/Header/Header";
import Footer from "./components/layout/Footer/Footer";
import Sidebar from "./components/layout/Sidebar/Sidebar";
import ClientProvider from "./components/layout/ClientProvider";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<ClientProvider>
<Sidebar />
<Header />
<main className="pl-[270px]">
<div className="container flex flex-col min-h-screen">
<div className="mb-5 mt-[90px] grow">{children}</div>
<Footer />
</div>
</main>
</ClientProvider>
</body>
</html>
);
}
tsx
import "../../globals.css";
import ClientProvider from "@/app/components/layout/ClientProvider";
export default function LoginLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ClientProvider>
<main>{children}</main>
</ClientProvider>
);
}
HarlexOP
@averydelusionalperson
so, the login is being nested inside the root layout
@Harlex Click to see attachment
it looks like you haven't done what I linked you here: https://nextjs-forum.com/post/1273544295856734339#message-1273547535675424833
As you can see: the green box (layout) is on top of the yellow box (layout). Like that the yellow box is nested in the green box. Please do this: https://nextjs-forum.com/post/1273544295856734339#message-1273547493186994217
As you can see: the green box (layout) is on top of the yellow box (layout). Like that the yellow box is nested in the green box. Please do this: https://nextjs-forum.com/post/1273544295856734339#message-1273547493186994217
Answer
yeah, that's right way to do
HarlexOP
@averydelusionalperson@B33fb0n3 Thank you both very much.
Happy to help