Nexus AI

Connecting a Database / Real Backend

Nexus AI Admin is a frontend template. This page shows how to replace the mock data with a real backend. The key idea: keep the shapes in src/lib/types.ts and only change where the data comes from.

The pattern

Right now a page imports a static array:

// src/lib/mock-data/users.ts
export const mockUsers: User[] = [ /* … */ ];

To go live, replace that import with a real fetch. In a Server Component you can await directly:

// src/app/(dashboard)/users/page.tsx
import { getUsers } from "@/lib/data/users";

export default async function UsersPage() {
  const users = await getUsers();        // real DB query
  return <UsersView users={users} />;    // pass as a prop
}

Because getUsers() returns User[] (the same type the mock used), the table and every component keep working unchanged.

Option A — Supabase

Supabase is the fastest path (Postgres + auth + storage).

npm install @supabase/supabase-js

// src/lib/supabase.ts
import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
);

// src/lib/data/users.ts
export async function getUsers(): Promise<User[]> {
  const { data } = await supabase.from("users").select("*");
  return data ?? [];
}

Set the keys in .env.local (see .env.example).

Option B — Your own API

Swap the mock import for a fetch:

export async function getUsers(): Promise<User[]> {
  const res = await fetch(`${process.env.API_URL}/users`, {
    headers: { Authorization: `Bearer ${process.env.API_TOKEN}` },
    next: { revalidate: 60 }, // ISR caching, optional
  });
  return res.json();
}

Authentication

The auth pages (/sign-in, /sign-up, etc.) are UI only. Wire their onSubmit handlers to a real provider:

  • NextAuth.js — signIn("credentials", { email, password })
  • Clerk — drop-in components + middleware
  • Supabase Auth — supabase.auth.signInWithPassword(...)

Then protect the (dashboard) routes with middleware (src/middleware.ts) that redirects unauthenticated users to /sign-in.

Billing

The billing pages render plans and invoices from mock data. To make them real:

  1. Create products/prices in Stripe.
  2. Replace subscriptionPlans / mockInvoices with Stripe API calls.
  3. Send the "Upgrade" button to Stripe Checkout and handle the webhook to update the customer's plan.

AI calls (Playground & Agents)

The playground simulates streaming. To make it real, call your model provider from a server route (never expose API keys to the client):

// src/app/api/chat/route.ts
export async function POST(req: Request) {
  const { prompt, model } = await req.json();
  // call OpenAI / Anthropic with process.env.OPENAI_API_KEY, stream back
}

Then have playground-view.tsx POST to /api/chat instead of running the canned demo response.

Environment variables

Copy .env.example to .env.local and fill in the services you use. Never commit .env.local (it's already git-ignored).

Next: Deployment →