Careeroza

Real World Example

One App, Three Experiences

A food delivery company like Zomato runs the customer site, a restaurant-partner dashboard and marketing pages. In Next.js these can live in one app with route groups, each with its own layout:

app/
├── layout.tsx                       fonts, analytics, <html>
├── (marketing)/layout.tsx           big hero header
│   ├── page.tsx                     /
│   └── careers/page.tsx             /careers
├── (customer)/layout.tsx            navbar with cart
│   ├── restaurants/[id]/page.tsx    /restaurants/12
│   └── orders/page.tsx              /orders
└── (partner)/partner/layout.tsx     sidebar dashboard
    ├── page.tsx                     /partner
    └── menu/page.tsx                /partner/menu

Composing Layouts

Example

Which layouts wrap a page? Walk the folders from app to the page and collect every layout.tsx, skipping group names in the URL:

const layoutFiles = new Set([
  'app',
  'app/(marketing)',
  'app/(customer)',
  'app/(partner)/partner',
]);

function describe(pageDir: string): void {
  const parts = pageDir.split('/');
  const layouts: string[] = [];
  for (let i = 1; i <= parts.length; i++) {
    const dir = parts.slice(0, i).join('/');
    if (layoutFiles.has(dir)) layouts.push(dir + '/layout.tsx');
  }
  const url = '/' + parts.slice(1).filter((p) => !p.startsWith('(')).join('/');
  console.log(url.padEnd(18) + layouts.join(' > '));
}

describe('app/(marketing)');
describe('app/(customer)/restaurants/[id]');
describe('app/(partner)/partner/menu');

Output

/                 app/layout.tsx > app/(marketing)/layout.tsx
/restaurants/[id] app/layout.tsx > app/(customer)/layout.tsx
/partner/menu     app/layout.tsx > app/(partner)/partner/layout.tsx