Las aplicaciones modernas suelen necesitar diferentes tipos de usuarios. Un administrador puede gestionar información y usuarios, mientras que un empleado o cliente solo debería acceder a determinadas funciones. Con Next.js podemos construir este tipo de aplicaciones combinando autenticación, base de datos y un sistema de roles.
1. Configurar el proyecto
Primero podemos crear un proyecto de Next.js:
npx create-next-app@latest mi-app
cd mi-app
npm run dev
Para gestionar los usuarios podemos utilizar una solución de autenticación como Auth.js y una base de datos mediante Prisma.
2. Crear los roles
Una estructura sencilla puede utilizar tres roles:
ADMIN
EDITOR
USER
En la base de datos, cada usuario tendrá asociado un rol:
model User {
id String @id @default(cuid())
email String @unique
name String?
role Role @default(USER)
}
enum Role {
ADMIN
EDITOR
USER
}
De esta manera, el sistema puede identificar qué acciones puede realizar cada persona.
3. Controlar el acceso
No basta con ocultar botones en la interfaz. Los permisos también deben comprobarse en el servidor. Por ejemplo, una página administrativa podría verificar el rol del usuario antes de mostrar información:
if (session.user.role !== "ADMIN") {
redirect("/no-autorizado");
}
Así evitamos que un usuario acceda directamente a una URL protegida.
4. Proteger las acciones
Las mismas comprobaciones deben aplicarse a las API, Server Actions y operaciones sobre la base de datos. Por ejemplo, solamente un administrador debería poder eliminar usuarios.
Una función reutilizable puede comprobar los permisos:
function tienePermiso(usuario, rolesPermitidos) {
return rolesPermitidos.includes(usuario.role);
}
Esto facilita mantener las reglas de seguridad organizadas.
5. Crear una interfaz según el rol
Finalmente, podemos adaptar el dashboard dependiendo del usuario. Un administrador podría tener opciones como Usuarios, Configuración y Reportes, mientras que un usuario normal podría acceder solamente a su perfil y a sus propios datos.
Crear una aplicación multiusuario con Next.js implica mucho más que implementar un inicio de sesión. Es necesario combinar autenticación, roles, autorización y protección del servidor. Con Next.js, Auth.js y Prisma podemos construir una arquitectura flexible que permita agregar nuevos roles y permisos a medida que crece la aplicación.
