Search code examples
typescriptnext.jsrendering

Multiple root layouts cause a full page load nextjs 14

The problem is the full page load when i'm trying to navigate between the two root layout pages

In my nextJs application (NextJS 14) i created two root layouts but when i navigate from the first layout to the second layout it cause a full page load, with this problem i cannot use the react context.

This is the link of the docs of the multiple root layouts:

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

How can i solve this problem

Solution

  • As it is pointed out in the doc you refer to:

    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.

    Last line under good to know.

    Basically, you have 2 different html (from the root <html> tag) so you can't really expect anything else.