Nested Routes

Each nested folder adds one segment to the URL. Each level can have its own layout.tsx.

app/
├── layout.tsx                 wraps everything
├── page.tsx                   /
└── account/
    ├── layout.tsx             wraps /account/*  (side menu)
    ├── page.tsx               /account
    ├── orders/page.tsx        /account/orders
    └── addresses/page.tsx     /account/addresses

app/account/layout.tsx

import Link from 'next/link';

export default function AccountLayout({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ display: 'flex', gap: 24 }}>
      <nav>
        <Link href="/account">Profile</Link>
        <Link href="/account/orders">My Orders</Link>
        <Link href="/account/addresses">Addresses</Link>
      </nav>
      <section>{children}</section>
    </div>
  );
}