Is there a way to prevent a root layout component from being shown in some nested route in the app folder of Next.js?

Question

Is there a way to prevent rootlayout from being wrapped around dashboardlayout? Next.js v13 doc:

My file structure:

I could use route groups; however, doing so would disable the wrapping in my contact, pricing routes. Is there a way to prevent this from happening? I would like the home navbar across the contact and pricing page but don't want the home page navbar in my dashboard.

I tried using route groups; however, it disabled wrapping in my pricing and contact routes.

navbar.tsx

"use client";

import { useEffect, useState } from "react";
import { Disclosure } from "@headlessui/react";


function joinClassName(...classes: string[]) {
  return classes.filter(Boolean).join(" ");
}


export default function Navbar() {
  const [navbar, setNavbar] = useState(false);

  const changeBackground = () => {
    if (window.scrollY >= 64) {
      setNavbar(true);
    } else {
      setNavbar(false);
    }
  };

  useEffect(() => {
    changeBackground();
    window.addEventListener("scroll", changeBackground);
  });

  return (
    <Disclosure as="nav">
      {({ open, close }) => (
        <>
          <div
            className={joinClassName(
              navbar || open ? "dark:bg-black bg-white" : "bg-transparent",
              " fixed top-0 left-0 right-0 z-50 "
            )}
          ></div>
        </>
      )}
    </Disclosure>
  );
}

Does this answer your question? [Exclude a page from the Next.js root layout in the app folder](https://stackoverflow.com/questions/76251099/exclude-a-page-from-the-next-js-root-layout-in-the-app-folder) — Adrian Mole, Aug 23 '23 at 14:33

asavor · Accepted Answer · 2023-04-09T17:04:17.190

After doing some digging, I managed to make it work with route groups.

File structure

/app/layout.tsx

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

/app/(dash)/dashboard/layout.tsx

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

/app/(landing)/layout.tsx

export default function LandingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section
      className={
        "container mx-auto h-auto bg-white dark:bg-landing-gradient lg:px-10"
      }
    >
      <Navbar></Navbar>
      {children}
      <LightDarkModeButton></LightDarkModeButton>
    </section>
  );
}

The solution from Youssouf works well. However, the dashboard route would still have the rootlayout CSS styles and other components, which would require me to manually add lines of code to components that I do not want shown in /dashboard.

score 0 · Answer 2 · answered Apr 09 '23 at 13:47

Since your Navbar is a Client Component, you could avoid using Route Groups and yet be able to prevent it from being shown in /dashboard, by using usePathname, like so:

"use client";

// Other imports ...

import { usePathname } from "next/navigation";

export default function Navbar() {
  const pathname = usePathname();
  // useEffect and other codes ...

  if (pathname == "/dashboard") {
    return <></>;
  }
  return <div>Actual content</div>;
}

score 0 · Answer 3 · answered Aug 22 '23 at 11:28

To further buttress the accepted answer, you can check this out.

https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts

Here's how I organized my folders when I face the same issue:

I still maintain a single root layout, but it contains plain html>body>{children} then all other layouts can inherit from it. You can as well make each group layout the root if you remove the default root layout, just make sure each root layout contains the basic html structure.

Here are my layouts:

Normal Unauthenticated Layout for static pages -

Here's my layout for login, register pages -

Is there a way to prevent a root layout component from being shown in some nested route in the app folder of Next.js?

3 Answers3