Comment créer un LMS avec cours en direct en Next.js

À la fin de ce guide, vous saurez créer une plateforme de cours en ligne avec des leçons enregistrées, des cours en direct, des quiz, des certificats et un paiement intégré, avec Next.js, NestJS et le template LMS Learnio d’Aniq UI. Vous n’aurez pas à construire séparément un site pour les étudiants, un panneau d’administration et une API.

Nous suivons l’exemple d’une école, de son premier plan jusqu’au lancement. Chaque étape nomme l’écran ou le réglage concerné, et les commandes viennent directement de la documentation du template. Le même chemin convient à un créateur de cours indépendant, à un organisme de formation ou à une agence qui construit un LMS pour un client.

Le cahier des charges

Ledgerline Academy est une petite école en ligne qui enseigne la comptabilité à des personnes en reconversion. Deux formateurs y enseignent. L’école veut démarrer avec quelques cours et grandir ensuite. Voici ce qu’il lui faut :

• Un cours d’introduction gratuit que tout le monde peut suivre, pour que les visiteurs essaient l’école avant de payer.
• Des cours payants avec des leçons enregistrées, des notes personnelles et des fiches de travail à télécharger.
• Un cours en direct chaque semaine pour chaque promotion, donné dans la plateforme plutôt que sur un lien de réunion à part.
• Des quiz avec une note de passage, et des devoirs qu’un formateur corrige avec des commentaires.
• Un certificat à la fin d’un cours, avec une page où un employeur peut le vérifier.
• Deux formateurs qui gèrent chacun uniquement leurs propres cours et leurs propres étudiants.
• Une version en anglais et une version en arabe de toute l’école.

Comment le template répond au cahier des charges

Besoin	Où ça se trouve	Ce que vous utilisez
Cours gratuits et payants	Site étudiant et API	Pages de cours et paiement ; un prix de 0 évite complètement le paiement
Contenu des cours	Tableau de bord d’administration	Le constructeur de programme avec sections, leçons et états brouillon ou publié
Notes et fiches de travail	Site étudiant	Le lecteur de cours, avec des notes et des ressources à télécharger pour chaque leçon
Cours en direct hebdomadaire	Tableau de bord d’administration, site étudiant, votre serveur de réunion	Cours en direct, calendrier du cours et un serveur Jitsi Meet que vous hébergez
Quiz et devoirs	Tableau de bord d’administration et site étudiant	L’éditeur de quiz et la correction des devoirs, avec une note calculée côté serveur
Certificats	Site étudiant	La page des certificats et la page publique de vérification
Chaque formateur voit ses cours	Tableau de bord d’administration et API	Le rôle Instructor avec un profil de formateur lié au compte
Encaisser les paiements	API et site étudiant	Stripe Checkout et un webhook signé
Anglais et arabe	Les trois applications	Routes /en et /ar, fichiers de messages, cours rédigés dans les deux langues

Avant de commencer : les décisions à prendre

Une plateforme de cours demande quelques décisions difficiles à défaire une fois que des étudiants et des paiements existent. Prenez-les d’abord sur le papier.

Gratuit, payant, ou les deux ?

Un cours à 0 inscrit l’étudiant tout de suite et n’atteint jamais un prestataire de paiement. Un cours payant passe par le paiement et n’inscrit l’étudiant qu’une fois le paiement confirmé par le prestataire. Ledgerline utilise les deux : un cours d’introduction gratuit pour instaurer la confiance, et les cours payants derrière.

Enregistré, en direct, ou les deux ?

Le catalogue peut être filtré par cours en direct ou enregistrés. Les cours enregistrés n’ont besoin que de leçons et d’un bucket de médias. Les cours en direct demandent aussi un serveur de réunion que vous hébergez. Décidez si les cours en direct font partie du lancement, car ce serveur est une infrastructure à part, avec son propre coût.

Qui enseigne, et que peut-il toucher ?

Si une seule personne fait tout, un seul compte de super administrateur suffit. Si vous avez plusieurs enseignants, prévoyez un profil de formateur et un compte lié pour chacun.

Quels prestataires de paiement ?

Le template prend en charge les cartes via Stripe et PayPal. Le paiement affiche toujours les deux, donc prévoyez de configurer les deux avant d’encaisser de l’argent réel. Si vous n’en voulez qu’un, prévoyez une modification du code du paiement.

Quelles langues ?

L’anglais et l’arabe sont prêts à l’emploi. Le contenu des cours contient exactement deux langues : une valeur en anglais et une en arabe pour chaque titre, description et leçon. Une troisième langue d’interface est possible, mais une troisième langue de contenu demande des modifications dans l’API et dans les éditeurs d’administration.

Où vivent les vidéos et les fichiers ?

Les visuels de cours, les vidéos de leçon et les documents vont dans un bucket Cloudflare R2 ou un autre stockage compatible S3. Décidez qui possède le bucket et ce que vous ferez pour les sauvegardes.

Que dites-vous aux gens quand ils achètent ?

Les reçus et les confirmations d’inscription passent par Resend, qui demande un domaine d’envoi vérifié. Prévoyez le domaine et l’adresse d’expéditeur avant de tester l’e-mail.

Pas à pas

Étape 1 : Choisir le package

Learnio, ce sont trois applications : un site web pour les étudiants, un tableau de bord d’administration et de formation, et une API NestJS derrière les deux. Vous pouvez les acheter ensemble avec le package Full Stack, ou une par une. Le site étudiant seul fonctionne avec des données d’exemple fournies. Le tableau de bord seul fonctionne sur une simulation dans le navigateur, et la plupart de ses écrans restent vides tant qu’une API n’est pas connectée.

Ledgerline a besoin que les étudiants, les formateurs et la base de données soient cohérents entre eux, donc elle prend le package Full Stack. Si vous avez déjà une API, un seul frontend peut s’y connecter. La licence commerciale couvre un nombre illimité de projets, y compris le travail livré à un client.

Regardez la page Mes templates : choisissez le ZIP qui correspond au package que vous avez acheté.

À vérifier : le dossier extrait du package complet s’appelle learnio-lms, et il contient admin-dashboard, back-end, frontend et docker-compose.yml. Les packages à une seule application s’extraient dans un dossier à part, avec un Dockerfile, un package.json et un .env.example.

Étape 2 : Tout lancer avec Docker

Téléchargez le ZIP depuis Mes templates, décompressez-le et ouvrez un terminal dans le dossier learnio-lms. Docker étant lancé, démarrez les trois applications :

docker compose up --build

Le premier démarrage construit trois images et remplit la base de données avec des données de démonstration, il prend donc quelques minutes. Ensuite, le site étudiant est sur localhost:3030, l’administration sur localhost:3031 et l’API sur localhost:8000. Si un port est occupé, ajoutez SITE_PORT, ADMIN_PORT ou API_PORT dans un fichier .env à côté de docker-compose.yml et relancez la commande.

Trois comptes de démonstration vous montrent chaque côté : un étudiant (demo@learnio.com, mot de passe Demo@123), un super administrateur (admin@learnio.com, mot de passe Admin@123) et un formateur (emily-davis@learnio.com, mot de passe Teach@123). Connectez-vous avec chacun et explorez avant de rien modifier. Sans Docker, il vous faut Node.js 22 ou 24, corepack enable et un terminal par application, en commençant par l’API.

Cette capture montre le terminal ouvert dans le dossier extrait, l’endroit où toutes les commandes de ce guide supposent que vous vous trouvez.

Surveillez la sortie de la construction : trois images sont créées, et les deux frontends attendent que l’API se déclare en bonne santé.

L’administration tourne dans son propre terminal sur le port 3031 une fois l’API démarrée.

C’est la vue d’ensemble de l’administrateur que vous devez voir après connexion en super administrateur : des cartes et des graphiques pour la plateforme.

À vérifier : ouvrez localhost:8000/api/health, qui doit répondre avec un statut ok, puis connectez-vous à chaque application avec les comptes de démonstration. Si une page affiche un avis sur des données d’exemple, cette application n’a pas pu joindre l’API.

Ce qui se passe mal le plus souvent :

• Docker n’est pas lancé, ou un port est pris. Libérez le port 3030, 3031 ou 8000, ou définissez SITE_PORT, ADMIN_PORT ou API_PORT.
• Le premier démarrage semble bloqué. Il charge les données de démonstration, et les frontends ne démarrent que lorsque l’API est en bonne santé.
• Yarn indique la version 1.22. Lancez corepack enable et réinstallez.
• Un nouveau lancement sur une base de données que vous conservez ne réinitialise rien. docker compose down -v supprime le volume, et le démarrage suivant charge de nouvelles données de démonstration.

Étape 3 : Définir le nom, le logo et les couleurs de l’école

L’identité de marque vit dans des fichiers, et le site étudiant et l’administration en gardent des copies séparées, donc modifiez les deux :

• Site étudiant : src/config/site.ts contient le nom, la description et les comptes de réseaux sociaux. src/config/brand.config.ts nomme le tableau de bord étudiant.
• Administration : src/config/brand.config.ts contient le nom, le nom court, l’entreprise et l’adresse de base des métadonnées.
• Logos : remplacez public/assets/brand/learnio-wordmark.png et learnio-mark.png par vos propres PNG transparents, avec les mêmes noms.
• Couleurs : src/styles/theme-variables.css dans chaque application, avec les valeurs claires sous :root et les valeurs sombres sous .dark.

L’onglet App Settings de l’administration ne change pas l’identité des applications. Ses champs site_name et support_email ne modifient que les e-mails envoyés par l’API. Cherchez l’ancien nom dans les deux dossiers de messages, en anglais et en arabe, et définissez l’adresse publique du site dans NEXT_PUBLIC_SITE_URL.

À vérifier : changez le nom dans les deux applications, reconstruisez, et cherchez l’ancien nom sur les pages de connexion, dans le pied de page et dans l’onglet du navigateur, en anglais et en arabe. Remplacez aussi le favicon et les images de partage, car les aperçus de liens les utilisent.

Ce qui se passe mal le plus souvent : une seule des deux applications change d’identité, ou le logo est déformé parce que ses proportions diffèrent de la taille déclarée. Si votre visuel a une autre forme, mettez à jour la largeur et la hauteur déclarées là où la marque de la barre latérale et le composant du logo les fixent.

Étape 4 : Construire le premier cours

Ouvrez Courses dans l’administration et créez le cours d’introduction gratuit. Ajoutez des sections, puis des leçons à l’intérieur, et glissez pour réordonner. Une leçon peut être une vidéo, une lecture, un quiz ou un devoir. Joignez les fiches de travail comme ressources de la leçon, et laissez le cours en brouillon jusqu’à ce qu’il soit prêt. Seuls les cours publics publiés arrivent dans le catalogue.

Les titres, les descriptions et les leçons sont stockés une seule fois avec une valeur en anglais et une en arabe, et les éditeurs vous donnent un onglet pour chacune. Ledgerline rédige les deux avant de publier. Un cours gratuit a un prix de 0 et n’a besoin d’aucun prestataire de paiement.

Les envois (vidéo, documents, visuels de cours) vont dans un bucket Cloudflare R2 ou un autre compatible S3 dès que vous définissez les cinq variables R2_* dans back-end/.env. D’ici là, les fichiers d’exemple fournis avec la démo se lisent toujours, et seuls les nouveaux envois échouent.

Construisez-le dans cet ordre :

1. Créez le cours avec son titre, sa description, son prix et sa catégorie, dans les deux langues.
2. Ajoutez des sections, puis des leçons dans chaque section, en choisissant un type de leçon.
3. Joignez les fiches de travail et les documents aux leçons qui en ont besoin.
4. Marquez une leçon comme aperçu gratuit si vous voulez que les visiteurs voient un échantillon. Seules les leçons en aperçu gratuit exposent leur contenu et leur vidéo sur la page publique du cours.
5. Publiez le cours quand il est prêt. Jusque-là, il reste en brouillon et l’API publique répond « introuvable ».

Regardez comment les sections regroupent leurs leçons, chacune avec une poignée que l’on glisse pour changer l’ordre.

À vérifier : ouvrez la page publique du cours dans un autre navigateur. Elle doit afficher la présentation, le programme, le prix et l’action d’inscription. Connectez-vous ensuite avec l’étudiant de démonstration et ouvrez le lecteur de cours pour voir les leçons, les notes et les ressources.

Ce qui se passe mal le plus souvent : un cours est visible dans l’administration mais pas sur le site parce qu’il est encore en brouillon ou qu’il n’est pas public. Autre cas fréquent : un titre arabe manquant, qui fait que la page arabe retombe sur des champs vides.

Étape 5 : Ajouter des quiz, des devoirs et des certificats

Dans l’éditeur de quiz, ajoutez des questions et des options de réponse, puis fixez une note de passage et une limite de tentatives, ou autorisez des tentatives illimitées pour s’entraîner. Le serveur note chaque tentative, donc les étudiants ne peuvent pas modifier un score dans le navigateur. Les quiz obligatoires comptent pour terminer le cours.

Les devoirs apparaissent dans le calendrier de l’étudiant, où il rend son travail. Le formateur ouvre les rendus, enregistre une note et écrit un commentaire pour cet étudiant. Après chaque leçon terminée et chaque quiz réussi, l’API vérifie de nouveau si le cours est terminé. Quand il l’est, l’inscription est marquée comme terminée, un certificat est émis et l’étudiant reçoit une notification. N’importe qui peut alors vérifier un numéro de certificat sur /en/verify-certificate, sans compte.

Regardez le rendu en attente de correction : le formateur attribue une note et écrit un commentaire adressé à cet étudiant.

À vérifier : passez un quiz avec l’étudiant de démonstration, ratez-le exprès, puis réussissez-le. Vérifiez que la limite de tentatives vous arrête quand elle le doit. Rendez un devoir depuis le calendrier, corrigez-le en tant que formateur et cherchez la notification côté étudiant.

Ce qui se passe mal le plus souvent : un quiz obligatoire n’est pas réussi, donc le certificat n’est pas prêt, et l’étudiant en est informé. Vérifiez aussi que la note de passage est un chiffre que les questions permettent réellement d’atteindre.

Étape 6 : Encaisser des paiements en mode test

Par défaut, le paiement utilise un simulateur intégré. Il ne contacte aucun prestataire et ne débite personne, et un numéro de carte qui se termine par 0 est refusé, ce qui permet de répéter un paiement échoué. Faites d’abord un achat complet ainsi, avec l’étudiant de démonstration.

Pour passer à Stripe, créez des clés de test dans votre compte Stripe et placez STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY et STRIPE_WEBHOOK_SECRET dans back-end/.env. Ajoutez ensuite dans Stripe un endpoint de webhook qui pointe vers l’adresse de votre API suivie de /api/webhooks/payments/stripe. Un étudiant est inscrit quand le webhook confirme le paiement, pas quand il revient sur le site. Sans le webhook, les commandes restent en attente.

PayPal a ses propres clés : PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET, PAYPAL_WEBHOOK_ID et PAYPAL_ENV. Lisez l’avertissement dans la section sur les erreurs plus bas avant de passer en production.

Voici le paiement tel que le voit un étudiant : choisir carte ou PayPal, et le formulaire s’adapte à la méthode choisie.

À vérifier : achetez un cours payant de trois façons. D’abord avec le simulateur, pour confirmer que la place apparaît. Ensuite, refusez un paiement avec un numéro de carte qui se termine par 0 et vérifiez qu’aucune place n’est accordée. Puis, une fois les clés de test Stripe en place, achetez de nouveau et vérifiez que la commande passe d’en attente à payée après l’arrivée du webhook. La page des commandes dans l’administration montre chaque commande avec son cours, sa méthode et son statut.

Ce qui se passe mal le plus souvent :

• La commande reste en attente. L’adresse de l’endpoint du webhook est fausse, ou STRIPE_WEBHOOK_SECRET ne correspond pas à cet endpoint.
• Un visiteur non connecté clique sur payer et il est renvoyé vers la connexion. Payer demande un compte étudiant.
• Le mauvais prestataire traite un test. Une méthode sans clés lance quand même le simulateur.

Étape 7 : Configurer les cours en direct

Les cours en direct tournent sur un serveur Jitsi Meet que vous hébergez. Le template n’en inclut pas, et le coût d’hébergement est à votre charge. Sans lui, le calendrier affiche les cours en direct comme indisponibles. Placez les informations du serveur dans back-end/.env (le fichier d’exemple liste les variables), et l’API émet les jetons qui permettent aux étudiants et aux formateurs d’entrer dans la salle.

Un formateur programme une session depuis le tableau de bord, et elle apparaît dans le calendrier du cours à côté des échéances des devoirs. Les étudiants l’ouvrent depuis /en/dashboard/calendar. La salle s’ouvre peu avant l’heure de début, avec d’abord un écran de pré-connexion, et le formateur dispose des contrôles d’animateur. Ledgerline programme une session par semaine et par promotion.

Regardez comment les sessions en direct et les échéances des devoirs partagent un seul calendrier, pour que l’étudiant voie toute sa semaine au même endroit.

À vérifier : programmez une session en tant que formateur, puis ouvrez le calendrier de l’étudiant et vérifiez que le cours apparaît. Ouvrez la page du cours près de son heure de début et vérifiez que la salle devient disponible.

Ce qui se passe mal le plus souvent : le calendrier marque les cours comme indisponibles parce qu’aucun serveur de réunion n’est configuré, ou la salle est ouverte trop tôt. La salle s’ouvre peu avant le cours, pas au moment où il est programmé.

Étape 8 : Ajouter des formateurs avec les bonnes limites

Les étudiants et le personnel se connectent à des endpoints différents et reçoivent des jetons que seules leurs propres routes acceptent. Le seed crée six rôles de personnel : Super Admin, Admin, Manager, Editor, Viewer et Instructor. Le rôle Instructor couvre les cours en direct, les devoirs, le programme et la modification des cours, plus la lecture des étudiants, des inscriptions et des avis.

Le détail essentiel est le lien entre un compte d’administration et un profil de formateur. Un compte lié est aussi limité à ses propres cours : il ne voit que ces cours et leurs étudiants, et toute tentative d’écriture ailleurs reçoit une erreur 403. Le compte emily-davis@learnio.com du seed montre la configuration. Ledgerline crée ses deux formateurs ainsi, et garde le super administrateur pour le propriétaire.

À vérifier : connectez-vous en tant que formateur et vérifiez que la liste des cours ne montre que les cours de ce formateur. Essayez ensuite de modifier le cours d’un autre formateur et vérifiez que la modification est refusée.

Ce qui se passe mal le plus souvent : un formateur voit trop de choses parce que son compte n’est pas lié à un profil de formateur. Ou l’inverse : un enseignant ne peut pas créer de leçons parce que le rôle n’a pas la permission sur le programme. Modifiez le rôle sur l’écran des rôles et le changement atteint le personnel connecté.

Étape 9 : Connecter l’e-mail et, si vous le voulez, l’assistant IA

Les liens de vérification, les réinitialisations de mot de passe, les reçus et les confirmations d’inscription partent par Resend, en anglais et en arabe. Placez votre RESEND_API_KEY dans back-end/.env et vérifiez un domaine d’envoi chez Resend. Sans clé, rien ne casse : chaque message est affiché dans le journal de l’API, ce qui est pratique pendant les tests.

Le tableau de bord d’administration comporte aussi un assistant IA. Il peut chercher des cours, des formateurs et des inscriptions, transformer une seule demande en brouillon de cours, y compris le titre et la description en arabe, programmer des cours et tracer des graphiques d’inscriptions. Il fonctionne avec une clé Google, OpenAI ou DeepSeek que vous payez. Sans clé dans back-end/.env, il en demande une à l’administrateur dans le navigateur. Considérez ce qu’il crée comme un brouillon et relisez-le avant de publier.

Le chat montre une seule demande transformée en brouillon de cours, qu’un administrateur relit et modifie comme n’importe quel autre cours.

À vérifier : déclenchez un reçu en achetant un cours payant, puis regardez votre boîte de réception. Demandez à l’assistant un petit brouillon de cours et ouvrez le résultat dans l’éditeur de cours pour vérifier que les deux langues ont été remplies.

Ce qui se passe mal le plus souvent : l’e-mail ne va nulle part parce que la clé manque ou que le domaine n’est pas vérifié. Tant qu’il n’y a pas de clé, les messages apparaissent dans le journal de l’API. De plus, l’assistant ne fonctionne pas avec les données d’exemple hors ligne de l’administration.

Étape 10 : Passer en production

1. Générez un secret avec node -e "console.log(require('crypto').randomBytes(48).toString('hex'))" et utilisez-le comme JWT_SECRET.
2. Dans back-end/.env, définissez NODE_ENV=production, CORS_ORIGIN (listez les adresses des deux frontends, séparées par des virgules) et FRONTEND_URL (le site étudiant).
3. Dans le .env de chaque frontend, définissez NEXT_PUBLIC_API_BASE_URL avec /api à la fin, définissez NEXT_PUBLIC_SITE_URL avec le vrai domaine, et reconstruisez. Ces valeurs sont compilées dans l’application.
4. Définissez NEXT_PUBLIC_WEBSOCKET_BASE_URL dans l’administration pour que les notifications en direct fonctionnent.
5. Si vous utilisez R2, ajoutez l’hôte public de votre bucket comme NEXT_PUBLIC_MEDIA_HOSTNAME (ou MEDIA_HOSTNAME avec Compose) et reconstruisez.
6. Changez les mots de passe de démonstration publiés, ou partez de tables vides.

Pour MySQL, créez une base de données vide, définissez le pilote et la connexion dans back-end/.env, et lancez yarn seed. Sur un site en production, yarn db:sync crée les tables sans écrire aucune ligne.

À vérifier après la mise en production : faites un vrai achat de test avec un petit montant ou un cours avec réduction, regardez la commande se régler, vérifiez que l’e-mail d’inscription arrive, et vérifiez que la page du certificat s’ouvre pour quelqu’un qui n’est pas connecté.

Ce qui se passe mal le plus souvent :

• L’API refuse de démarrer avec un JWT_SECRET d’exemple ou un CORS_ORIGIN vide, et affiche ce qu’il faut corriger.
• Un frontend affiche encore l’avis de données d’exemple, parce que son adresse d’API manquait au moment de la construction.
• Le paiement refuse un achat fait depuis une page dans une langue que l’API ne liste pas. Ajoutez la langue des deux côtés avant de l’ouvrir.

Le quotidien

Après le lancement, l’équipe de Ledgerline travaille depuis une poignée d’écrans.

Surveiller la plateforme

La vue d’ensemble montre des cartes et des graphiques pour la plateforme. Les administrateurs reçoivent aussi des notifications quand un étudiant obtient une place, termine un cours, laisse un avis, s’inscrit, ou quand un cours est publié. Un formateur n’est informé que pour ses propres cours.

Corriger et répondre

Les formateurs ouvrent les rendus en attente de correction, enregistrent une note et laissent un commentaire. Étudiants et formateurs gardent une conversation par cours, avec historique, images en pièces jointes et indicateur de messages non lus.

Suivre les commandes

Chaque commande a un statut parmi en attente, payée, échouée ou remboursée, et une passerelle qui nomme le prestataire, le simulateur intégré ou un cours gratuit. Les chiffres de revenus laissent de côté les commandes gratuites dans le panier moyen, pour qu’un cours d’introduction gratuit ne le tire pas vers le bas. Si vous devez ajouter une place payée ailleurs, un administrateur peut l’enregistrer à la main.

Une page de commande comme celle-ci montre le cours, le moyen de paiement et le statut du paiement au même endroit.

Modérer les avis

Les avis passent par publié, en attente et masqué. Si vous mettez reviews_require_approval à true, les nouveaux avis restent en attente jusqu’à ce que quelqu’un ayant les droits de modération les publie. Chaque changement met à jour la note du cours et celle du formateur.

Les personnes et les corbeilles

Supprimer un étudiant, un formateur, un cours, une catégorie, un avis ou un article le déplace dans une corbeille où on peut le restaurer, donc une erreur n’est pas définitive.

Un exemple de plan de lancement semaine par semaine

Ce calendrier est un exemple pour Ledgerline, pas une promesse sur la durée de votre propre lancement.

• Semaine 1, comprendre. Lancez l’ensemble, connectez-vous avec chaque rôle et arrêtez la liste des décisions.
• Semaine 2, identité et premier cours. Changez l’identité des deux applications et construisez le cours d’introduction gratuit dans les deux langues.
• Semaine 3, évaluation et paiements. Ajoutez les quiz, les devoirs et les certificats, puis testez des achats avec le simulateur et avec les clés de test Stripe.
• Semaine 4, cours en direct et personnel. Montez le serveur de réunion, créez les comptes de formateur et faites un cours d’essai avec des collègues.
• Semaine 5, production. Définissez l’environnement de production, connectez l’e-mail, reconstruisez les frontends et faites un vrai achat.
• Semaine 6, lancement en douceur. Ouvrez d’abord le cours gratuit, puis les cours payants.

Liste de contrôle du lancement

• Noms, logos, icônes et couleurs remplacés dans les deux applications, plus les images de partage.
• Cours publiés dans les deux langues, avec les prix définis.
• Les quiz ont des notes de passage atteignables, et les quiz obligatoires sont marqués.
• Stripe et PayPal configurés tous les deux, avec les abonnements aux webhooks en place.
• Un vrai achat de test terminé et un e-mail d’inscription reçu.
• Serveur de réunion en marche et un cours d’essai donné.
• Comptes de formateur liés aux profils de formateur et testés.
• JWT_SECRET, CORS_ORIGIN et FRONTEND_URL définis pour la production.
• Adresses d’API des frontends, adresse du site et hôte des médias définis, puis reconstruits.
• Mots de passe de démonstration publiés changés ou supprimés.
• Domaine Resend vérifié.
• Sauvegardes prévues pour la base de données et le bucket de médias.
• Pages de confidentialité et de conditions relues pour votre propre activité.

Template, développement from scratch ou plateforme de cours hébergée

Une plateforme de cours hébergée

Vous pouvez avoir une école en ligne rapidement, avec l’hébergement, la vidéo et les paiements pris en charge pour vous. Le prix, ce sont des frais récurrents, des limites sur la mise en page et le fonctionnement, et les données de vos étudiants sur le système de quelqu’un d’autre. C’est un bon choix quand vous voulez enseigner et que vous n’avez pas besoin d’un comportement sur mesure.

Tout construire from scratch

Vous décidez de tout. Vous construisez aussi les comptes pour deux publics, un éditeur de programme, un lecteur de leçons, des quiz, la correction, des certificats, un paiement avec webhooks, l’e-mail, des jetons de cours en direct et deux langues avant de donner votre première leçon.

Partir d’un template

Vous obtenez ces éléments déjà reliés entre eux, avec un code source qui vous appartient et que vous pouvez modifier. Vous l’hébergez, vous le mettez à jour et vous comblez les manques que ce guide nomme : un serveur de réunion, vos propres comptes de paiement, un domaine de messagerie. Cela convient à une école qui veut sa propre marque et ses propres règles, ou à une agence qui construit la plateforme pour un client.

Ce que coûte l’exploitation

Les packages Learnio commencent à $79 pour une seule application, et le package Full Stack que Ledgerline utilise coûte $179. Il est livré avec une licence commerciale et un support à vie. Le reste dépend de ce que vous activez :

• L’hébergement des trois applications, et une base de données si vous quittez SQLite.
• Stripe et PayPal facturent leurs propres frais de traitement. Consultez la page de tarifs de Stripe et la page des frais pour les marchands de PayPal.
• Resend pour l’e-mail, plus un domaine que vous pouvez vérifier.
• Un serveur Jitsi Meet pour les cours en direct, avec son propre coût d’hébergement.
• Un bucket compatible S3 comme Cloudflare R2 pour les vidéos et les fichiers.
• Une clé IA, seulement si vous utilisez l’assistant.

Le travail en local est gratuit. SQLite n’a pas besoin de serveur de base de données, le simulateur de paiement ne débite personne et les cours gratuits n’ont jamais besoin d’un prestataire.

Quoi personnaliser ensuite

• Catégories et catalogue. Définissez la taille de page du catalogue avec le réglage courses_per_page.
• Modération des avis. Mettez reviews_require_approval à true pour que les nouveaux avis attendent un modérateur.
• Blog. L’administration a un éditeur de blog, et le site étudiant publie les articles. C’est une façon discrète d’attirer du trafic de recherche.
• Langue par défaut. Ouvrez en arabe en mettant defaultLocale à ar.
• Une troisième langue. Ajoutez un locale à chaque application et à l’API. Le contenu des cours contient exactement deux langues.
• Rôles. Modifiez ce que chaque rôle peut faire sur l’écran des rôles et le changement atteint le personnel connecté.

Erreurs courantes

Oublier le webhook

Si des étudiants paient et que rien ne se passe, le webhook est la première chose à vérifier. L’inscription suit la confirmation du prestataire, donc un abonnement manquant laisse les commandes en attente.

Configurer Stripe mais pas PayPal

Le paiement propose toujours la carte et PayPal. Une commande payée avec une méthode sans clés utilise le simulateur et se termine sans débiter personne. Configurez les deux avant d’accepter de vraies commandes.

Attendre des cours en direct sans serveur de réunion

Le template fournit la programmation, les jetons et les écrans de la salle. Le serveur de réunion, c’est à vous de le faire tourner. Sans serveur, le calendrier marque les cours comme indisponibles.

Images de cours cassées après la connexion d’un bucket

Un frontend n’affiche des images que depuis les hôtes qui étaient listés lors de sa construction. Ajoutez l’hôte public de votre bucket, sans https://, et reconstruisez.

Prendre App Settings pour un changement d’identité

L’onglet ne change que les e-mails. Les noms, les logos et les couleurs viennent de fichiers dans chaque application.

FAQ

Comment créer un LMS avec Next.js ?

Partez d’un template qui couvre déjà les cours, la progression, l’évaluation et le paiement, puis adaptez l’identité et le contenu. Learnio vous donne un site étudiant Next.js 16, un tableau de bord d’administration et une API NestJS qui fonctionnent déjà ensemble.

Prend-il en charge les cours en direct ?

Oui, sur un serveur Jitsi Meet que vous hébergez. Étudiants et formateurs rejoignent la salle dans la plateforme, depuis un calendrier de cours qui montre aussi les échéances.

Puis-je l’utiliser pour des clients ?

Oui. La licence couvre un nombre illimité de projets, y compris ceux que vous remettez à un client. Vous ne pouvez pas revendre le code source ni le publier comme template.

Prend-il en charge l’arabe et le RTL ?

Oui. Les trois applications sont livrées en anglais et en arabe, et l’arabe s’affiche de droite à gauche. Le contenu des cours se saisit dans les deux langues.

Ai-je besoin d’un backend ?

Pour une vraie école, oui. Les frontends peuvent fonctionner seuls sur des données d’exemple, mais les comptes, les paiements et la progression demandent l’API, qui est fournie dans les packages Full Stack et Backend API.

Puis-je vendre des cours avec PayPal en plus de Stripe ?

Le template inclut le code d’intégration PayPal et une route de webhook PayPal à côté de celle de Stripe. Les deux demandent vos propres comptes et vos propres clés.

Puis-je proposer des cours gratuits ?

Oui. Un cours à 0 inscrit l’étudiant immédiatement et n’atteint jamais un prestataire de paiement.

Les formateurs peuvent-ils ne voir que leurs propres cours ?

Oui. Un compte lié à un profil de formateur est limité aux cours de ce formateur et à ses étudiants, et les écritures en dehors sont refusées.

Que se passe-t-il quand un paiement échoue ou est remboursé ?

Les événements du webhook du prestataire règlent, font échouer ou remboursent la commande. La place n’est créée que lorsque le paiement est confirmé, donc un paiement échoué n’en accorde jamais.

Puis-je ajouter une autre langue ?

Oui, pour l’interface. Ajoutez le code à la liste des locales du site étudiant, aux listes de l’administration et à la liste des langues prises en charge par l’API, puis traduisez les fichiers de messages. Le contenu des cours ne contient que l’anglais et l’arabe.

Essayez par vous-même

Ouvrez la démo du site web étudiant et la démo de l’administration et de l’espace formateur. Lisez ensuite la documentation de Learnio ou visitez la page produit de Learnio. D’autres options se trouvent dans la catégorie des templates éducation et LMS et dans le guide des meilleurs templates Next.js.

Learnio fait aussi partie des dix templates du pack de templates Next.js.