Next.js Discord

Discord Forum

Refreshing the page in route group cause showing the outer layout

Answered
Broad-snouted Caiman posted this in #help-forum
Open in Discord
Broad-snouted CaimanOP
Hey,
I am following the guide here (https://nextjs.org/docs/app/building-your-application/routing/route-groups) for making route groups. I have one layout (app/layout.tsx) as the root layout and a group called (auth) with another layout (app/(auth)/layout.tsx). The root layout has the Header component while the auth layout doesn't.
It all works fine if I navigate to the login page - I don't see the Header, but while I am on the login page if I hit F5 on the browser I start seing the login page with the root layout - so the Header appears.
Is this a bug or I am not doing something correctly?
Answered by Broad-snouted Caiman
Moving the home page and the root layout to (main) fixed the issue
View full answer

15 Replies

Horned oak gall
any chance to see the code?
the root layout (app/layout.tsx) should always be applied to all routes
Broad-snouted CaimanOP
but why when I navigate to /login I don't see the Header component that is only in the root layout?
Horned oak gall
that's why I wanted to take a look at the source code 😄
Broad-snouted CaimanOP
The root layout:
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "/styles/globals.css";
import Header from "@components/Header";

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="emerald">
      <head>
        <script src="https://accounts.google.com/gsi/client" async></script>
      </head>
      <body className={inter.className}>
        <Header />
        {children}
      </body>
    </html>
  );
}


the AuthLayout:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "/styles/globals.css";
import Header from "@components/Header";

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

export default function AuthLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="emerald">
      <head>
        <script src="https://accounts.google.com/gsi/client" async></script>
      </head>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}


and the app structure in the screenshot
This is what I see if I go to the login
and after F5 in the browser (seeing the header)
overall this is what I am trying to achieve - main page with header, go to Login page - no header, I use NextJS 14.2.3
Horned oak gall
this isn't right, as the root layout always gets rendered - in this case this means that you'd have 2 html tags and so on. I assume having the basic html structure multiple times causes some weird behaviour.
there's different solutions to that, like hiding the header if certain criteria is met (e.g. the url equals login or alike) - or go the other way round and add the header instead of trying to remove it
Broad-snouted CaimanOP
Okay, thanks, I had in mind that I can always hide the header but I thought there will be better solution for that with layouts
Horned oak gall
the layout system always inherits from the layout above - afaik there's no way to remove something from the parent layout
Broad-snouted CaimanOP
I just tried something else and it worked
Broad-snouted CaimanOP
Moving the home page and the root layout to (main) fixed the issue
Answer
Broad-snouted CaimanOP
I got inspired by this post - https://medium.com/@dpravdivij/next-js-14-different-layouts-for-pages-7747a234c29c