Real-world Project: Dashboard with API

app/
├── layout.tsx
├── dashboard/
│   ├── layout.tsx      → sidebar + header
│   ├── page.tsx        → stats overview (data fetch)
│   ├── loading.tsx     → skeleton
│   └── error.tsx       → error UI
└── api/
    ├── stats/
    │   └── route.ts    → GET statistics
    └── users/
        └── route.ts    → GET/POST users

export async function GET() {
  // database থেকে stats
  const stats = {
    users: 12345,
    revenue: 45678,
    orders: 890,
  };

  return Response.json(stats);
}

import { headers } from "next/headers";

export default async function DashboardPage() {
  const host = headers().get("host");
  const baseUrl = `http${host?.startsWith("localhost") ? "" : "s"}://${host}`;
  const res = await fetch(`${baseUrl}/api/stats`);
  const stats = await res.json();

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div className="rounded-xl bg-white p-6 shadow">
          <p className="text-sm text-gray-500">Total Users</p>
          <p className="mt-1 text-2xl font-bold">{stats.users}</p>
        </div>
        <div className="rounded-xl bg-white p-6 shadow">
          <p className="text-sm text-gray-500">Revenue</p>
          <p className="mt-1 text-2xl font-bold">${stats.revenue}</p>
        </div>
        <div className="rounded-xl bg-white p-6 shadow">
          <p className="text-sm text-gray-500">Orders</p>
          <p className="mt-1 text-2xl font-bold">{stats.orders}</p>
        </div>
      </div>
    </main>
  );
}

export default function Loading() {
  return (
    <main className="p-6">
      <div className="h-8 w-48 animate-pulse rounded bg-gray-200" />
      <div className="mt-6 grid grid-cols-3 gap-4">
        <div className="h-24 animate-pulse rounded-xl bg-gray-200" />
        <div className="h-24 animate-pulse rounded-xl bg-gray-200" />
        <div className="h-24 animate-pulse rounded-xl bg-gray-200" />
      </div>
    </main>
  );
}

"use client";

export default function ErrorPage({
  error,
  unstable_retry,
}: {
  error: Error & { digest?: string };
  unstable_retry: () => void;
}) {
  return (
    <div className="p-6">
      <h2 className="text-xl font-semibold text-red-600">
        ড্যাশবোর্ড লোড করা যায়নি
      </h2>
      <button
        onClick={() => unstable_retry()}
        className="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white"
      >
        আবার চেষ্টা করুন
      </button>
    </div>
  );
}