#Multiple Root Layout for default path

1 messages · Page 1 of 1 (latest)

upbeat spearBOT
#

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

#

To create multiple root layouts in Next.js, you need to remove the top-level layout.js file and add a layout.js file inside each route group. This is useful for partitioning an application into sections that have a completely different UI or experience. The <html> and <body> tags need to be added to each root layout. For example, both (marketing) and (shop) can have their own root layout[^1^].

However, if you use multiple root layouts without a top-level layout.js file, your home page.js file should be defined in one of the route groups. For example: app/(marketing)/page.js[^1^].

If you want to create a default layout for the root path /, you can create a layout.js file in the root of your app directory. This layout will be applied to all routes unless a route group has its own layout.js file[^3^].

Remember, 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[^1^][^3^].

^1^]: [Source (https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
^3^]: [Source (https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts)

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