Premium

Plantilla LMS Next.js con IA y clases en vivo

Full Stack

El más elegido

Sitio para estudiantes + Panel de administración e instructores + API NestJS con TypeORM y autenticación

$179
Por separado: $277Ahorra $98

Sitio para estudiantes

El sitio para estudiantes en Next.js 16 por separado, con el catálogo, las páginas de curso, el pago y el panel de aprendizaje

$79

Panel de administración e instructores

El panel de gestión en Next.js 16 por separado, con gestión de cursos, personas e inscripciones, el espacio del instructor y el asistente de IA

$99

API Backend

La API NestJS por separado, con TypeORM, auth JWT, inscripciones, evaluaciones, pedidos, webhooks, correo y un seeder de un comando

$99

¿Creas para clientes?

Licencia Agencia

  • Todo lo de Full Stack
  • Proyectos ilimitados
  • Soporte prioritario por correo (48 h)
$599
* Factura comercial disponible

Learnio es una plantilla LMS Next.js full-stack con backend NestJS, asistente de IA, clases en vivo, pago con Stripe, cuestionarios, certificados y árabe RTL.

Three connected apps: student website, management dashboard, and NestJS APICourse delivery with messaging, quizzes, assignments, and certificatesAI admin assistant, live classes, English and Arabic, light and dark themes
Código fuente completo
Factura disponibleTras la compra, descarga una factura en PDF y gestiona los datos de facturación (NIF/CIF, dirección de empresa) en cualquier momento desde el Portal de clientes de Paddle
Plantilla LMS Next.js con IA y clases en vivo - Next.js Education template preview - Aniq-UI
Compartir:

Learnio reúne el descubrimiento de cursos, la enseñanza y el progreso de los estudiantes en una sola plataforma de aprendizaje full-stack: un sitio web para estudiantes en Next.js, un panel de gestión en Next.js y una API NestJS detrás de ambos. Clases en vivo, un asistente de IA para administración, pago con Stripe, cuestionarios, tareas y certificados, en inglés y árabe con temas claro y oscuro.

Demo del sitio para estudiantesDemo de admin e instructor
Student website, light
Student website, light. The Learnio home page with course search and the catalog entry points
Student website, dark
Student website, dark. Course search and the catalog entry points on the home page, dark theme
Management dashboard, administrator overview, light
Management dashboard, administrator overview, light. The administrator's overview in the light theme: platform totals, enrollment activity, top categories and the AI assistant widget
Management dashboard, administrator overview, dark
Management dashboard, administrator overview, dark. The administrator's overview: totals for courses, students, revenue and enrollments, the enrollment activity chart, top categories and the AI assistant widget
Abrir el sitio para estudiantesAbrir el panel de gestión
El paquete

Construye tu plataforma de aprendizaje alrededor de tu marca

Una base conectada para una academia en línea, un portal de formación o una plataforma de cursos, con código fuente que adaptas a tu proyecto. El paquete full-stack incluye tres aplicaciones.

Sitio para estudiantes en Next.js

  • Catálogo y páginas de curso
  • Perfiles de instructores y blog
  • Un panel de aprendizaje personal
  • Pago de cursos de pago

Panel de gestión en Next.js

  • Herramientas de administración para toda la plataforma
  • Un espacio para instructores con cursos, estudiantes y actividad docente
  • Tarjetas de resumen, gráficos y registros con búsqueda

Backend NestJS

  • Autenticación, cursos e inscripciones
  • Progreso, evaluaciones y mensajes
  • Pedidos y correos electrónicos
Asistente de IA

Pon un asistente de IA dentro de tu trabajo de administración

Pide al asistente de administración que consulte información de la plataforma, cree borradores de cursos, actualice registros admitidos o programe actividad docente.

Conectado mediante herramientas MCP

Sus herramientas MCP conectan la conversación con las acciones de gestión admitidas, incluidas analíticas seleccionadas mostradas como gráficos.

  • Consulta cursos, instructores e inscripciones a través de la API
  • Crea un borrador de curso con una sola petición, título y descripción en árabe incluidos
  • Funciona con Google Gemini, OpenAI o DeepSeek, con tu propia clave de API para el proveedor que elijas
  • Revisa el contenido y los cambios generados por IA como parte de tu flujo de trabajo
Create a course draft through the AI assistant, light
Create a course draft through the AI assistant, light. The admin assistant reading the catalog and creating a draft course through MCP tools, with the card that opens it
Create a course draft through the AI assistant, dark
Create a course draft through the AI assistant, dark. A course draft created by the assistant through MCP tools, with the card that opens it, dark theme
Cursos

Convierte el contenido de tus cursos en una experiencia de aprendizaje

Crea cursos, ordena secciones y lecciones arrastrando y soltando, gestiona los materiales y controla qué está en borrador y qué está publicado.

Curriculum builder, light
Curriculum builder, light. Sections and lessons ordered with drag and drop, with draft and published states and a curriculum overview
Curriculum builder, dark
Curriculum builder, dark. Drag-and-drop ordering of sections and lessons, with draft and published states, dark theme
Lesson player, light
Lesson player, light. A lesson playing with the course content beside it, progress, and the next lesson one click away
Lesson player, dark
Lesson player, dark. The lesson player with the course outline beside the video and the next lesson one click away, dark theme

Aprender a tu ritmo

Los estudiantes ven las lecciones, vuelven a la última que abrieron y siguen su avance desde su panel de aprendizaje.

  • Lecciones de vídeo, lectura, cuestionario y tarea
  • Notas personales guardadas en cada lección
  • Recursos descargables junto a las notas
  • Progreso contado lección a lección
Lesson notes and resources
Lesson notes and resources. A student's own notes saved on a lesson, with its downloadable resources on the tab beside them

Páginas de curso que explican el curso

  • Qué aprenderás y a quién va dirigido
  • El temario, el instructor y las reseñas
  • Precio, número de inscritos y botón de inscripción
  • Un catálogo con búsqueda y filtros por delante
Course page
Course page. A course with what you will learn, who it is for, the syllabus, price and enroll action
Clases en vivo

Clases en vivo autoalojadas

Imparte clases en vivo en tu propio servidor de reuniones, con estudiantes e instructores uniéndose directamente dentro de tu plataforma de aprendizaje. Mantén tu experiencia de enseñanza bajo tu marca, con control sobre tu infraestructura de reuniones.

Requiere un servidor de reuniones configurado por separado. Los costes de alojamiento no están incluidos.

Live class, instructor, light
Live class, instructor, light. An instructor hosting a live class inside Learnio on a self-hosted meeting server, with host controls
Live class, instructor, dark
Live class, instructor, dark. The instructor's view of a live class with host controls, dark theme

Un solo calendario para clases y entregas

Los calendarios de curso reúnen las sesiones en vivo y las fechas de entrega de tareas.

  • Sesiones en vivo y fechas de entrega por curso
  • Ventanas de acceso programadas alrededor de cada clase
  • Los instructores programan sesiones desde el panel
Course calendar
Course calendar. Live sessions, assignment deadlines and finished lessons on one calendar

Dentro de la clase

Pantallas previas, ventanas de acceso programadas y controles de anfitrión sostienen el flujo de una clase en vivo.

  • Una pantalla previa antes de entrar en la sala
  • Controles de anfitrión para el instructor que dirige la clase
  • El asiento del estudiante en la misma sala
  • Configura el servidor de reuniones para tu despliegue
Live class, student view
Live class, student view. A student's seat in the live class, joined from the course calendar
Mensajería

Mantén conectados a estudiantes e instructores

Da a los estudiantes un lugar propio para preguntar sobre sus cursos. Las conversaciones conservan su historial, sus imágenes adjuntas y sus indicadores de no leído.

Course conversation with an image attachment, light
Course conversation with an image attachment, light. A student to instructor thread with saved history and a picture in it
Course conversation with an image attachment, dark
Course conversation with an image attachment, dark. A course thread with saved history and an image attachment, dark theme

Notificaciones que llevan a algún sitio

Las notificaciones llaman la atención sobre lo que cambió, y cada una abre aquello a lo que se refiere.

  • Mensajes nuevos y cambios de sesión
  • Tareas calificadas y certificados emitidos
  • Una bandeja de entrada del instructor limitada a los cursos que imparte
Notifications
Notifications. New messages, session changes, marked assignments and issued certificates in one list
Evaluación

Evalúa el aprendizaje y reconoce el progreso

Cuestionarios, tareas y certificados, desde el editor de preguntas hasta una página pública de verificación.

Cuestionarios calificados en el servidor

Crea cuestionarios con preguntas, opciones de respuesta, puntuación mínima y límite de intentos.

  • Los estudiantes reciben resultados calificados en el servidor
  • Los cuestionarios obligatorios pueden formar parte de la finalización del curso
  • Intentos limitados, o ilimitados para practicar
Quiz editor
Quiz editor. An instructor building a quiz with questions, answer options, passing score and attempt limit
Quiz result, light
Quiz result, light. A completed quiz with its server-graded result
Quiz result, dark
Quiz result, dark. Server-graded quiz results with the pass mark and attempts, dark theme
Assignment grading, light
Assignment grading, light. Submissions for one assignment, one already marked with feedback and one being graded
Assignment grading, dark
Assignment grading, dark. The marking queue with grades and individual feedback, dark theme

Calificaciones, comentarios y certificados

Los instructores revisan las entregas, guardan calificaciones y dejan comentarios individuales. Los estudiantes que cumplen los requisitos reciben el certificado del curso.

  • Números de certificado y páginas públicas de verificación
  • Comparte un certificado, o imprímelo y guárdalo en PDF desde el navegador
  • Los certificados obtenidos reunidos en el panel del estudiante
Earned certificates
Earned certificates. A student's certificates, ready to share or print and save as PDF
Certificate verification, light
Certificate verification, light. The public page that verifies an issued certificate by its number
Certificate verification, dark
Certificate verification, dark. Public certificate verification by number, dark theme
Pago

Conecta pago, inscripción y correo

Learnio incluye Stripe Checkout, gestión de pedidos y control del estado del pago vinculado a la inscripción en el curso. También se incluye el código de integración de PayPal.

Checkout, light
Checkout, light. The checkout sheet with card and PayPal on offer; payment finishes on the provider's own page
Checkout, dark
Checkout, dark. The checkout sheet with card and PayPal on offer, dark theme

Inscrito en cuanto se liquida el pago

La inscripción sigue al pago liquidado, y la página de confirmación refleja el estado real del pedido.

  • Recibos de compra y confirmaciones de inscripción por correo
  • Integración con Resend para verificación de correo, restablecimiento de contraseña, recibos y confirmaciones
  • Plantillas de correo en inglés y árabe
Checkout confirmation
Checkout confirmation. The page a settled purchase lands on, once the server confirms the order

Los pedidos al completo

  • Cada pedido con su curso, método de pago y estado
  • Control del estado vinculado a la inscripción
  • Registros de pedidos con búsqueda para administradores
Order detail
Order detail. One order in the management dashboard with its payment method and status
Evidencia de pago de prueba

Registros del sandbox de Stripe y un recibo recibido por correo

Pagos de prueba correctos, el webhook de pago aceptado por la API y un recibo de compra tal como llegó por correo. Son evidencias de pagos de prueba, no cargos reales.

Successful test payments in Stripe
Successful test payments in Stripe. Stripe's sandbox transactions list with succeeded test payments; test mode, not live charges
Stripe checkout webhook received and order marked settled
Stripe checkout webhook received and order marked settled. The checkout.session.completed event accepted by the API with a 201 and the order reference marked settled; sandbox mode
Purchase receipt received by email
Purchase receipt received by email. The receipt email as it arrived in a test inbox after a sandbox payment
Roles

Da a cada rol las herramientas que necesita

Los administradores dirigen la plataforma. Los instructores trabajan con sus cursos asignados y nada más.

Administradores

  • Cursos, estudiantes, instructores e inscripciones
  • Pedidos, reseñas y contenido del blog
  • Personal, roles y ajustes

Instructores

  • Sus cursos asignados y su temario
  • Mensajes, cuestionarios y sesiones
  • Entregas de estudiantes por calificar

Operaciones diarias

  • Tarjetas de resumen y gráficos
  • Registros con búsqueda
  • Roles y permisos
Enrollment management
Enrollment management. The enrollments table in the management dashboard
Bilingüe

Empieza con inglés, árabe, claro y oscuro

Se incluyen interfaces en inglés y árabe, con diseño de derecha a izquierda para el árabe y temas claro y oscuro en las experiencias de estudiante y de gestión.

Student dashboard in Arabic, light
Student dashboard in Arabic, light. The learner dashboard mirrored right to left
Student dashboard in Arabic, dark
Student dashboard in Arabic, dark. The learner dashboard in Arabic with a right-to-left layout, dark theme

De derecha a izquierda, de principio a fin

Personaliza la marca y amplía las traducciones para tu público.

  • Diseños escritos con propiedades lógicas, que se reflejan en árabe
  • Mensajes de next-intl divididos por funcionalidad e idioma
  • Cifras, fechas y relojes se mantienen de izquierda a derecha dentro del texto árabe
  • Usa el selector Claro / Oscuro sobre las capturas para comparar cada interfaz en ambos temas
Student website in Arabic
Student website in Arabic. The home page in Arabic with a right-to-left layout
Bajo el capó

Construye sobre una base full-stack conocida

Next.js 16, React 19, TypeScript, Tailwind CSS 4 y un backend NestJS modular.

Frontend

  • Next.js 16 App Router, React 19, TypeScript
  • Tailwind CSS 4
  • TanStack Query para los datos de la API
  • React Hook Form y Zod para los formularios
  • next-intl para la localización

Backend

  • NestJS con módulos por dominio
  • TypeORM con SQLite para desarrollo local
  • Compatibilidad con configuración MySQL
  • Tokens JWT separados para estudiantes y personal
  • Seeders de base de datos y contenido de ejemplo

Experiencia de desarrollo

  • Documentación de instalación para las tres aplicaciones
  • Dependencias fijadas a versión exacta
  • Una capa de API por frontend, consumida mediante hooks de consulta
  • Datos simulados para que un frontend funcione antes que la API
Antes de lanzar

Lo que configuras tú

Learnio es una plantilla de código fuente, no una suscripción de alojamiento gestionado. Configura tu alojamiento, tu base de datos, tu almacenamiento de medios y los servicios externos que decidas usar.

Pagos

  • Tus propias cuentas y credenciales válidas de Stripe o PayPal
  • Configuración de webhooks
  • Pruebas de extremo a extremo antes de aceptar pagos reales

Correo

  • Tu configuración de Resend
  • Un dominio de envío verificado

IA y videollamadas

  • Tu propia clave de API para Google Gemini, OpenAI o DeepSeek
  • Un servidor de reuniones que configuras y alojas tú mismo
  • Los costes de alojamiento y de los proveedores no están incluidos
Explora

Explora Learnio antes de construir

Recorre el sitio para estudiantes y el panel de gestión en modo claro y oscuro. Las páginas de inicio de sesión de la demo rellenan una cuenta de demostración por ti. Las capturas usan datos de ejemplo, y las capturas de Stripe muestran el modo de prueba.

Demo del sitio para estudiantesDemo de admin e instructor
Ideal para

Construye tu próxima plataforma de aprendizaje con Learnio

Creadores de cursos y coaches en líneaEmpresas de formación y academiasBootcamps y escuelas con cohortes en vivoTutores y coaching individualAgencias que construyen un LMS para un clientePlataformas bilingües con árabe y RTL

Especificaciones Técnicas

Framework

Next.js 16

Versión de React

React 19

Estilo

Tailwind CSS 4

TypeScript

Sí

Responsivo

Móvil, Tableta, Escritorio

Período de Soporte

Lifetime Incluido

Consejo Pro: Todas las plantillas incluyen documentación completa para ayudarte a comenzar rápidamente.

Preguntas frecuentes

¿Qué recibo al comprar esta plantilla?
El código fuente completo del paquete que elijas, descargado desde tu panel personal justo después del pago. Hay una factura de empresa disponible para cada compra.
¿Puedo usarla en proyectos comerciales o de clientes?
Sí. Cada plantilla de pago incluye una licencia Comercial que cubre un proyecto comercial, incluido el trabajo que entregues a un cliente. Para reutilizar la misma plantilla en varios proyectos, elige la licencia de Agencia, que cubre proyectos ilimitados.
¿Recibo actualizaciones después de comprar?
Sí. Las actualizaciones son gratuitas. Las nuevas versiones aparecen en tu panel, donde puedes volver a descargar tus archivos en cualquier momento.
¿Incluye soporte?
Sí. El soporte acompaña tu compra, y puedes escribir al equipo en cualquier momento a support@aniq-ui.com.
¿Puedo probarla antes de comprar?
Sí. Esta plantilla tiene una demo completa en línea, enlazada arriba en esta página, para recorrer la versión real antes de decidir.

Plantillas Relacionadas

Plantilla E-Commerce Next.js con Panel de Administración - Next.js E-Commerce template preview - Aniq-UI
E-Commerce
Full Stack
Nuevo
IA

E-Commerce

$179

Plantilla e-commerce Next.js 16 con tienda, panel admin y API NestJS. Compra como invitado, auth JWT, probador con IA, inglés y árabe con RTL.

Ver Plantilla
Plantilla de dashboard Next.js con asistente de IA (Edición 2026) - Next.js Panel template preview - Aniq-UI
Panel
Full Stack
Nuevo
IA

Dashboard con asistente de IA

$149

Panel admin completo con Next.js 16, Tailwind CSS 4, TanStack Query y Framer Motion. Incluye backend NestJS, TypeORM, auth JWT, RBAC, actualizaciones WebSocket, asistente IA y soporte multilingüe.

Ver Plantilla
Plantilla de dashboard Next.js 2026: Edición financiera y bancaria - Next.js Dashboard template preview - Aniq-UI
Dashboard
pro

Dashboard financiero

$59

Plantilla de dashboard financiero Next.js 16 con temas claro y oscuro, inglés y árabe RTL, gráficos Recharts, widgets arrastrables y auth JWT. Demo en vivo.

Ver Plantilla

Next.js Templates Ventajas Técnicas

Nuestras plantillas React están diseñadas con optimización de rendimiento, integración de TypeScript y arquitectura amigable para desarrolladores para acelerar el desarrollo de su aplicación web.

Diseño Responsivo

Next.js Templates totalmente adaptables con puntos de interrupción responsivos para optimización de visualización en móviles, tabletas y escritorio.

Accesibilidad

HTML semántico, atributos ARIA y navegación por teclado, construidos pensando en la accesibilidad.

Alto Rendimiento

Construida sobre el App Router de Next.js con componentes de servidor y recursos optimizados, para que las páginas sigan siendo rápidas al crecer.

Soporte TypeScript

Arquitectura App Router de Next.js con componentes de servidor para reducir JavaScript del lado del cliente y métricas más rápidas de tiempo para interactividad.

Características de Nivel Empresarial Incluidas:

Experiencia del Desarrollador

Kit de herramientas de desarrollo de nivel empresarial

  • TypeScript 5.0+ con verificación estricta de tipos
  • Arquitectura de componentes de servidor y cliente
  • Documentación JSDoc completa

UX y Rendimiento

Métricas de experiencia de usuario optimizadas

  • Sistema de diseño responsivo mobile-first
  • Marcado accesible con ARIA y navegación por teclado
  • Renderizado rápido con componentes de servidor y recursos optimizados

Mantenimiento y Soporte

Sostenibilidad del proyecto a largo plazo

  • Soporte incluido con su compra
  • Actualizaciones regulares de seguridad y framework
  • Estructura semántica optimizada para SEO

Todas las Next.js Templates implementan patrones modernos de React 19, arquitectura App Router y optimización de Web Vitals para un rendimiento favorable al SEO.

world map

Comunidad Global de Usuarios

Únete a miles de desarrolladores en todo el mundo que confían en Aniq-UI para sus proyectos. Nuestras plantillas se utilizan en todo el mundo para crear experiencias web impresionantes.

InicioPlantillasBlog

Contáctanos

¿Preguntas sobre una plantilla o tu compra? Escríbenos

Aniq-uiAniq-uiAniq-ui