Nested Layouts not working
Answered
Bull Arab posted this in #help-forum
Bull ArabOP
Iam running Next.js version 15.2.1
this is my folder structure
/app/layout.tsx
// export const dynamic = "force-dynamic";
// export const fetchCache = "force-no-store";
import type { Metadata } from "next";
import { Roboto, Cinzel } from "next/font/google";
import { Suspense } from "react";
import Navbar from "./components/Navbar/Navbar";
import Header from "./components/Header/Header";
//import Footer from "./components/Footer/Footer";
import "./globals.css";
import { UserProvider } from "./context/UserProvider";
const roboto = Roboto({
variable: "--font-roboto",
subsets: ["latin"],
});
const cinzel = Cinzel({
variable: "--font-cinzel",
subsets: ["latin"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={
<UserProvider>
<div className="grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] h-screen">
<Navbar />
<div className="flex flex-col">
<Header />
<main className="flex-1 overflow-y-auto">
<Suspense fallback={null}>{children}</Suspense>
</main>
</div>
</div>
</UserProvider>
{/* <Footer /> */}
</body>
</html>
);
}
then i have /app/(pages)/login/layouts.tsx and page.tsx
export default function LoginLayout({
children,
}: {
children: React.ReactNode;
}) {
return <section>{children}</section>;
}
in /login the navbar and header are still there what iam doing wrong
this is my folder structure
/app/layout.tsx
// export const dynamic = "force-dynamic";
// export const fetchCache = "force-no-store";
import type { Metadata } from "next";
import { Roboto, Cinzel } from "next/font/google";
import { Suspense } from "react";
import Navbar from "./components/Navbar/Navbar";
import Header from "./components/Header/Header";
//import Footer from "./components/Footer/Footer";
import "./globals.css";
import { UserProvider } from "./context/UserProvider";
const roboto = Roboto({
variable: "--font-roboto",
subsets: ["latin"],
});
const cinzel = Cinzel({
variable: "--font-cinzel",
subsets: ["latin"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={
${roboto.variable} ${cinzel.variable} antialiased}><UserProvider>
<div className="grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] h-screen">
<Navbar />
<div className="flex flex-col">
<Header />
<main className="flex-1 overflow-y-auto">
<Suspense fallback={null}>{children}</Suspense>
</main>
</div>
</div>
</UserProvider>
{/* <Footer /> */}
</body>
</html>
);
}
then i have /app/(pages)/login/layouts.tsx and page.tsx
export default function LoginLayout({
children,
}: {
children: React.ReactNode;
}) {
return <section>{children}</section>;
}
in /login the navbar and header are still there what iam doing wrong
Answered by Giant panda
If you want to opt out of that behavior you have pull out the login route to its own route group.
15 Replies
Giant panda
That is working as intended. Nested routes will be nested into all layouts along the path.
Giant panda
If you want to opt out of that behavior you have pull out the login route to its own route group.
Answer
Giant panda
This is the default behavior that you're experiencing.
@Giant panda If you want to opt out of that behavior you have pull out the login route to its own route group.
Bull ArabOP
so should I make a folder like outside of app /(pages)/login/layouts.tsx?
Giant panda
No
/app/(with-header)/layout.tsx and /app/(login)/login/layout.tsx for exampleNames are up to you.
Just to separate the layouts so they are not nested anymore.
@Giant panda `/app/(with-header)/layout.tsx` and `/app/(login)/login/layout.tsx` for example
Bull ArabOP
do i need a layout.tsx diretcly in /app?
Giant panda
You don't have to have one, but keep in mind that all nested routes and route groups will inherit the parts in it. Additionally, you need root layouts for all groups, as such it's recommended to have a lightweight root layout for all of them.
@Giant panda You don't have to have one, but keep in mind that all nested routes and route groups will inherit the parts in it. Additionally, you need root layouts for all groups, as such it's recommended to have a lightweight root layout for all of them.
Bull ArabOP
its only in /login, /register and /resetpassword i dont want the navbar and header in all my other pages I want them what is the best apporach here?
Giant panda
You have a root layout at
/app/layout.tsx add two route groups as described earlier and separate the the pages like that.For example have
/app/(main)/layout.tsx for all the pages that should have header and navbar that contains these components. The other three pages can be under something like /app/(auth)/layout.tsx.@Giant panda You have a root layout at `/app/layout.tsx` add two route groups as described earlier and separate the the pages like that.
Bull ArabOP
thanks for the help everything works but when I placed by not-found.tsx file in /app/(mainLayout)/notfound.tsx
it just defaults to next.js error page
it just defaults to next.js error page
Giant panda
That's a separate issue - you're welcome to open another thread focused on that issue in particular.