marketstutorialngx

Integrating live NGX stock prices into a Next.js dashboard

Build a live Nigerian stock market dashboard in Next.js using the MansaAPI markets endpoints — server components, caching, and a movers widget.

2026-05-29·10 min read

This tutorial builds a live Nigerian stock market dashboard in Next.js (App Router) using the MansaAPI markets endpoints. We'll fetch in a server component, cache sensibly, and render a movers widget — all type-safe with the official SDK.

Setup

terminal

npx create-next-app@latest ngx-dashboard
cd ngx-dashboard
npm install mansaapi

.env.local

MANSA_API_KEY=mansa_live_sk_...

Step 1: A shared client

lib/mansa.ts

import { MansaAPI } from "mansaapi";

export const mansa = new MansaAPI({ apiKey: process.env.MANSA_API_KEY! });

Step 2: Fetch movers in a server component

Market data refreshes every 30 minutes, so cache for 30 minutes with Next's revalidate. Since the SDK uses fetch under the hood, we wrap the call in a cached function.

app/page.tsx

import { mansa } from "@/lib/mansa";

export const revalidate = 1800; // 30 minutes

export default async function Dashboard() {
  const movers = await mansa.markets.getPanAfricanMovers({ limit: 10 });

  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold">African Market Movers</h1>
      <MoversTable movers={movers.data} />
    </main>
  );
}

Step 3: The movers widget

components/MoversTable.tsx

import type { Mover } from "mansaapi";

export function MoversTable({ movers }: { movers: Mover[] }) {
  return (
    <table className="mt-4 w-full text-sm">
      <thead>
        <tr className="text-left text-gray-500">
          <th>Ticker</th><th>Exchange</th><th>Price</th><th>Change</th>
        </tr>
      </thead>
      <tbody>
        {movers.map((m) => (
          <tr key={`${m.exchange}-${m.ticker}`}>
            <td className="font-mono">{m.ticker}</td>
            <td>{m.exchange}</td>
            <td>{m.price?.toLocaleString()}</td>
            <td className={m.change_pct! >= 0 ? "text-green-600" : "text-red-600"}>
              {m.change_pct?.toFixed(2)}%
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Add a single-exchange view

app/ngx/page.tsx

import { mansa } from "@/lib/mansa";

export const revalidate = 1800;

export default async function NgxPage() {
  const stocks = await mansa.markets.getStocks("NGX", {
    sort_by: "change_pct",
    order: "desc",
    limit: 20,
  });
  // render stocks.data ...
}

Because every exchange returns the same schema, this dashboard works for GSE, NSE, JSE, or BRVM by changing one string. Swap "NGX" for "GSE" and the same components render Ghanaian data.

Step 4: Indices widget

app/page.tsx (extended)

const indices = await mansa.markets.getIndices("NGX");
// The All-Share Index is indices.data.find(i => i.code === "ASI")

Deploying

Deploy to Vercel as usual. Set MANSA_API_KEY in the project's environment variables. The 30-minute revalidate keeps you well within the free tier's 100 requests/day even with steady traffic, because pages are cached and shared across visitors.

Get a free key to start. For production dashboards with higher traffic or premium data (dividends, insider trades), see the pricing page.

Try it now

Free API key — 100 requests/day, no credit card.

Read docs