Cómo crear un dashboard fintech en Next.js, paso a paso

Esta guía muestra cómo crear un dashboard fintech o de finanzas personales en Next.js, en inglés y en árabe, a partir de la plantilla Financial Dashboard de Aniq UI. Vas a ejecutarla, ponerle tu marca, cambiar los datos de muestra por los tuyos y publicarla en internet, con una idea clara de qué partes conectas tú mismo.

Ese último punto importa, así que va por delante: la plantilla es un front end. No tiene base de datos, ni back end, ni un inicio de sesión real. Cada saldo, tarjeta y transacción que ves en pantalla son datos de muestra escritos en el código. Lo que recibes es una interfaz terminada y funcional, lista para tu API. Los pasos de abajo indican dónde se conecta esa API y qué revisar en cada etapa.

Antes de empezar: decisiones que tomar

Una interfaz financiera es fácil de empezar y difícil de terminar si las preguntas grandes quedan abiertas. Respóndelas primero, en papel.

• ¿De dónde salen los datos? La plantilla no incluye ninguno. Necesitas una API propia, o un servicio que ya uses, que devuelva saldos, tarjetas y transacciones. Decide quién la construye y cuándo, porque las pantallas dependerán de ella.
• ¿Cómo inician sesión las personas? El inicio de sesión que viene incluido es un sustituto que funciona dentro del navegador. Elige el método real (tus propias cuentas, un proveedor de identidad u otra opción) y quién gestiona la sesión en el servidor.
• ¿Qué acciones deben funcionar de verdad desde el primer día? Buscar y exportar transacciones ya funciona en el navegador. Añadir una transacción, añadir una tarjeta y enviar una transferencia todavía no guardan nada. Haz una lista de las que conservarás y de las que ocultarás.
• ¿Qué idiomas y qué dirección de lectura? Vienen el inglés y el árabe, y las páginas en árabe se muestran de derecha a izquierda. Un tercer idioma es posible, pero requiere algunos cambios, así que decídelo pronto.
• ¿Qué reglas aplican a los datos de dinero? Manejar saldos y datos de tarjetas puede traer requisitos legales, de seguridad y de socios financieros que dependen de dónde operes. La plantilla no decide eso por ti. Habla con tu socio de pagos o banca y, si corresponde, con tu regulador, antes de que datos reales lleguen a las pantallas.
• ¿Dónde se alojará? Vercel, un servidor Node.js o un host con Docker funcionan igual de bien. Elige uno antes de comprar un dominio.

El encargo

Kestrel Budget es una app de presupuestos para freelancers cuyos ingresos llegan a golpes. Sus clientes leen en inglés o en árabe. El equipo pide lo siguiente:

• Una pantalla que muestre el saldo, las tarjetas de pago y las últimas transacciones en cuanto alguien inicia sesión.
• Una página de transacciones donde el freelancer pueda buscar, filtrar por fecha y exportar un archivo para su contador.
• Gráficos que comparen ingresos y gastos y desglosen el gasto por categorías, porque los meses de un freelancer varían mucho.
• Una página de tarjetas donde el cliente pueda bloquear una tarjeta y ver sus datos.
• Inglés y árabe, con la versión árabe maquetada de derecha a izquierda.
• El nombre, el logo y el color de marca de la empresa, en modo claro y oscuro.
• Un inicio de sesión real y datos reales de la API de Kestrel antes de que cualquier cliente lo vea.

Cómo cubre la plantilla el encargo

Necesidad	Dónde está	Qué usas
Saldo, tarjetas, últimos movimientos	Sitio web (la app Next.js)	Página Overview (resumen) en /en/dashboard
Buscar, filtrar, exportar	Sitio web	Página Transactions con rango de fechas, diálogo de filtros y exportación a CSV
Ingresos frente a gastos, categorías	Sitio web	Página Analytics con gráficos de Recharts que se pueden descargar como PNG
Controles de tarjeta	Sitio web; guardar requiere tu API	Página Your Cards con bloquear, eliminar y mostrar número
Inglés y árabe	Sitio web	Direcciones /en y /ar, archivos en messages/
Marca y temas	Sitio web	Archivos de mensajes, logo.svg, DEFAULT_THEME_COLOR
Datos reales e inicio de sesión real	Tu propia API (no incluida)	Archivos de datos de muestra junto a cada widget; el código de inicio de sesión que reemplazas

Plantilla, desde cero o un constructor alojado

Hay tres caminos para llegar a un dashboard financiero, y el adecuado depende de tu equipo.

Desde cero. Controlas cada detalle, pero también tienes que diseñar y construir el diseño de las páginas, los gráficos, las tablas, las tarjetas que se arrastran, los temas claro y oscuro y la versión de derecha a izquierda antes de llegar a lo que es propio de tu producto. Es una opción razonable si la interfaz misma es tu ventaja competitiva.

Un dashboard alojado o un constructor de BI. Estas herramientas se conectan a fuentes de datos y dibujan gráficos rápido, y no tienes que gestionar el alojamiento. A cambio, el resultado se parece a la herramienta y no a tu producto, los clientes suelen notar sus límites de marca y de diseño, y es posible que una experiencia en árabe de derecha a izquierda no esté soportada. Revisa sus precios, sus opciones para incrustar y cómo exporta antes de apoyarte en ella.

Una plantilla con código fuente. Recibes la interfaz terminada, eres dueño del código y lo alojas donde quieras. El coste es el trabajo que viste en las decisiones de arriba: tú aportas la API, el inicio de sesión y el trabajo de cumplimiento normativo. Para un equipo con back end o con presupuesto para construirlo, ese reparto es eficiente, porque lo que queda es justo lo que solo tú puedes hacer.

Kestrel tiene un solo desarrollador y un plan para una API pequeña, así que elige la plantilla. Un equipo sin desarrolladores debería mirar una opción alojada.

Un plan de lanzamiento de ejemplo, por semanas

Este calendario es un ejemplo para Kestrel, no una promesa de cuánto tardará tu proyecto.

• Semana 1, ejecutar y revisar. Arranca la plantilla, recorre todas las páginas en los dos idiomas y los dos temas, y cierra las decisiones de arriba.
• Semana 2, marca y recorte. Cambia el nombre, el logo y el color, traduce el texto nuevo y oculta las páginas y los botones que no vas a construir.
• Semana 3, conecta los primeros datos. Reemplaza el usuario con sesión iniciada y las transacciones por llamadas reales a la API. Deja el resto con datos de muestra por ahora.
• Semana 4, conecta el resto e inicia sesión de verdad. Tarjetas, cifras de analítica y el inicio de sesión real, con la sesión comprobada en el servidor.
• Semana 5, pruebas y lanzamiento. Compilación de producción, pruebas en móvil y escritorio, lista de verificación de lanzamiento y despliegue.

Paso a paso

1. Decide qué conectas tú mismo

Antes de abrir el código, anota las tres cosas que la plantilla deja en tus manos: quién ha iniciado sesión, de dónde salen los números y qué pasa cuando un cliente pulsa un botón que cambia algo. En el caso de Kestrel, eso es un servicio de inicio de sesión, una API que devuelva saldos, tarjetas y transacciones, y endpoints para las acciones (añadir una transacción, guardar ajustes).

La plantilla te da las pantallas, los gráficos, los formularios y sus validaciones. Tú le das los datos. Este reparto es útil, porque puedes construir la API a tu ritmo mientras la interfaz ya se ve terminada.

Comprobación: tienes una lista corta por escrito, titulada "lo que conecto yo", con un responsable y un orden aproximado. Lo que suele salir mal: los equipos suponen que la pantalla de inicio de sesión es un login que funciona y descubren el hueco tarde.

2. Ejecútala en tu ordenador

Instala Docker Desktop y sigue estos subpasos.

2a. Descarga. En tu cuenta de Aniq UI, abre Mis plantillas y descarga el ZIP.

Fíjate en dónde está el botón de descarga en la página Mis plantillas.

2b. Descomprime y abre la carpeta. Descomprime el archivo y abre una terminal en la carpeta dashboard-template-1.

Fíjate en la ruta de la terminal: todos los comandos siguientes se ejecutan desde esta carpeta.

2c. Construye la imagen y arranca un contenedor.

docker build -t financial-dashboard .
docker run -p 3030:3030 financial-dashboard

Cuenta con que la primera compilación tarde unos minutos y necesite acceso a internet, porque las dependencias y la compilación de la app ocurren dentro de la imagen.

Fíjate en el registro de la compilación, que termina cuando la imagen está lista para ejecutarse.

2d. Ábrela. Ve a localhost:3030/en/login e inicia sesión con admin@dashboard.com y la contraseña Admin@123. Si el puerto 3030 está ocupado, cambia el primer número de la opción -p y deja el segundo como está, por ejemplo docker run -p 3041:3030 financial-dashboard.

¿Prefieres Node.js? Instala la versión 20.9 o superior, ejecuta corepack enable una sola vez, y después yarn install y yarn dev. El proyecto fija Yarn 4, así que usa Yarn y no npm.

Qué comprobar: la página de resumen abre con un saldo, una pila de tarjetas y una lista de transacciones. Lo que suele salir mal: Docker no está en marcha (abre Docker Desktop y espera a que arranque el motor), un puerto ya está ocupado, o Yarn responde con la versión 1.22 porque Corepack no está activado. Para detener el contenedor, pulsa Ctrl+C, o usa docker stop con el ID que te da docker ps. Los cambios no llegan a una imagen ya construida, así que reconstrúyela después de modificar un archivo.

Fíjate en cómo está organizada la página, como un bento de widgets: tarjetas, transacciones, estadísticas, un mapa y un gráfico de cartera.

3. Recorre todas las páginas

La plantilla incluye estas páginas, cada una bajo /en y /ar:

• Overview (resumen): la pantalla de entrada tras iniciar sesión, con un formulario de transferencia rápida, el saldo sobre una pila de tarjetas de pago, una lista de seguimiento de acciones, las transacciones más recientes, un gráfico de estadísticas, un mapa de transferencias y un gráfico de cartera.
• Analytics (analítica): cuatro cifras principales, y después gráficos de ingresos frente a costes, gasto por categoría y actividad a lo largo de la semana, con una tabla de transacciones recientes debajo.
• Transactions (transacciones): el historial completo, con búsqueda, filtros, orden, paginación y un botón de exportar.
• Your Cards (tus tarjetas): la lista de tarjetas con los detalles de la tarjeta seleccionada.
• Settings (ajustes): perfil, seguridad, notificaciones y preferencias.
• UI Components (componentes de interfaz): todas las piezas reutilizables, con ejemplos en vivo.

Fíjate en la barra lateral, que es el mapa de todo lo que vas a personalizar, traducir y conectar.

Decide qué páginas conservas. Kestrel las conserva todas, pero una herramienta de presupuestos sin producto de tarjetas podría quitar la página de tarjetas y su enlace en la barra lateral.

Fíjate en la fila superior de cifras y en el panel de detalles de la tarjeta seleccionada.

Fíjate en las pestañas de la página de componentes: las pantallas nuevas que construyas después pueden reutilizar cualquiera de estas piezas. Añade ?tab= y el id de una pestaña, como tables, para abrir una pestaña directamente.

4. Hazla de Kestrel

Ejecuta yarn dev mientras editas y la página se recarga con cada cambio guardado. Estos son los lugares que hay que cambiar:

• El nombre, el título de la pestaña y la descripción: el bloque Metadata en messages/common/en.json y ar.json.
• El nombre en las páginas de inicio de sesión y de bienvenida: Login.title y Hero.title en messages/auth/.
• El logo: public/assets/images/icons/logo.svg. La barra lateral y la esquina de cada tarjeta de pago lo usan.
• El color de marca: DEFAULT_THEME_COLOR en src/Demo/ThemeColorSwitcher/themes.ts. Vienen cuatro temas: naranja (el predeterminado), azul, dorado y plateado.
• El favicon: src/app/favicon.ico. El crédito del pie de página: src/app/[locale]/dashboard/layout.tsx.

El logo de muestra es gris claro, así que la barra lateral lo oscurece en modo claro para que se vea. Si tu logo ya es oscuro, quita brightness-50 de las clases en src/layouts/Sidebar/components/SidebarLogo.tsx. Kestrel elige el tema azul y ajusta DEFAULT_THEME_COLOR para que coincida; para un color totalmente propio, cambia los valores de un tema en ese mismo archivo y deja su id en la constante.

El color de acento cambia a la vez el diseño de las tarjetas, los resaltados de los gráficos, los botones y el elemento activo del menú. Estas tres capturas muestran el mismo resumen en azul, dorado y grafito.

Fíjate en el acento azul en la tarjeta, en los resaltados de los gráficos y en el elemento activo de la barra lateral.

Fíjate en cómo los mismos elementos toman el dorado, mientras los fondos neutros se quedan igual.

Fíjate en el acento grafito, más sobrio, que encaja con una marca más conservadora.

Los modos claro y oscuro están terminados. El dashboard arranca en modo oscuro, el botón de sol y luna cambia de modo y el navegador recuerda la elección de cada persona. Esa misma opción, junto con el idioma, está en Settings, Preferences.

Fíjate en las pestañas de la parte superior de los ajustes: perfil, seguridad, notificaciones y preferencias.

Fíjate en la versión clara del resumen, que usa los mismos componentes que la oscura. Los fondos, los bordes y los colores de texto están en src/styles/theme.css: los valores claros en :root y los oscuros en .dark.

Qué comprobar: abre el dashboard en los dos modos después de cambiar el color de marca. Lo que suele salir mal: un color nuevo que no se ve. Con el modo demo activado, un selector de color flotante guarda su elección en el navegador y esa elección gana sobre el código. Borra los datos del sitio, o mantén el modo demo desactivado.

5. Reemplaza los datos de muestra, un widget a la vez

Cada widget tiene su propio archivo de datos de muestra, guardado junto a la pantalla que lo muestra. Es a propósito: puedes pasar la tabla de transacciones a tu API esta semana y dejar el mapamundi para más adelante. Un orden viable para Kestrel es el usuario con sesión iniciada, después las transacciones, después las tarjetas y por último las cifras de analítica.

Ten claro qué ya funciona sin servidor, para no reconstruirlo. Buscar, ordenar y paginar las transacciones, el rango de fechas y el diálogo de filtros funcionan en el navegador. También las exportaciones a CSV y PNG, reordenar arrastrando las tarjetas de cifras principales (el navegador recuerda el orden) y bloquear o eliminar una tarjeta hasta la siguiente recarga.

Ten claro qué todavía no guarda nada. Add Transaction, Add Card, la transferencia rápida, la transferencia veloz y Save Changes en ajustes validan lo que escribe el cliente y se detienen ahí. Son los lugares exactos donde van tus llamadas a la API. Los formularios usan React Hook Form con Zod, así que las validaciones de los campos ya están escritas.

Dos detalles ahorran tiempo. Las transacciones de muestra tienen fechas relativas a hoy, así que la más reciente siempre es actual, y la página de transacciones abre con una ventana de 30 días. Cuando conectes datos reales, comprueba que tus fechas caen dentro del rango con el que abre la página, o la tabla se verá vacía.

Fíjate en los botones de rango del gráfico de ingresos (diario, semanal, mensual, anual): tu API tendrá que responder a cada rango, o puedes quitar los que no admitas.

Fíjate en los gráficos en modo claro: siguen el color de marca y el tema, y sus etiquetas están traducidas.

Para Kestrel, el orden de conexión es este, y puedes copiar el patrón para tu propio producto:

1. El usuario. Una llamada que devuelva el nombre y la foto de la persona con sesión iniciada, para que el menú del encabezado deje de mostrar el marcador de posición.
2. Transacciones. Una lectura para la tabla que respete el rango de fechas, más las cifras clave de arriba.
3. Tarjetas. Una lectura para la lista y los detalles de la tarjeta seleccionada, y después escrituras para bloquear y eliminar.
4. Analytics. La serie de ingresos y gastos para cada rango, el desglose por categorías y la actividad semanal.
5. Settings. Guardar el perfil y las preferencias, para que Save Changes por fin haga algo.

Una forma sensata de planificar la API es una lectura por widget, más una escritura por cada acción que conserves. Empieza por las lecturas, porque desbloquean las pantallas, y añade las escrituras en el orden en que los clientes las necesiten. Los datos de muestra son una descripción ya hecha de la forma que espera cada pantalla.

Qué comprobar: después de cambiar un widget, recarga en los dos idiomas y con un resultado vacío, para ver el estado vacío. Lo que suele salir mal: una API que devuelve los importes como texto, lo que rompe el orden. Devuelve números y dales formato en la página.

6. Reemplaza el inicio de sesión de marcador de posición

La cuenta que usaste en el paso 2 se comprueba dentro del navegador, y sus datos están en el código que descarga cada visitante. Todas las páginas bajo /dashboard envían a /login a quien no ha iniciado sesión, pero esa comprobación también se ejecuta en el navegador. En un producto financiero eso es un sustituto, no una protección.

Antes de que lleguen clientes reales o datos de dinero reales al sitio, conecta el inicio de sesión a una API tuya y verifica la sesión en el servidor. Redux Toolkit guarda el usuario con sesión iniciada en la app, y el menú del encabezado muestra el usuario que devuelve tu API (hoy muestra la cuenta de marcador de posición, John Carter, de src/config/demo-account.ts). La documentación de la plantilla incluye el código que hay que cambiar y un ejemplo resuelto para esto. Guarda los secretos en tu servidor: un valor NEXT_PUBLIC_ lo puede leer cualquier visitante.

Los botones de Apple y Google, Remember me y Forgot password todavía no hacen nada, así que decide si tu método de inicio de sesión los necesita. Quita los que no.

Qué comprobar: abre una ventana privada y visita directamente una dirección del dashboard. Deberías acabar en la página de inicio de sesión. Lo que suele salir mal: la redirección del navegador se cumple, así que la página parece protegida mientras los datos de detrás no lo están. Protege siempre la API.

7. Revisa la versión en árabe

Abre /ar. El layout define lang="ar" y dir="rtl", así que la barra lateral salta al borde derecho y cada tarjeta, tabla y menú se refleja. El texto en árabe usa Noto Sans Arabic y el inglés usa Inter. Al abrir /, el visitante va a /ar si su navegador prefiere el árabe, y a /en en caso contrario.

Los textos están divididos por página en messages/, cada carpeta con un en.json y un ar.json. Cuando añadas marcado, usa clases lógicas como ms-2, pe-4 y text-start; las físicas, como ml-2, rompen la página de derecha a izquierda. Prueba también la exportación a CSV en árabe. Excel abre el archivo con el texto árabe intacto, y los importes empiezan con + o -.

Qué comprobar: cada página que cambiaste, en /ar, con nombres de longitud real y números largos. Lo que suele salir mal: texto añadido solo a en.json, lo que deja una clave que falta en árabe.

8. Haz las comprobaciones previas al lanzamiento

Compila la versión de producción y mírala como la verá un cliente:

yarn build
yarn start

Ábrela en un móvil además de en un portátil, y en los dos idiomas y los dos temas. Desactiva el modo demo: cuando NEXT_PUBLIC_DEMO_MODE es true, la página de inicio de sesión muestra los datos de la demo, los rellena y añade un selector de color flotante. Viene desactivado por defecto. Recuerda también que el mapamundi del resumen descarga los contornos de los países desde cdn.jsdelivr.net, así que se queda vacío detrás de un cortafuegos que bloquee esa dirección.

Los comandos de desarrollo y de producción se diferencian en algo útil: yarn start sirve la última compilación, así que vuelve a ejecutar yarn build después de cada cambio. Cuando aparezcan errores que tu código no explica, borra la carpeta .next y compila otra vez.

Usa este repaso como ensayo corto del día del lanzamiento. Recorre todo el trayecto del cliente una vez, con calma:

1. Abre la página de bienvenida y entra al dashboard como lo haría un cliente nuevo.
2. Busca en las transacciones, redúcelas con el rango de fechas y exporta el archivo. Ábrelo en una hoja de cálculo.
3. Bloquea y desbloquea una tarjeta, y recarga para ver qué se conserva. Lo que vuelve atrás es un lugar para tu API.
4. Cambia al árabe y repite el mismo recorrido.
5. Reduce la ventana hasta el ancho de un móvil y busca números o botones cortados.

Anota cada sorpresa. Cada una acabará siendo un arreglo, un botón oculto o una línea en tus notas de soporte.

9. Publícala en internet

No hace falta configurar nada: ni base de datos, ni secretos, ni variables obligatorias. El despliegue es corto. Tienes tres caminos:

• Vercel. Sube la carpeta a un repositorio Git privado (la licencia no permite el código fuente público), impórtala, deja los ajustes predeterminados de Next.js y añade ENABLE_EXPERIMENTAL_COREPACK con el valor 1 para que Vercel use la versión fijada de Yarn. Después añade tu dominio.
• Un servidor Node.js. Usa Node.js 20.9 o superior, e instala, compila y arranca. Escucha en el 3030, así que pon Nginx o Caddy delante para servir tu dominio por HTTPS, y mantén yarn start activo con un gestor de procesos. En un host que define el puerto, usa yarn start -p $PORT.
• Docker. El Dockerfile incluido construye una imagen pequeña que se ejecuta con un usuario sin derechos de administrador.

Después de cualquier cambio en un valor NEXT_PUBLIC_, compila de nuevo. Esos valores se incorporan al código cuando se compila la app.

Qué comprobar: carga la dirección en vivo, cambia de idioma, cambia de tema e inicia sesión con tu método real. Lo que suele salir mal: un host que define su propio puerto mientras yarn start sigue escuchando en el 3030.

Cómo se lleva el día a día

Después del lanzamiento, la mayor parte del trabajo es pequeño y repetible.

• Conectar otro widget. Elige un widget, reemplaza su archivo de muestra por una llamada a tu API, pruébalo en los dos idiomas y publícalo por separado.
• Cambiar un texto. Edita el valor en el en.json correcto y en el ar.json correspondiente, sin tocar las claves y dejando intacto lo que va entre llaves. Reinicia yarn dev o vuelve a compilar.
• Añadir un idioma. Añade el código en src/i18n/routing.ts, copia en.json en cada una de las ocho carpetas de messages/, traduce los valores y añade el idioma al menú en src/components/LanguageSelector.tsx. Solo el árabe se trata como de derecha a izquierda, así que otro idioma de derecha a izquierda necesita algunos cambios más.
• Cambiar el acento. Edita una línea, DEFAULT_THEME_COLOR, y compila de nuevo.
• Atender las dudas de soporte. Un cliente que "pierde" sus preferencias normalmente borró los datos del navegador, porque el navegador recuerda el orden de las cifras principales y la elección de tema, por navegador.
• Actualizar dependencias. Las dependencias llevan versiones exactas, con un archivo de bloqueo en la descarga. Cambia una versión a propósito, prueba la compilación y usa Yarn para que el archivo de bloqueo siga mandando.

Cuánto cuesta mantenerla

La plantilla es una compra única desde $99, con soporte de por vida indicado en la página del producto. Ejecutar el front end cuesta alojamiento y nada más.

La partida más grande es lo que construyas detrás. Pagas la API, la base de datos, el servicio de inicio de sesión y todo lo que mueva o lea dinero, cada uno a las tarifas de su proveedor. Comprueba qué exigen tu socio de pagos o banca y tu regulador antes de mostrar saldos reales. La plantilla no incluye nada de eso.

Lo que no cuesta: no hay base de datos que licenciar, ni servicio obligatorio, y los datos de muestra funcionan sin conexión (salvo las formas del mapa y las fuentes que se descargan al compilar).

Qué personalizar después

• El acento. Prueba los cuatro temas (naranja, azul, dorado, plateado) y elige el que encaje con la marca. Los gráficos, los botones y el diseño de las tarjetas lo siguen.
• Moneda y categorías. Cambia las categorías de muestra por las que los freelancers usan de verdad, como reserva para impuestos, software y viajes.
• La página de bienvenida. La página en /en tiene el nombre del producto, tres recuadros y un botón Enter Dashboard. Reescríbela como tu punto de entrada.
• Más pantallas. La página UI Components enumera las piezas (tablas, diálogos, paneles, pestañas, selectores de fecha), así que una página nueva, como Invoices, se puede montar con ellas en el mismo estilo.
• Un tercer idioma. Añade el código en src/i18n/routing.ts, copia cada en.json en las ocho carpetas de mensajes y añádelo al menú de idiomas.

Lista de verificación de lanzamiento

• La cuenta de marcador de posición eliminada y un inicio de sesión real conectado, con la sesión comprobada en el servidor.
• Cada widget que conservas lee de tu API, y cada botón que conservas guarda en algún sitio.
• Los botones que no vas a construir están ocultos o eliminados.
• NEXT_PUBLIC_DEMO_MODE está desactivado.
• Nombre, logo, favicon, color y crédito del pie de página cambiados.
• Todo el texto nuevo existe tanto en en.json como en ar.json.
• Cada página que cambiaste revisada en /ar, en modo claro y oscuro, en un móvil.
• Compilación de producción ejecutada con yarn build y probada antes de desplegar.
• Dominio, HTTPS y ajustes de alojamiento en su sitio.
• Requisitos de tu socio y de tu regulador sobre datos de dinero confirmados.

Errores comunes

Lanzar con el inicio de sesión de marcador de posición

La cuenta de la plantilla es pública por diseño. Cualquiera que abra el código fuente de la página puede encontrarla. Reemplázala antes del lanzamiento.

Esperar que los botones guarden datos

Add Card, Add Transaction y Save Changes no hacen nada en el servidor porque no hay servidor. Conecta cada uno que conserves y oculta los que no vayas a construir.

Dejar el modo demo activado

El modo demo muestra datos de inicio de sesión de la demo en la página de login. Mantén NEXT_PUBLIC_DEMO_MODE desactivado en un producto real.

Olvidar recompilar tras cambiar un ajuste

Con yarn start o Docker, un valor NEXT_PUBLIC_ modificado no hace nada hasta que la app se compila de nuevo.

Copiar el comportamiento de la tarjeta de muestra a datos reales de tarjetas

La página Your Cards tiene un control para mostrar el número, y funciona con números de muestra inventados. Antes de que datos reales de tarjetas viajen al navegador, pregunta a tu proveedor de tarjetas o de pagos qué permite, y diseña lo que muestra la pantalla (a menudo solo los últimos dígitos) a partir de esa respuesta.

Esconder el problema en vez del botón

Un botón que no hace nada enseña a los clientes a no fiarse de la página. Si una acción todavía no está construida, quítala de la pantalla hasta que lo esté, en lugar de dejar que falle en silencio.

Probar solo en inglés

Los números, las fechas y las etiquetas largas se comportan distinto en diseños de derecha a izquierda. Abre cada página que cambiaste en /ar antes de darla por terminada.

Preguntas frecuentes

¿Cómo creo un dashboard fintech con Next.js?

Empieza con una interfaz terminada y después conecta tus datos. Esta plantilla aporta las páginas, los gráficos y los formularios, y tú conectas una API para saldos, tarjetas y transacciones, además de un inicio de sesión real.

¿Necesito un back end?

Sí, para cualquier cosa real. La plantilla no tiene back end ni base de datos, así que un producto en producción necesita tu propia API. Los datos de muestra te permiten diseñar y hacer demos sin ella.

¿Se puede conectar a un banco o mostrar cuentas reales?

No por sí sola. Muestra lo que devuelva tu API. Cualquier conexión bancaria, servicio de tarjetas o proveedor de pagos lo añades tú en el servidor.

¿Admite árabe y RTL?

Sí. Cada etiqueta, leyenda de gráfico, encabezado de tabla y mensaje de formulario existe en inglés y en árabe, y las páginas en árabe se muestran de derecha a izquierda.

¿Qué gráficos usa?

Recharts dibuja los gráficos de área, de barras, de anillo y de tipo mapa de calor, y cada uno se puede descargar como PNG. La tabla de transacciones está hecha con TanStack Table.

¿Puedo usarla para clientes?

Sí. La licencia comercial cubre proyectos ilimitados, incluido el trabajo entregado a un cliente. No puedes compartir el código fuente públicamente ni revenderlo como plantilla.

¿Es seguro el inicio de sesión tal como viene?

No. Es un marcador de posición que se comprueba en el navegador, pensado para reemplazarse por un inicio de sesión conectado a tu propia API antes de que lo usen clientes reales.

¿Tiene modo oscuro y claro?

Sí. Los dos están terminados, el dashboard arranca en oscuro y el navegador recuerda la elección de cada persona. El color de acento de la marca es un ajuste aparte.

¿Puedo exportar datos del dashboard?

Sí. La página de transacciones exporta un archivo CSV para el rango de fechas y los filtros elegidos, y los gráficos se pueden guardar como imágenes PNG. Las dos cosas funcionan en el navegador con los datos de muestra.

Pruébala tú mismo

Abre la demo en vivo para ver todas las páginas. La página del producto Financial Dashboard tiene los detalles, y la documentación cubre cada paso de arriba. Para otros dashboards, explora la categoría de plantillas de panel de administración, o lee cómo se resuelven los dashboards en árabe y RTL.

Esta plantilla es además una de las diez del Next.js Templates Bundle, si esperas construir más de un tipo de producto.