Full reload of page with multiple root layouts files

[rahulnag]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Hi Team, 

As mentioned in the docs that,

Navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js will cause a full page load. This only applies to multiple root layouts.

Link: https://nextjs.org/docs/app/api-reference/file-conventions/layout

I have tried this out by keeping multiple layout files for each of the routes, but the page dosent seems to have full reload on navigation.

Kindly help us out here if I am missing something.

Thanks,
Rahul Nag

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

NA

To Reproduce

Hi Team,

As mentioned in the docs that,

Navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js will cause a full page load. This only applies to multiple root layouts.

Link: https://nextjs.org/docs/app/api-reference/file-conventions/layout

I have tried this out by keeping multiple layout files for each of the routes, but the page dosent seems to have full reload on navigation.

Kindly help us out here if I am missing something.

Thanks,
Rahul Nag

Describe the Bug

Hi Team,

As mentioned in the docs that,

Navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js will cause a full page load. This only applies to multiple root layouts.

Link: https://nextjs.org/docs/app/api-reference/file-conventions/layout

I have tried this out by keeping multiple layout files for each of the routes, but the page dosent seems to have full reload on navigation.

Kindly help us out here if I am missing something.

Thanks,
Rahul Nag

Expected Behavior

It dosent reload the full page

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[esotericbug]

Encountered this today. I added multiple layout files, but when trying to navigate between two pages that belong to the same root layout the navigation hard reload pages. This should only occur if the route groups are different with different root layouts but the hard reload happens when navigating in the same route group.

[CodeWith-HAMZA]

I'm also facing the issue, it ruins all the user-experience of the app,
I got three layouts, (root) (for public, protected routes for logged-in user, (admin) for managing the shop, (auth) for login/signup routes, each time layout changes, the page fully reloads, like oh man am I working with PHP 😒 ?

[emrahaydemir]

Hello, today while developing my project, I had this problem while redirecting from my auth page to the dashboard page with different layouts. I have been trying to solve this problem for hours. and I have been reading the documentation for a long time in case I am making a mistake. I cannot believe that this problem is still not solved.

[umerbilal-tech]

Hi,
I was facing the same issue so after doing some debugging i solved the issue by creating one root layout file in the app directory in which I only place my basic page structure like html and body tag only and then i have created sub-layout files in my shop and admin directory in which I place my structure for website(navbar) and admin panel(sidebar) without adding html and body tags again

here are code samples:
1-my root layout file(/app/layout.tsx)

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

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

export const metadata: Metadata = {
  title: "Fake Store",
  description: "Fake Store using Nextjs",
};

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

2- my shop layout file (/app/shop/layout.tsx):

import { Metadata } from "next";
import NavBar from "./_components/NavBar";

export const metadata: Metadata = {
  title: "Fake Store",
  description: "Fake Store using Nextjs",
};

export default function ShopLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <NavBar />
      <main>{children}</main>
    </>
  );
}

3- my admin layout file (/app/admin/layout.tsx):

import { Metadata } from "next";
import NavBar from "./_components/NavBar";

export const metadata: Metadata = {
  title: "Fake Store",
  description: "Fake Store using Nextjs",
};

export default function AdminLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <NavBar />
      <SideBar/>
      <main>{children}</main>
    </>
  );
}

[dilyandimitrov]

@umerbilal-tech that's all good but what if you want the NavBar to be in the app root layout and not in one of the other pages?

[ewenTonnerre]

@dilyandimitrov I had the same issue and wanted my navbar to be in the app root layout. I had this issue because I was using Link from nextui library instead of nextjs Link. After using Link from next/link, my layout wasn't reloading anymore

1 - Navigating across multiple root layouts will cause a full page load
2 - Not using Link component from next/link will cause a full page load

[umerbilal-tech]

@dilyandimitrov
you can just put your navbar in app layout and remove it from children layouts

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import NavBar from "./_components/NavBar";

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

export const metadata: Metadata = {
  title: "Fake Store",
  description: "Fake Store using Nextjs",
};

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

[nickgieschen]

This is a problem for toasts. If the entire layout reloads, the toast disappears on redirect.