API Integration

One of the most powerful features of NextAdmin is its pre-configured API Service Layer. We've designed it to make the transition from a demo dashboard to a production-ready application as smooth as possible.

The Mock Data Workflow

In the initial version of NextAdmin, many components use mock data returned from asynchronous server-side functions. This allows you to see the dashboard in action immediately.

A typical service function looks like this:

import { getDevicesUsedData } from "@/services/charts.services";
 
// Invoking the service in a Server Component
const data = await getDevicesUsedData(timeFrame);

Simulating Real Requests

We use a "Fake Delay" to simulate network latency, which allows you to test loading states and skeletons.

export async function getDevicesUsedData(timeFrame) {
  // Simulating network delay
  await new Promise((resolve) => setTimeout(resolve, 1000));
 
  // Mock data payload
  const data = [
    { name: "Desktop", percentage: 0.65, amount: 1625 },
    { name: "Tablet", percentage: 0.1, amount: 250 },
  ];
 
  return data;
}

Transitioning to Real Data

When you're ready to connect to your actual backend or database, you only need to modify these service functions in the src/services directory.

1. Database Calls (Prisma)

Since NextAdmin leverages React Server Components (RSC), you can make direct database calls within your service functions safely.

import { db } from "@/lib/prisma"; // Assuming you have a prisma client setup
 
export async function getDevicesUsedData() {
  // Real database call
  const data = await db.deviceStats.findMany({
    orderBy: { createdAt: "desc" },
  });
 
  return data;
}

2. External API Calls

If your data lives in an external service, simply use the native fetch API.

export async function getDevicesUsedData() {
  const response = await fetch("https://api.yourbackend.com/devices", {
    headers: { Authorization: `Bearer ${process.env.API_KEY}` },
  });
 
  return response.json();
}

Seamless Loading States

Most components in NextAdmin that use the API integration pattern are already wrapped in Suspense boundaries with dedicated Loading Skeletons.

import { Suspense } from "react";
import { TopChannels } from "./_components/top-channels";
import { TopChannelsSkeleton } from "./_components/top-channels/skeleton";
 
<Suspense fallback={<TopChannelsSkeleton />}>
  <TopChannels />
</Suspense>;

This pattern ensures that while your database or API is fetching data, your users see a smooth, shimmered placeholder instead of a blank screen or a layout shift.

TIP: Keep your service functions in the src/services folder. This keeps your UI components clean and makes it easy to swap data sources in the future.

Admin Access Accordion