Can I have a nested root layout with app router in the same dir?
#Nested root layout
vital night
vague duneBOT
Hi @vital night. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can have nested root layouts with the App Router in the same directory in Next.js. This can be achieved using the concept of route groups (https://nextjs.org/docs/app/building-your-application/routing/route-groups). A route group can be created by wrapping a folder's name in parenthesis: (folderName). This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.
However, it's important to note that 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.
Here is an example of a root layout:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Remember, the app directory must include a root layout and the root layout must define <html> and <body> tags. You should not manually add <head> tags such as <title> and <meta> to root layouts. Instead, you should use the Metadata API (https://nextjs.org/docs/app/api-reference/functions/generate-metadata) which automatically handles advanced requirements such as streaming and de-duplicating <head> elements.
Sources:
- Next.js Documentation - Layouts (https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)
- Next.js Documentation - Route Groups (https://nextjs.org/docs/app/building-your-application/routing/route-groups)
- Next.js Documentation - File Conventions (https://nextjs.org/docs/app/api-reference/file-conventions/layout)