#Multiple Root Layout for default path
1 messages · Page 1 of 1 (latest)
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^].