Next.js Parallel Routes Layout

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,
  notifications,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  notifications: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-12 gap-4">
      <main className="col-span-8">{children}</main>
      <aside className="col-span-4 space-y-4">
        {analytics}
        {notifications}
      </aside>
    </div>
  );
}

// app/dashboard/@analytics/page.tsx
export default async function AnalyticsSlot() {
  const data = await fetch('https://api.example.com/analytics');
  const stats = await data.json();
  return (
    <div className="rounded-xl border p-4">
      <h2>Analytics</h2>
      <p>Visitors: {stats.visitors}</p>
    </div>
  );
}

// app/dashboard/@notifications/page.tsx
export default async function NotificationsSlot() {
  const res = await fetch('https://api.example.com/notifications');
  const items = await res.json();
  return (
    <ul>
      {items.map((n: { id: string; text: string }) => (
        <li key={n.id}>{n.text}</li>
      ))}
    </ul>
  );
}

// app/dashboard/@analytics/default.tsx (fallback)
export default function Default() {
  return null;
}