Build an MT5 Trading Dashboard with the Next.js Starter

fxapis-nextjs-starter is a small, working Next.js app on the fxapis MetaTrader 5 API — not a toy. It connects a broker demo account, brings it online, shows its open positions, and places a market order only after an explicit confirmation step. Everything that touches your API key or your broker credentials runs on the server; the browser never sees either.

It has three routes worth reading: /connect connects an account and brings it online, /dashboard shows the account's state, its open positions and the trade form, and / sends you to whichever of the two applies.

Run it

git clone https://github.com/FXapis/fxapis-nextjs-starter.git
cd fxapis-nextjs-starter
npm install
cp .env.local.example .env.local   # add your fxapis API key
npm run dev

Open localhost:3000. With no account connected, it takes you to Connect an account: enter a broker demo account's login, server and trading password — not the investor password, which logs in but cannot trade (connecting accounts explains the difference). The key needs accounts:read, accounts:write, trading:read and trading:execute; create it in the console.

How it is built

• The API key never leaves the server. src/lib/fxapis-client.ts builds the one client from FXAPIS_API_KEY and starts with import "server-only" — importing it into a Client Component is a build error, not a runtime surprise.
• Server Actions do every write. Connecting, bringing online, placing an order and closing a position are "use server" functions called straight from a form or a button. There are no separate API routes to keep in step with the UI.
• One account, no database. src/lib/store.ts remembers the connected account's id in a gitignored file — enough to try it with no setup, and the one file to replace when it stops being a demo.
• Every order carries a fresh idempotency key, so a resubmitted form can never place the order twice.
• Response shapes are typed by hand in src/lib/types.ts, naming only the fields the app reads, because the TypeScript SDK returns the API's data untyped.

Confirm before trading

The trade form never sends an order on the first click. Submitting shows exactly what will be sent — side, volume and symbol — behind a required checkbox, and only a second, explicit Confirm and send places it. The Server Action checks the same confirmation again on the server, because a check that lives only in the browser is a convenience, not a safeguard: anything that calls the action directly would bypass it.

Why every page is dynamic

/ and /dashboard are marked export const dynamic = "force-dynamic". A trading dashboard reads live state on every request, and Next.js would otherwise happily prerender it once at build time and serve that frozen snapshot in production. /connect is a plain form with nothing live to read, so it prerenders normally. While an account is connecting, a small client component polls every few seconds — fxapis has no event webhooks yet — and that is the one file to change when they arrive.

Taking it further

• A real database: swap store.ts for your ORM and the app becomes multi-account and multi-user; every other file already takes the account id as a value.
• Auth: there is none on purpose. Put your session layer in front of /dashboard, as in any Next.js app.
• More of the API: pending orders, moving stops, multi-account orders and history are all in the SDK; the examples repository has patterns to copy.

Where to go next

• SDKs and examples and the Node.js guide in the docs.
• Trading for every outcome an order can have, before you add more order types.