Cómo crear un LMS con clases en vivo en Next.js

Al terminar esta guía sabrás cómo crear una plataforma de cursos en línea con lecciones grabadas, clases en vivo, cuestionarios, certificados y pago integrado, usando Next.js, NestJS y la plantilla LMS Learnio de Aniq UI. No tendrás que construir por separado un sitio para estudiantes, un panel de administración y una API.

Seguimos el ejemplo de una escuela, desde el primer plan hasta el lanzamiento. Cada paso nombra la pantalla o el ajuste que interviene, y los comandos salen directamente de la documentación de la plantilla. El mismo camino sirve para un creador de cursos que trabaja solo, una empresa de formación o una agencia que construye un LMS para un cliente.

El encargo

Ledgerline Academy es una pequeña escuela en línea que enseña contabilidad a personas que cambian de carrera. Dan clase dos instructores. La escuela quiere empezar con pocos cursos y crecer. Esto es lo que necesita:

• Un curso introductorio gratis que cualquiera pueda hacer, para que los visitantes prueben la escuela antes de pagar.
• Cursos de pago con lecciones grabadas, notas personales y hojas de trabajo descargables.
• Una clase en vivo cada semana para cada grupo, dentro de la plataforma y no en un enlace de reunión aparte.
• Cuestionarios con nota mínima para aprobar, y tareas que un instructor corrige con comentarios.
• Un certificado al final del curso, con una página donde un empleador pueda comprobarlo.
• Dos instructores que gestionan cada uno solo sus propios cursos y estudiantes.
• Una versión en inglés y otra en árabe de toda la escuela.

Cómo cubre la plantilla el encargo

Necesidad	Dónde está	Qué usas
Cursos gratis y de pago	Sitio de estudiantes y API	Páginas de curso y pago; con un precio de 0 se salta el pago por completo
Contenido del curso	Panel de administración	El constructor de temario con secciones, lecciones y estados de borrador o publicado
Notas y hojas de trabajo	Sitio de estudiantes	El reproductor del curso, con notas y recursos descargables en cada lección
Clase en vivo semanal	Panel de administración, sitio de estudiantes, tu servidor de reuniones	Clases en vivo, el calendario del curso y un servidor Jitsi Meet que tú alojas
Cuestionarios y tareas	Panel de administración y sitio de estudiantes	El editor de cuestionarios y la corrección de tareas, con la nota calculada en el servidor
Certificados	Sitio de estudiantes	La página de certificados y la página pública de verificación
Cada instructor ve sus cursos	Panel de administración y API	El rol de Instructor con un perfil de instructor vinculado a la cuenta
Cobrar	API y sitio de estudiantes	Stripe Checkout y un webhook firmado
Inglés y árabe	Las tres aplicaciones	Rutas /en y /ar, archivos de mensajes, cursos escritos en ambos idiomas

Antes de empezar: decisiones que tomar

Una plataforma de cursos tiene algunas decisiones difíciles de deshacer cuando ya hay estudiantes y pagos. Tómalas primero sobre el papel.

¿Gratis, de pago o ambos?

Un curso con precio 0 matricula al estudiante de inmediato y nunca llega a un procesador de pagos. Un curso de pago pasa por el checkout y matricula al estudiante solo cuando el procesador confirma el pago. Ledgerline usa los dos: un curso introductorio gratis para generar confianza y, detrás, los cursos de pago.

¿Grabado, en vivo o ambos?

El catálogo se puede filtrar por cursos en vivo o grabados. Los cursos grabados solo necesitan lecciones y un bucket de archivos. Los cursos en vivo necesitan además un servidor de reuniones que alojas tú. Decide si las clases en vivo forman parte del lanzamiento, porque ese servidor es una pieza de infraestructura aparte, con su propio coste.

¿Quién enseña y qué puede tocar?

Si una sola persona lo hace todo, te basta una cuenta de super administrador. Si tienes varios profesores, prevé un perfil de instructor y una cuenta vinculada para cada uno.

¿Qué procesadores de pago?

La plantilla admite tarjetas con Stripe y PayPal. El checkout siempre muestra los dos, así que configura ambos antes de cobrar dinero real. Si solo quieres uno, prevé un cambio de código en el checkout.

¿Qué idiomas?

El inglés y el árabe vienen listos. El contenido de los cursos admite exactamente dos idiomas: un valor en inglés y otro en árabe para cada título, descripción y lección. Un tercer idioma de interfaz es posible, pero un tercer idioma de contenido exige cambios en la API y en los editores del panel.

¿Dónde viven el vídeo y los archivos?

La imagen del curso, el vídeo de las lecciones y los documentos van a un bucket de Cloudflare R2 o a otro almacenamiento compatible con S3. Decide quién es el dueño del bucket y qué harás con las copias de seguridad.

¿Qué les dices a las personas cuando compran?

Los recibos y las confirmaciones de matrícula salen por Resend, que necesita un dominio de envío verificado. Planifica el dominio y la dirección del remitente antes de probar el correo.

Paso a paso

Paso 1: Elige el paquete

Learnio son tres aplicaciones: un sitio web para estudiantes, un panel de administración e instructores, y una API NestJS detrás de ambos. Puedes comprarlas juntas como el paquete Full Stack, o una a una. El sitio de estudiantes por sí solo funciona con datos de muestra incluidos. El panel de administración por sí solo funciona sobre una simulación en el navegador, y la mayoría de sus pantallas quedan vacías hasta conectar una API.

Ledgerline necesita que estudiantes, instructores y base de datos coincidan, así que elige el paquete Full Stack. Si ya tienes una API, un único frontend puede apuntar a ella. La licencia comercial cubre proyectos ilimitados, incluido el trabajo que entregas a un cliente.

Fíjate en la página Mis plantillas: elige el ZIP que corresponde al paquete que compraste.

Qué comprobar: la carpeta extraída del paquete completo se llama learnio-lms y contiene admin-dashboard, back-end, frontend y docker-compose.yml. Los paquetes de una sola aplicación se extraen en su propia carpeta, con un Dockerfile, un package.json y un .env.example.

Paso 2: Ejecuta todo con Docker

Descarga el ZIP desde Mis plantillas, descomprímelo y abre una terminal en la carpeta learnio-lms. Con Docker en marcha, arranca las tres aplicaciones:

docker compose up --build

El primer arranque construye tres imágenes y llena la base de datos con datos de demostración, así que tarda unos minutos. Después, el sitio de estudiantes está en localhost:3030, el panel en localhost:3031 y la API en localhost:8000. Si un puerto está ocupado, añade SITE_PORT, ADMIN_PORT o API_PORT a un archivo .env junto a docker-compose.yml y ejecuta el comando otra vez.

Tres cuentas de demostración te dejan ver cada lado: un estudiante (demo@learnio.com, contraseña Demo@123), un super administrador (admin@learnio.com, contraseña Admin@123) y un instructor (emily-davis@learnio.com, contraseña Teach@123). Inicia sesión con cada una y recorre la plataforma antes de cambiar nada. Sin Docker, necesitas Node.js 22 o 24, corepack enable y una terminal por aplicación, empezando por la API.

Esta captura muestra la terminal abierta dentro de la carpeta extraída, el lugar donde se supone que estás cuando ejecutas cada comando de esta guía.

Observa la salida de la construcción: se crean tres imágenes, y los dos frontends esperan a que la API indique que está sana.

El panel se ejecuta en su propia terminal, en el puerto 3031, una vez que la API está en marcha.

Este es el resumen de administrador que deberías ver al iniciar sesión como super administrador: tarjetas y gráficos de la plataforma.

Qué comprobar: abre localhost:8000/api/health, que debería responder con un estado ok, y luego inicia sesión en cada aplicación con las cuentas de demostración. Si una página muestra un aviso de datos de muestra, esa aplicación no pudo conectar con la API.

Qué suele salir mal:

• Docker no está en marcha, o un puerto está ocupado. Libera el puerto 3030, 3031 u 8000, o define SITE_PORT, ADMIN_PORT o API_PORT.
• El primer arranque parece atascado. Está cargando los datos de demostración, y los frontends arrancan solo cuando la API está sana.
• Yarn indica la versión 1.22. Ejecuta corepack enable e instala de nuevo.
• Una nueva ejecución sobre una base de datos que conservas no reinicia nada. docker compose down -v borra el volumen y el siguiente arranque carga datos de demostración nuevos.

Paso 3: Define el nombre, el logotipo y los colores de la escuela

La marca vive en archivos, y el sitio de estudiantes y el panel guardan copias separadas, así que cambia las dos:

• Sitio de estudiantes: src/config/site.ts contiene el nombre, la descripción y los perfiles sociales. src/config/brand.config.ts da nombre al panel del estudiante.
• Panel: src/config/brand.config.ts contiene el nombre, el nombre corto, la empresa y la dirección base de los metadatos.
• Logotipos: sustituye public/assets/brand/learnio-wordmark.png y learnio-mark.png por tus propios PNG transparentes con los mismos nombres.
• Colores: src/styles/theme-variables.css en cada aplicación, con los valores claros en :root y los oscuros en .dark.

La pestaña App Settings del panel no cambia la marca de las aplicaciones. Sus campos site_name y support_email solo cambian los correos que envía la API. Busca el nombre antiguo en las dos carpetas de mensajes, en inglés y en árabe, y define la dirección pública del sitio en NEXT_PUBLIC_SITE_URL.

Qué comprobar: cambia el nombre en las dos aplicaciones, reconstruye y busca el nombre antiguo en las páginas de inicio de sesión, en el pie de página y en la pestaña del navegador, en inglés y en árabe. Sustituye también el favicon y las imágenes para compartir, porque las vistas previas de los enlaces las usan.

Qué suele salir mal: solo una de las dos aplicaciones cambia de marca, o el logotipo se ve deformado porque sus proporciones no coinciden con el tamaño declarado. Si tu diseño tiene otra forma, actualiza el ancho y el alto declarados donde los fijan la marca de la barra lateral y el componente del logotipo.

Paso 4: Crea el primer curso

Abre Courses en el panel y crea el curso introductorio gratis. Añade secciones, luego lecciones dentro de ellas, y arrastra para reordenar. Una lección puede ser un vídeo, una lectura, un cuestionario o una tarea. Adjunta las hojas de trabajo como recursos de la lección y deja el curso en borrador hasta que esté listo. Solo los cursos públicos publicados llegan al catálogo.

Los títulos, las descripciones y las lecciones se guardan una sola vez con un valor en inglés y otro en árabe, y los editores te dan una pestaña para cada uno. Ledgerline escribe ambos antes de publicar. Un curso gratis tiene precio 0 y no necesita ningún procesador de pagos.

Las subidas (vídeo, documentos, imagen del curso) van a un bucket de Cloudflare R2 u otro compatible con S3 cuando defines las cinco variables R2_* en back-end/.env. Hasta entonces, los archivos de muestra incluidos en la demo se reproducen igual, y solo fallan las subidas nuevas.

Constrúyelo en este orden:

1. Crea el curso con su título, descripción, precio y categoría, en ambos idiomas.
2. Añade secciones y luego lecciones dentro de cada sección, eligiendo un tipo de lección.
3. Adjunta hojas de trabajo y documentos a las lecciones que los necesiten.
4. Marca una lección como vista previa gratuita si quieres que los visitantes vean una muestra. Solo las lecciones de vista previa gratuita muestran su contenido y su vídeo en la página pública del curso.
5. Publica el curso cuando esté listo. Hasta entonces sigue en borrador y la API pública responde que no se encuentra.

Fíjate en cómo las secciones agrupan sus lecciones, cada una con un asa que arrastras para cambiar el orden.

Qué comprobar: abre la página pública del curso en otro navegador. Debería mostrar el resumen, el temario, el precio y la acción de matricularse. Luego inicia sesión como el estudiante de demostración y abre el reproductor del curso para ver las lecciones, las notas y los recursos.

Qué suele salir mal: un curso se ve en el panel pero no en el sitio porque sigue en borrador o no está marcado como público. Otro caso habitual es que falte el título en árabe, lo que hace que la página en árabe muestre campos vacíos.

Paso 5: Añade cuestionarios, tareas y certificados

En el editor de cuestionarios, añade preguntas y opciones de respuesta, y fija una nota mínima para aprobar y un límite de intentos, o permite intentos ilimitados para practicar. El servidor califica cada intento, así que los estudiantes no pueden cambiar una nota desde el navegador. Los cuestionarios obligatorios cuentan para terminar el curso.

Las tareas aparecen en el calendario del estudiante, donde entrega su trabajo. El instructor abre las entregas, guarda una nota y escribe comentarios para ese estudiante. Después de cada lección terminada y cada cuestionario aprobado, la API vuelve a comprobar si el curso está completo. Cuando lo está, la matrícula se marca como completada, se emite un certificado y el estudiante recibe una notificación. Cualquiera puede entonces comprobar un número de certificado en /en/verify-certificate, sin cuenta.

Fíjate en la entrega que espera corrección: el instructor pone una nota y escribe comentarios dirigidos a ese estudiante.

Qué comprobar: haz un cuestionario como el estudiante de demostración, suspéndelo a propósito y luego apruébalo. Confirma que el límite de intentos te detiene cuando debe. Entrega una tarea desde el calendario, corrígela como instructor y busca la notificación en el lado del estudiante.

Qué suele salir mal: un cuestionario obligatorio queda sin aprobar, así que el certificado no está listo, y se le dice así al estudiante. Comprueba también que la nota mínima sea un número que las preguntas puedan alcanzar de verdad.

Paso 6: Cobra en modo de prueba

De fábrica, el checkout usa un simulador integrado. No contacta con ningún procesador y no cobra a nadie, y un número de tarjeta que termina en 0 se rechaza, lo que te permite ensayar un pago fallido. Haz primero una compra completa así, como el estudiante de demostración.

Para pasar a Stripe, crea claves de prueba en tu cuenta de Stripe y pon STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY y STRIPE_WEBHOOK_SECRET en back-end/.env. Después añade en Stripe un endpoint de webhook que apunte a la dirección de tu API seguida de /api/webhooks/payments/stripe. Un estudiante queda matriculado cuando el webhook confirma el pago, no cuando vuelve al sitio. Sin el webhook, los pedidos se quedan pendientes.

PayPal tiene sus propias claves: PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET, PAYPAL_WEBHOOK_ID y PAYPAL_ENV. Lee la advertencia de la sección de errores más abajo antes de salir en producción.

Este es el checkout que ve un estudiante: elige tarjeta o PayPal, y el formulario se adapta al método elegido.

Qué comprobar: compra un curso de pago de tres maneras. Primero con el simulador, para confirmar que aparece la plaza. Luego rechaza un pago con un número de tarjeta que termina en 0 y confirma que no se concede ninguna plaza. Después, con las claves de prueba de Stripe ya puestas, compra otra vez y confirma que el pedido pasa de pendiente a pagado cuando llega el webhook. La página de pedidos del panel muestra cada pedido con su curso, método y estado.

Qué suele salir mal:

• El pedido se queda pendiente. La dirección del endpoint del webhook es incorrecta, o STRIPE_WEBHOOK_SECRET no coincide con ese endpoint.
• Un visitante sin sesión pulsa pagar y lo mandan a iniciar sesión. Pagar requiere una cuenta de estudiante.
• Una prueba la gestiona el procesador equivocado. Un método sin claves sigue ejecutando el simulador.

Paso 7: Configura las clases en vivo

Las clases en vivo funcionan en un servidor Jitsi Meet que alojas tú. La plantilla no incluye uno, y el coste del alojamiento corre de tu cuenta. Sin él, el calendario muestra las clases en vivo como no disponibles. Pon los datos del servidor en back-end/.env (el archivo de ejemplo lista las variables) y la API emite los tokens que dejan entrar a la sala a estudiantes e instructores.

Un instructor programa una sesión desde el panel, y aparece en el calendario del curso junto a las fechas de entrega de las tareas. Los estudiantes la abren desde /en/dashboard/calendar. La sala se abre poco antes de la hora de inicio, con una pantalla previa, y el instructor recibe los controles de anfitrión. Ledgerline programa una sesión por semana para cada grupo.

Fíjate en cómo las sesiones en vivo y las fechas de entrega comparten un solo calendario, de modo que el estudiante ve toda la semana en un único lugar.

Qué comprobar: programa una sesión como instructor, abre el calendario del estudiante y confirma que la clase aparece. Abre la página de la clase cerca de su hora de inicio y confirma que la sala queda disponible.

Qué suele salir mal: el calendario marca las clases como no disponibles porque no hay servidor de reuniones configurado, o la sala se abre demasiado pronto. La sala se abre poco antes de la clase, no en el momento en que se programa.

Paso 8: Añade instructores con los límites adecuados

Estudiantes y personal inician sesión en endpoints distintos y reciben tokens que solo aceptan sus propias rutas. El seed crea seis roles de personal: Super Admin, Admin, Manager, Editor, Viewer e Instructor. El rol Instructor cubre las clases en vivo, las tareas, el temario y la edición de cursos, además de lectura de estudiantes, matrículas y reseñas.

El detalle clave es el vínculo entre una cuenta de administración y un perfil de instructor. Una cuenta vinculada también queda limitada a sus propios cursos: solo ve esos cursos y a sus estudiantes, y cualquier intento de escribir en otro sitio recibe un 403. La cuenta emily-davis@learnio.com del seed muestra la configuración. Ledgerline crea a sus dos instructores así y reserva el super administrador para el dueño.

Qué comprobar: inicia sesión como instructor y confirma que la lista de cursos muestra solo los de ese instructor. Luego intenta cambiar el curso de otro instructor y confirma que el cambio se rechaza.

Qué suele salir mal: un instructor ve demasiado porque su cuenta no está vinculada a un perfil de instructor. O al revés: un profesor no puede crear lecciones porque al rol le falta el permiso de temario. Edita el rol en la pantalla de roles y el cambio llega al personal con sesión iniciada.

Paso 9: Conecta el correo y, si quieres, el asistente de IA

Los enlaces de verificación, los restablecimientos de contraseña, los recibos y las confirmaciones de matrícula salen por Resend, en inglés y en árabe. Pon tu RESEND_API_KEY en back-end/.env y verifica un dominio de envío en Resend. Sin clave no se rompe nada: cada mensaje se imprime en el registro de la API, algo útil durante las pruebas.

El panel de administración también tiene un asistente de IA. Puede buscar cursos, instructores y matrículas, convertir una petición en un borrador de curso, con el título y la descripción en árabe incluidos, programar clases y dibujar gráficos de registros. Funciona con una clave de Google, OpenAI o DeepSeek que pagas tú. Si no hay clave en back-end/.env, pide una al administrador en el navegador. Trata lo que crea como un borrador y revísalo antes de publicar.

El chat muestra una sola petición convertida en un borrador de curso, que un administrador revisa y edita como cualquier otro curso.

Qué comprobar: genera un recibo comprando un curso de pago y mira tu bandeja de entrada. Pídele al asistente un borrador de curso pequeño y abre el resultado en el editor de cursos para confirmar que se rellenaron los dos idiomas.

Qué suele salir mal: el correo no llega a ninguna parte porque falta la clave o el dominio no está verificado. Mientras no haya clave, los mensajes aparecen en el registro de la API. Además, el asistente no funciona con los datos de muestra sin conexión del panel.

Paso 10: Sal en producción

1. Genera un secreto con node -e "console.log(require('crypto').randomBytes(48).toString('hex'))" y úsalo como JWT_SECRET.
2. En back-end/.env define NODE_ENV=production, CORS_ORIGIN (con las direcciones de los dos frontends, separadas por comas) y FRONTEND_URL (el sitio de estudiantes).
3. En el .env de cada frontend define NEXT_PUBLIC_API_BASE_URL con /api al final, define NEXT_PUBLIC_SITE_URL con el dominio real y reconstruye. Estos valores se compilan dentro de la aplicación.
4. Define NEXT_PUBLIC_WEBSOCKET_BASE_URL en el panel para que funcionen las notificaciones en directo.
5. Si usas R2, añade el host público de tu bucket como NEXT_PUBLIC_MEDIA_HOSTNAME (o MEDIA_HOSTNAME con Compose) y reconstruye.
6. Cambia las contraseñas de demostración publicadas, o empieza con las tablas vacías.

Para MySQL, crea una base de datos vacía, define el controlador y la conexión en back-end/.env y ejecuta yarn seed. En un sitio en producción, yarn db:sync crea las tablas sin escribir ninguna fila.

Qué comprobar después de salir en producción: haz una compra de prueba real con un importe pequeño o un curso con descuento, mira cómo se liquida el pedido, confirma que llega el correo de matrícula y comprueba que la página del certificado se abre para alguien que no ha iniciado sesión.

Qué suele salir mal:

• La API se niega a arrancar con un JWT_SECRET de ejemplo o un CORS_ORIGIN vacío, e imprime qué hay que corregir.
• Un frontend sigue mostrando el aviso de datos de muestra porque faltaba su dirección de API en el momento de la compilación.
• El checkout rechaza una compra hecha desde una página en un idioma que la API no lista. Añade el idioma en ambos lados antes de abrirlo.

El día a día

Tras el lanzamiento, el equipo de Ledgerline trabaja con un puñado de pantallas.

Vigilar la plataforma

El resumen muestra tarjetas y gráficos de la plataforma. Los administradores también reciben notificaciones cuando se concede una plaza a un estudiante, cuando termina un curso, deja una reseña, se registra, o cuando se publica un curso. Un instructor solo se entera de lo que pasa en sus propios cursos.

Corregir y responder

Los instructores abren las entregas pendientes de corrección, guardan una nota y dejan comentarios. Estudiantes e instructores mantienen una conversación por curso, con historial, imágenes adjuntas e indicador de mensajes sin leer.

Cuidar los pedidos

Cada pedido tiene un estado de pendiente, pagado, fallido o reembolsado, y una pasarela que nombra al procesador, el simulador integrado o un curso gratis. Las cifras de ingresos dejan fuera los pedidos gratis al calcular el valor medio del pedido, para que un curso introductorio gratis no lo hunda. Si necesitas añadir una plaza pagada en otro sitio, un administrador puede registrarla a mano.

Una página de pedido como esta muestra el curso, el método de pago y el estado del pago en un solo lugar.

Moderar reseñas

Las reseñas pasan por publicada, pendiente y oculta. Si pones reviews_require_approval en true, las reseñas nuevas quedan pendientes hasta que alguien con permiso de moderación las publica. Cada cambio actualiza la valoración del curso y la del instructor.

Personas y papeleras de reciclaje

Al eliminar un estudiante, un instructor, un curso, una categoría, una reseña o una entrada, pasa a una papelera de reciclaje donde se puede restaurar, así que un error no es permanente.

Un plan de lanzamiento de ejemplo, semana a semana

Este calendario es un ejemplo para Ledgerline, no una promesa sobre lo que tardará tu lanzamiento.

• Semana 1, entender. Ejecuta el sistema, inicia sesión con cada rol y cierra la lista de decisiones.
• Semana 2, marca y primer curso. Cambia la marca de las dos aplicaciones y construye el curso introductorio gratis en ambos idiomas.
• Semana 3, evaluación y pagos. Añade cuestionarios, tareas y certificados, y prueba compras con el simulador y con las claves de prueba de Stripe.
• Semana 4, clases en vivo y personal. Monta el servidor de reuniones, crea las cuentas de instructor y haz una clase de prueba con compañeros.
• Semana 5, producción. Define el entorno de producción, conecta el correo, reconstruye los frontends y haz una compra real.
• Semana 6, lanzamiento suave. Abre primero el curso gratis y después los de pago.

Lista de comprobación del lanzamiento

• Nombres, logotipos, iconos y colores sustituidos en las dos aplicaciones, más las imágenes para compartir.
• Cursos publicados en ambos idiomas, con los precios definidos.
• Los cuestionarios tienen notas mínimas alcanzables, y los obligatorios están marcados.
• Stripe y PayPal configurados, con las suscripciones de webhook en su sitio.
• Una compra de prueba real completada y un correo de matrícula recibido.
• Servidor de reuniones en marcha y una clase de prueba realizada.
• Cuentas de instructor vinculadas a perfiles de instructor y probadas.
• JWT_SECRET, CORS_ORIGIN y FRONTEND_URL definidos para producción.
• Direcciones de API de los frontends, dirección del sitio y host de archivos definidos, y después reconstruidos.
• Contraseñas de demostración publicadas cambiadas o eliminadas.
• Dominio de Resend verificado.
• Copias de seguridad planificadas para la base de datos y el bucket de archivos.
• Páginas de privacidad y términos revisadas para tu propio negocio.

Plantilla, desde cero o una plataforma de cursos alojada

Una plataforma de cursos alojada

Puedes tener una escuela en línea enseguida, con el alojamiento, el vídeo y los pagos resueltos por otros. El precio son cuotas continuas, límites en el diseño y en el flujo de trabajo, y los datos de tus estudiantes en el sistema de otra empresa. Encaja bien cuando quieres enseñar y no necesitas un comportamiento a medida.

Construir desde cero

Tú decides todo. También construyes cuentas para dos tipos de usuarios, un editor de temario, un reproductor de lecciones, cuestionarios, corrección, certificados, un checkout con webhooks, correo, tokens de clases en vivo y dos idiomas antes de dar tu primera lección.

Partir de una plantilla

Recibes todas esas piezas ya conectadas, con código fuente que es tuyo y que puedes cambiar. Tú lo alojas, lo actualizas y cubres los huecos que esta guía nombra: un servidor de reuniones, tus propias cuentas de pago y un dominio de correo. Encaja con una escuela que quiere su propia marca y sus propias reglas, o con una agencia que construye la plataforma para un cliente.

Cuánto cuesta mantenerlo

Los paquetes de Learnio empiezan desde $79 por una sola aplicación, y el paquete Full Stack que usa Ledgerline cuesta $179. Incluye licencia comercial y soporte de por vida. El resto es lo que decidas activar:

• Alojamiento para las tres aplicaciones, y una base de datos si pasas de SQLite.
• Stripe y PayPal cobran sus propias comisiones de procesamiento. Consulta la página de precios de Stripe y la página de comisiones para comercios de PayPal.
• Resend para el correo, más un dominio que puedas verificar.
• Un servidor Jitsi Meet para las clases en vivo, con su propio coste de alojamiento.
• Un bucket compatible con S3, como Cloudflare R2, para el vídeo y los archivos.
• Una clave de IA, solo si usas el asistente.

El trabajo en local es gratis. SQLite no necesita servidor de base de datos, el simulador de pagos no cobra a nadie y los cursos gratis nunca necesitan un procesador.

Qué personalizar después

• Categorías y catálogo. Define el tamaño de página del catálogo con el ajuste courses_per_page.
• Moderación de reseñas. Pon reviews_require_approval en true para que las reseñas nuevas esperen a un moderador.
• Blog. El panel tiene un editor de blog, y el sitio de estudiantes publica las entradas. Es una forma discreta de atraer tráfico de búsqueda.
• Idioma predeterminado. Abre en árabe poniendo defaultLocale en ar.
• Un tercer idioma. Añade un locale a cada aplicación y a la API. El contenido de los cursos admite exactamente dos idiomas.
• Roles. Edita lo que puede hacer cada rol en la pantalla de roles y el cambio llega al personal con sesión iniciada.

Errores comunes

Saltarse el webhook

Si los estudiantes pagan y no pasa nada, lo primero que hay que revisar es el webhook. La matrícula sigue a la confirmación del procesador, así que una suscripción que falta deja los pedidos pendientes.

Configurar Stripe pero no PayPal

El checkout siempre ofrece tarjeta y PayPal. Un pedido pagado con un método sin claves usa el simulador y se completa sin cobrar a nadie. Configura ambos antes de aceptar pedidos reales.

Esperar clases en vivo sin un servidor de reuniones

La plantilla aporta la programación, los tokens y las pantallas de la sala. El servidor de reuniones lo ejecutas tú. Sin servidor, el calendario marca las clases como no disponibles.

Imágenes de curso rotas tras conectar un bucket

Un frontend solo muestra imágenes de los hosts que estaban listados cuando se compiló. Añade el host público de tu bucket, sin https://, y reconstruye.

Tratar App Settings como un cambio de marca

La pestaña solo cambia los correos. Los nombres, los logotipos y los colores salen de archivos de cada aplicación.

Preguntas frecuentes

¿Cómo creo un LMS con Next.js?

Parte de una plantilla que ya cubra cursos, progreso, evaluación y pagos, y adapta después la marca y el contenido. Learnio te da un sitio de estudiantes en Next.js 16, un panel de administración y una API NestJS que ya funcionan juntos.

¿Admite clases en vivo?

Sí, en un servidor Jitsi Meet que ejecutas tú. Estudiantes e instructores entran dentro de la plataforma, desde un calendario del curso que también muestra las fechas de entrega.

¿Puedo usarla para clientes?

Sí. La licencia cubre proyectos ilimitados, incluidos los que entregas a un cliente. No puedes revender el código fuente ni publicarlo como plantilla.

¿Admite árabe y RTL?

Sí. Las tres aplicaciones vienen en inglés y árabe, y el árabe se muestra de derecha a izquierda. El contenido de los cursos se introduce en ambos idiomas.

¿Necesito un backend?

Para una escuela real, sí. Los frontends pueden funcionar solos con datos de muestra, pero las cuentas, los pagos y el progreso necesitan la API, que viene en los paquetes Full Stack y Backend API.

¿Puedo vender cursos con PayPal además de Stripe?

La plantilla incluye código de integración con PayPal y una ruta de webhook de PayPal junto a la de Stripe. Ambos necesitan tus propias cuentas y claves.

¿Puedo ofrecer cursos gratis?

Sí. Un curso con precio 0 matricula al estudiante al instante y nunca llega a un procesador de pagos.

¿Pueden los instructores ver solo sus propios cursos?

Sí. Una cuenta vinculada a un perfil de instructor queda limitada a los cursos de ese instructor y a sus estudiantes, y las escrituras fuera de ellos se rechazan.

¿Qué pasa cuando un pago falla o se reembolsa?

Los eventos del webhook del procesador liquidan, rechazan o reembolsan el pedido. La plaza se crea solo cuando el pago está confirmado, así que un pago fallido nunca concede una.

¿Puedo añadir otro idioma?

Sí, para la interfaz. Añade el código a la lista de locales del sitio de estudiantes, a las listas del panel y a la lista de idiomas admitidos de la API, y traduce después los archivos de mensajes. El contenido de los cursos solo admite inglés y árabe.

Pruébalo tú mismo

Abre la demo del sitio web para estudiantes y la demo del panel de administración e instructores. Después lee la documentación de Learnio o visita la página del producto Learnio. Encontrarás más opciones en la categoría de plantillas de educación y LMS y en la guía de las mejores plantillas de Next.js.

Learnio es también una de las diez plantillas del paquete de plantillas de Next.js.