Construye un panel de trading de MT5 con el starter de Next.js

fxapis-nextjs-starter es una app de Next.js pequeña y funcional sobre la API de MetaTrader 5 de fxapis, no un juguete. Conecta una cuenta demo de un broker, la pone en línea, muestra sus posiciones abiertas y coloca una orden de mercado solo después de un paso de confirmación explícito. Todo lo que toca tu API key o tus credenciales del broker corre en el servidor; el navegador nunca ve ninguna de las dos.

Tiene tres rutas que vale la pena leer: /connect conecta una cuenta y la pone en línea, /dashboard muestra el estado de la cuenta, sus posiciones abiertas y el formulario de trading, y / te envía a la que corresponda de las dos.

Córrelo

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

Abre localhost:3000. Sin ninguna cuenta conectada, te lleva a Connect an account: escribe el login, el servidor y la contraseña de trading de una cuenta demo de un broker, no la contraseña de inversor, que inicia sesión pero no puede operar (conectar cuentas explica la diferencia). La clave necesita accounts:read, accounts:write, trading:read y trading:execute; créala en la consola.

Cómo está construido

• La API key nunca sale del servidor. src/lib/fxapis-client.ts crea el único cliente a partir de FXAPIS_API_KEY y empieza con import "server-only": importarlo en un Client Component es un error de compilación, no una sorpresa en tiempo de ejecución.
• Las Server Actions hacen cada escritura. Conectar, poner en línea, colocar una orden y cerrar una posición son funciones "use server" llamadas directamente desde un formulario o un botón. No hay rutas de API aparte que mantener sincronizadas con la interfaz.
• Una cuenta, sin base de datos. src/lib/store.ts recuerda el id de la cuenta conectada en un archivo ignorado por git: suficiente para probarla sin configurar nada, y el único archivo que hay que reemplazar cuando deja de ser una demo.
• Cada orden lleva una clave de idempotencia nueva, así que un formulario reenviado nunca puede colocar la orden dos veces.
• Las formas de las respuestas están tipadas a mano en src/lib/types.ts, nombrando solo los campos que lee la app, porque el SDK de TypeScript devuelve los datos de la API sin tipos.

Confirmar antes de operar

El formulario de trading nunca envía una orden con el primer clic. Al enviarlo muestra exactamente lo que se enviará (dirección, volumen y símbolo) detrás de una casilla obligatoria, y solo un segundo clic explícito en Confirm and send la coloca. La Server Action vuelve a revisar la misma confirmación en el servidor, porque una revisión que vive solo en el navegador es una comodidad, no una protección: cualquier cosa que llame a la acción directamente se la saltaría.

Por qué cada página es dinámica

/ y /dashboard están marcadas con export const dynamic = "force-dynamic". Un panel de trading lee un estado en vivo en cada solicitud, y de lo contrario Next.js lo prerenderizaría tranquilamente una vez al compilar y serviría en producción esa foto congelada. /connect es un formulario simple sin nada en vivo que leer, así que se prerenderiza normalmente. Mientras una cuenta se conecta, un pequeño componente de cliente consulta cada pocos segundos; es el único archivo que cambiar si prefieres recibir los webhooks de fxapis (en inglés).

Ir más allá

• Una base de datos real: cambia store.ts por tu ORM y la app pasa a ser multicuenta y multiusuario; todos los demás archivos ya reciben el id de la cuenta como un valor.
• Autenticación: no tiene, a propósito. Pon tu capa de sesiones delante de /dashboard, como en cualquier app de Next.js.
• Más de la API: las órdenes pendientes, mover stops, las órdenes multicuenta y el historial están todos en el SDK; el repositorio de ejemplos tiene patrones para copiar.

Adónde ir después

• SDKs y ejemplos y la guía de Node.js en la documentación (la guía, en inglés).
• Trading para cada resultado que puede tener una orden, antes de agregar más tipos de orden.