Next.js Discord

Discord Forum

Nested Layouts not working

Answered
Bull Arab posted this in #help-forum
Open in Discord
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={${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 Asian black bear
If you want to opt out of that behavior you have pull out the login route to its own route group.
View full answer

15 Replies

Asian black bear
That is working as intended. Nested routes will be nested into all layouts along the path.
Asian black bear
If you want to opt out of that behavior you have pull out the login route to its own route group.
Answer
Asian black bear
This is the default behavior that you're experiencing.
@Asian black bear 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?
Asian black bear
No
/app/(with-header)/layout.tsx and /app/(login)/login/layout.tsx for example
Names are up to you.
Just to separate the layouts so they are not nested anymore.
@Asian black bear `/app/(with-header)/layout.tsx` and `/app/(login)/login/layout.tsx` for example
Bull ArabOP
do i need a layout.tsx diretcly in /app?
Asian black bear
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.
@Asian black bear 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?
Asian black bear
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.
@Asian black bear 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
Asian black bear
That's a separate issue - you're welcome to open another thread focused on that issue in particular.