layout remounts when navigating to root

Question

I'm using Nextjs 14.2.5 app router. Per documentation on layouts, "On navigation, layouts preserve state, remain interactive, and do not re-render." When navigating to or between nested routes, layout does not re-render, but when navigating back to root (home) layout re-renders.

Running locally there is no issue, but deployed to gh-pages, layout reloads when navigating to root.

Am I missing something or not understanding how root layout.js files work? or does it have to do with gh-pages?

project
└─ app
   ├─ about
   │  └─ page.js
   ├─ contact
   │  └─ page.js
   ├─ layout.js
   ├─ page.js

layout.js

import { Inter } from "next/font/google";
import "@/app/globals.css";
import Head from "next/head";
import Header from "@/_components/header";
import Footer from "@/_components/footer";
import { basePath } from "@/scripts/basepath.js";

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

export const meta = {
  title: "",
  description: "",
  image: `${basePath}/`,
};

export default function RootLayout({ children }) {
  return (
    <html lang='en' className='dark' data-theme='dark'>
      <Head>
      </Head>
      <body className={`${inter.className}`}>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

Bryan · Accepted Answer · 2024-08-29 02:55:06Z

I noticed github adds a trailing slash to the root location of a github pages site (https://user.github.io/repo/) and that my nested routes did not. Curious if that had an effect on app router routes, I tried adding trailingSlash: true, to next.config and... eureka, page no long reloads when navigating to root.

const nextConfig = {
  trailingSlash: true,
}

Not sure if this is ideal for SEO but a fix non the less. Wondering if there is a way to turn off the trailing slash for a github pages url.

Collectives™ on Stack Overflow

layout remounts when navigating to root

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related