Los dashboards son una parte fundamental de muchas aplicaciones SaaS. Permiten mostrar métricas, administrar usuarios, consultar información y controlar diferentes funcionalidades desde una única interfaz. Con Next.js podemos construir un dashboard moderno aprovechando el App Router, los Server Components y una estructura de proyecto escalable.
1. Crear el proyecto
Comenzamos creando una aplicación de Next.js:
npx create-next-app@latest mi-dashboard
cd mi-dashboard
npm run dev
Durante la configuración podemos seleccionar TypeScript, ESLint, Tailwind CSS y App Router. Estas herramientas facilitan la creación de una interfaz organizada y adaptable.
2. Organizar las rutas
Una estructura sencilla puede ser:
app/
├── dashboard/
│ ├── page.tsx
│ ├── usuarios/
│ │ └── page.tsx
│ └── configuracion/
│ └── page.tsx
├── layout.tsx
└── page.tsx
La carpeta dashboard representa el área principal de la aplicación. Dentro podemos crear diferentes secciones, como usuarios, estadísticas o configuración.
3. Crear el diseño
Un dashboard normalmente contiene una barra lateral y un área principal.
export default function Dashboard() {
return (
<div className="flex min-h-screen">
<aside className="w-64 border-r p-6">
<h2 className="text-xl font-bold">Mi SaaS</h2>
<nav className="mt-8 space-y-4">
<p>Dashboard</p>
<p>Usuarios</p>
<p>Configuración</p>
</nav>
</aside>
<main className="flex-1 p-8">
<h1 className="text-3xl font-bold">Dashboard</h1>
</main>
</div>
);
}
Con Tailwind CSS podemos construir rápidamente una interfaz responsive sin crear grandes cantidades de CSS.
4. Mostrar métricas
Una de las funciones principales es presentar información relevante mediante tarjetas:
const metricas = [
{ titulo: "Usuarios", valor: "1.250" },
{ titulo: "Ingresos", valor: "$8.450" },
{ titulo: "Suscripciones", valor: "320" }
];
Después podemos recorrer este arreglo para generar las tarjetas dinámicamente. Esta estrategia facilita actualizar los datos posteriormente desde una API o una base de datos.
5. Conectar datos reales
Un dashboard SaaS normalmente necesita información almacenada en una base de datos. Next.js puede comunicarse con APIs y servicios como PostgreSQL, Prisma o Supabase.
Por ejemplo, un Server Component puede consultar datos antes de renderizar la página, evitando enviar lógica innecesaria al navegador.
También podemos utilizar Server Actions para operaciones como crear usuarios, actualizar configuraciones o procesar formularios.
6. Autenticación y protección
Un dashboard debe restringirse a usuarios autorizados. Podemos utilizar soluciones como Auth.js para implementar inicio de sesión y controlar qué páginas pueden visitar los usuarios.
Una vez autenticado, podemos proteger las rutas del dashboard y mostrar información específica dependiendo del usuario o de su rol.
Crear un dashboard SaaS básico con Next.js permite combinar routing, Server Components, Tailwind CSS, autenticación y acceso a datos dentro de una misma aplicación. A partir de esta estructura podemos agregar gráficos, pagos, gestión de usuarios, diferentes roles y conexión con una base de datos.
Lo importante es comenzar con una arquitectura sencilla y separar cada funcionalidad en componentes y rutas reutilizables. De esta forma, el proyecto puede crecer hasta convertirse en una aplicación SaaS completa y profesional.
