My page reloads when switching from (layoutA) to (layoutB)

[analog snow]

Hi @tender jolt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, it seems you are encountering an issue that is consistent with the expected behavior of Next.js when navigating between pages that use different root layouts. According to the documentation and user experiences shared in GitHub issues, navigating across multiple root layouts in a Next.js application will cause a full page load as opposed to a client-side navigation. This behavior is designed to occur when you navigate from a page that uses one root layout to another page that uses a different root layout.

For example, as mentioned in one of the GitHub issue extracts:

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.

This behavior is documented and is part of how Next.js handles navigation between pages with different root layouts to ensure that the correct layout is loaded for the requested page.

If your application's structure requires frequent navigation between pages with different root layouts and you wish to avoid full page reloads, you might need to reconsider the architecture of your layouts. One approach could be to use a single shared layout for the entire application, if feasible, and manage differences within that shared layout conditionally based on the current route. However, this approach depends heavily on the specific needs and structure of your application.

For applications that only have one layout, wrapping the application with the layout in a custom _app.js file is recommended, as it re-uses the <Layout /> component when changing pages, preserving its component state. Here's an example from the Next.js documentation:

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

This approach, however, is only applicable if your application can be structured to use a single shared layout effectively.

For more detailed guidance and potential workarounds specific to your use case, reviewing the Next.js documentation on Custom App (https://nextjs.org/docs/pages/building-your-application/routing/custom-app) and Layouts (https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts) might provide further insights.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@tender jolt kapa.ai is still learning and improving, please let us know how it did by reacting below