NNexusDocumentation
Live demo
GuideConnect Your App

Replace Mock Data with an API

Move a demo page from local arrays to typed server data, mutations, refresh, and error handling.

14 min readConnect Your AppUpdated for Nexus 0.1
On this page 6

What you will learn

  • Locate mock data.
  • Create a typed data boundary.
  • Handle requests without losing UX states.

Prerequisites

  • A working API or chosen backend
  • An authentication strategy
  • A defined data contract

Locate the demo boundary

Most showcase data is declared near the component that renders it. Search for arrays, initial useState values, and sample totals. Replace one feature at a time instead of converting the entire template at once.

bash
rg -n "useState|const .*Items|const .*Data" app components

Define a domain type

Use a type owned by your feature instead of allowing untyped API payloads to spread through the UI.

tsx
export type Order = {
  id: string;
  customerName: string;
  total: number;
  status: "draft" | "paid" | "cancelled";
};

Fetch on the server when possible

Server Components are a good default for initial page data because credentials and private service calls stay on the server.

tsx
async function getOrders(): Promise<Order[]> {
  const response = await fetch(process.env.API_URL + "/orders", {
    cache: "no-store"
  });

  if (!response.ok) throw new Error("Unable to load orders");
  return response.json();
}

export default async function OrdersPage() {
  const orders = await getOrders();
  return <OrdersTable orders={orders} />;
}

Handle mutations

Create and update actions need pending, validation, success, and failure states. Disable duplicate submission while a request is pending and refresh or reconcile data after success.

  • Validate at client and server.
  • Include the authenticated user context.
  • Handle non-2xx responses explicitly.
  • Show an actionable error message.
  • Revalidate or update the displayed record after success.

Keep the page resilient

Do not replace the populated demo with a single spinner. Preserve dedicated loading, empty, partial, error, and retry experiences.

Continue learning