Construire une plateforme de masterclass Next.js/Supabase avec email gate
Un site qui montre tout à tout le monde est joli, mais il ne vous rapporte rien. Le visiteur lit, repart, et vous ne saurez jamais qui il était. Le contenu n'a de valeur pour votre business que s'il vous laisse un contact : sans adresse mail, votre meilleur article est juste de la lecture gratuite pour un inconnu.
À la fin de cette masterclass, vous saurez faire construire votre plateforme par un assistant IA : les trois pièces d'un site moderne, un classeur bien rangé avec une serrure sur chaque tiroir, et la porte d'entrée qui capture les adresses mail. Vous pourrez lancer votre propre chantier cette semaine.
Ce que cet exercice ne peut pas casser
L'exercice se fait sur une feuille : vous ne touchez à aucun code, vous ne cassez rien. Et le prompt lui-même impose une sécurité : l'assistant IA propose d'abord son plan en quelques lignes, attend votre feu vert avant de coder, et ne travaille que sur les pages de contenu, jamais sur le reste du site.
Ce que vous saurez faire à la fin
- Nommer les trois pièces de votre future plateforme (les pages, le classeur, l'hébergement) pour les commander à un assistant IA sans vous perdre.
- Exiger une base de données claire : peu de tiroirs, les bons, et une serrure sur chacun.
- Poser une porte d'entrée qui montre un extrait gratuit, puis demande l'adresse mail avant de livrer la suite.
- Niveau membre· le prompt prêt à coller qui pose la porte d'entrée email sur toutes vos pages de contenu.
- Niveau Pro· je pose la porte avec vous, dans sa version complète, sur tout votre catalogue d'un coup.
Chaque page de contenu suit le même chemin : un appât honnête, une porte, un contact gagné.
Les trois pièces, dans le bon ordre
L'ordre compte autant que les pièces. D'abord on bâtit une plateforme propre, avec un classeur bien rangé et une serrure sur chaque tiroir. Ensuite, et seulement ensuite, on pose la porte d'entrée. Si le classeur est mal rangé au départ, poser la porte devient un cauchemar. Si le classeur est clair, la porte se pose en une étape.
1Le trio d'un site modernedoute : « par où commencer sans me perdre ? »
Un assistant IA construit bien quand vous savez quoi lui demander. Si vous nommez les trois morceaux, il sait exactement quoi poser ; si vous restez flou, il devine, et il devine mal. Retenez le trio. Un, les pages : Next.js, c'est juste l'outil qui fabrique les pages que vos visiteurs voient. Deux, la base de données : le grand classeur en ligne où vit votre contenu (le mien s'appelle Supabase). Trois, l'hébergement : l'endroit qui rend votre site visible sur internet (j'ai pris Cloudflare, qui publie une nouvelle version à chaque sauvegarde). Ces trois outils ont une version gratuite pour démarrer, ce qui suffit largement au début.
2Le classeur bien rangé (la base de données)doute : « le mot base de données me fait peur »
C'est la colonne vertébrale de votre site. Un classeur mal pensé au départ, et tout le reste tremble ; un classeur clair, et vous ajoutez des pages et des membres sans jamais tout casser. Demandez à votre assistant IA un classeur avec peu de tiroirs, mais les bons. Pour ma plateforme, il en a posé trois : un pour les membres (qui est inscrit), un pour le contenu visible, un pour le contenu réservé. Et sur chaque tiroir, une serrure : on appelle ça le RLS, une règle qui dit que cette ligne, seul son propriétaire peut la lire. Sans serrure, n'importe qui pourrait lire les adresses mail de vos membres. Cette serrure n'est pas une option, c'est le minimum.
3La porte d'entrée (l'email gate)doute : « et si je faisais fuir mes lecteurs ? »
C'est la pièce qui transforme votre site en outil de business. Sans elle, vous offrez tout sans rien recevoir ; avec elle, chaque lecteur intéressé vous laisse un moyen de le recontacter. Sur chaque page de contenu, vous coupez le texte en deux. La première partie, l'extrait, reste visible par tout le monde : c'est l'appât honnête, il donne envie. La deuxième partie, le cœur, est cachée derrière la porte. Quand le visiteur veut lire la suite, un petit formulaire apparaît : son adresse mail, et c'est tout. Une fois donnée, la suite se débloque. C'est exactement ce que j'ai posé sur asknadir.com : un extrait public, puis une adresse mail obligatoire pour le contenu complet.
À vous de jouer : cadrez votre chantier
Prenez une feuille. Tout se prépare à la main, avant de coller quoi que ce soit à un assistant IA.
Le résultat, en 30 secondes
Voici, neutralisé, ce que donne la porte une fois posée. Imaginons une formatrice en finance personnelle qui publie des fiches sur son site.
Une visiteuse arrive sur la fiche « Préparer son premier budget ». Elle lit l'introduction et les deux premiers conseils : c'est l'extrait public. Au troisième conseil, le texte s'arrête et un encart apparaît : « Entrez votre adresse mail pour lire la suite. » Elle laisse son adresse, la fiche complète se débloque aussitôt. En coulisses, son adresse est rangée dans le tiroir des membres. La prochaine fois qu'elle revient, le site la reconnaît : plus besoin de redemander. La formatrice n'a rien fait à la main. La porte travaille pour elle, sur chaque fiche, jour et nuit.
Le prompt prêt à coller
Tu es mon assistant développeur. Ma plateforme affiche des pages de contenu (articles, fiches, cours). Aujourd'hui, tout le contenu est visible par n'importe quel visiteur anonyme. Je veux poser une porte d'entrée qui capture l'adresse mail. Voici comment doit se comporter chaque page de contenu : - Un visiteur anonyme voit seulement un extrait (la partie « aperçu » du contenu). - Sous l'extrait, un petit formulaire demande son adresse mail pour lire la suite. - S'il n'y a pas d'extrait défini pour une page, coupe automatiquement le contenu complet et n'en montre qu'une petite partie, puis affiche le formulaire.
Le prompt décrit la porte exacte à votre assistant IA : l'extrait visible par tous, le formulaire d'adresse mail, le contenu complet jamais envoyé au navigateur d'un anonyme, et le visiteur reconnu à ses prochaines visites. Avec le garde-fou intégré : l'assistant propose son plan et attend votre feu vert avant de coder. Laissez votre email, je vous l'envoie pour lancer votre chantier.
Vérifiez que c'est à vous
Une coach veut sa plateforme. Son assistant IA propose de poser d'abord la porte d'entrée email, et de ranger la base de données plus tard, « quand il y aura plus de contenu ». Que lui répondez-vous ?
D'abord avec vos mots, sans regarder les options :
Expliquez-le pour l'ancrer
Expliquez en une phrase, à un confrère qui n'y connaît rien, pourquoi une porte d'entrée email transforme un site vitrine en outil de business. Si vous savez le dire sans jargon, c'est acquis.
Ce que vous savez faire maintenant
- Nommer les trois morceaux d'un site moderne pour les commander à un assistant IA : les pages, le classeur, l'hébergement.
- Exiger un classeur avec peu de tiroirs et la serrure RLS sur chacun, parce que la protection des adresses mail n'est pas une option.
- Couper chaque contenu en deux : un extrait public qui donne envie, un cœur réservé livré contre une adresse mail.
Une adresse mail, c'est une porte ouverte. Sans elle, votre meilleur article est juste de la lecture gratuite pour un inconnu.
Continuez seul
Votre chantier est cadré. Étape suivante du parcours :
Mettre son site Next.js en ligne sans facture serveur (Cloudflare) →Faites-le avec moi
La version complète tourne sur asknadir.com : la porte crée le compte toute seule, envoie un lien d'accès magique, range le contact dans la liste de mails et se souvient du visiteur pendant un an entier. Je la pose avec vous sur tout votre catalogue d'un coup.