Route Groups and Multiple Root Layouts

1// File Structure:
2// app/
3// ├── (marketing)/
4// │   ├── layout.tsx     <- Root Layout 1 (Public marketing navbar & footer)
5// │   ├── page.tsx       <- Maps to URL: /
6// │   └── pricing/
7// │       └── page.tsx   <- Maps to URL: /pricing
8// └── (dashboard)/
9//     ├── layout.tsx     <- Root Layout 2 (Authenticated sidebar & console header)
10//     └── console/
11//         └── page.tsx   <- Maps to URL: /console
12
13// app/(marketing)/layout.tsx
14export default function MarketingRootLayout({ children }: { children: React.ReactNode }) {
15  return (
16    <html lang="en">
17      <body className="marketing-theme">
18        <header className="public-nav">Brand Marketing Nav</header>
19        {children}
20        <footer>Marketing Footer</footer>
21      </body>
22    </html>
23  );
24}
25
26// app/(dashboard)/layout.tsx
27export default function DashboardRootLayout({ children }: { children: React.ReactNode }) {
28  return (
29    <html lang="en">
30      <body className="dashboard-console-theme">
31        <aside className="admin-sidebar">Console Nav</aside>
32        <div className="console-content">{children}</div>
33      </body>
34    </html>
35  );
36}