Nested Routes & Parallel Ideas

Folder nesting = URL nesting

Each folder is one URL segment. Nest folders to nest routes. Only folders that contain page.tsx (or route.js) become navigable URLs.

Shared UI for a branch of the tree goes in that branch's layout.tsx — you already saw this with /dashboard.

Real-life example: Folders are address lines — Country / City / Street. Nested routes are the same idea for URLs.

app/
  courses/
    page.tsx                 # /courses
    layout.tsx               # shared courses chrome
    nextjs/
      page.tsx               # /courses/nextjs
      routing/
        page.tsx             # /courses/nextjs/routing

Route groups — folders that skip the URL

Wrap a folder name in parentheses: (marketing), (app), (auth). The name organizes files and can hold a layout, but it does not appear in the URL.

Use route groups when marketing pages and app pages need different layouts but both want clean URLs like /pricing and /dashboard.

Real-life example: A route group is a labeled drawer in a filing cabinet. The label helps you organize; the customer never sees the drawer name on the invoice.

app/
  (marketing)/
    layout.tsx       # big landing header
    page.tsx         # /   (not /(marketing))
    pricing/
      page.tsx       # /pricing
  (app)/
    layout.tsx       # logged-in shell
    dashboard/
      page.tsx       # /dashboard

// app/(marketing)/layout.tsx
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="marketing">
      <header>Rishtaara — Learn in public</header>
      {children}
    </div>
  );
}

// app/(app)/layout.tsx
export default function AppShellLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="app-shell">
      <aside>App nav</aside>
      {children}
    </div>
  );
}

Shared UI between pages

Three common patterns: (1) layout.tsx for chrome that stays across navigations, (2) shared components imported into several pages, (3) route-group layout for a family of pages that need the same shell.

Prefer layout for nav/sidebar. Prefer components for cards, buttons, and forms you reuse everywhere.

Real-life example: Layout is the store building. Shared components are reusable shelves and price tags you place in any aisle.

• layout.tsx — persistent shell for a segment
• components/ — reusable UI pieces
• (group)/layout.tsx — shell without changing the URL