Construire une plateforme de masterclass Next.js/Supabase avec email gate

Un matin d'avril, je n'avais pas de site pour héberger mon savoir. Le soir même, j'avais une vraie plateforme en ligne, avec ses pages, son espace membre et sa base de données. En une seule journée.

Quelques semaines plus tard, j'ai ajouté la pièce qui change tout : une porte d'entrée. Avant, un visiteur de passage pouvait lire tout mon contenu sans rien laisser. Après, il voit un extrait, il donne son adresse mail, et là seulement il accède à la suite.

Je vais être honnête avec vous : je ne suis pas développeur de métier. Je n'ai pas écrit ce site à la main. J'ai piloté un assistant IA qui code, étape par étape, dans le bon ordre. Le résultat tourne aujourd'hui sur asknadir.com.

C'est tout l'objet de cet épisode. Pas un cours d'informatique. Une méthode pour bâtir votre propre plateforme, puis pour la transformer en machine à récolter des adresses mail, même si vous n'avez jamais codé.

Ce que vous saurez faire à la fin :

• Faire construire par un assistant IA une plateforme web simple : des pages, un espace membre, une base de données pour ranger votre contenu.
• Comprendre les trois grands morceaux d'un site moderne (les pages, la base de données, l'hébergement) sans jargon.
• Mettre en place une porte d'entrée : on montre un extrait gratuit, et on demande l'adresse mail pour la suite.
• (Niveau membre) Le texte exact à coller à votre assistant IA pour qu'il pose cette porte d'entrée sur votre contenu.
• (Niveau Pro) Ma façon réelle de l'avoir branchée, avec création de compte automatique, lien d'accès magique et un petit mouchard qui se souvient du visiteur pendant un an.

Le secret tient en trois pièces. Les voici, en clair, tout de suite :

1. Le trio d'un site moderne. Tout site se résume à trois morceaux. Un, les pages que l'on voit (je vous expliquerai le mot Next.js, c'est juste l'outil qui fabrique ces pages). Deux, la base de données, c'est-à-dire le grand classeur où vit votre contenu (le mien s'appelle Supabase). Trois, l'hébergement, l'endroit qui met le site en ligne pour le monde entier (j'ai choisi Cloudflare). Vous décidez de ces trois choix une fois, et votre assistant IA monte le reste.

2. Le bon classeur, bien rangé. Pour ma plateforme, tout tient dans trois tiroirs : un pour les membres, un pour le contenu, un pour le contenu réservé. Et une serrure sur chaque tiroir, pour que personne ne lise ce qui ne le regarde pas. Un classeur clair dès le départ, c'est un site qui ne s'écroule pas plus tard.

3. La porte d'entrée (l'email gate). Petit mot anglais, mais simple : un email gate, c'est juste une barrière qui montre un extrait gratuit, puis demande l'adresse mail avant de livrer la suite. Le visiteur curieux devient un contact. C'est la pièce qui transforme un beau site en outil qui fait grandir votre liste de mails.

On commence tout de suite (gratuit).

Avant de toucher au moindre bouton, faites une seule chose : posez vos trois choix sur une feuille. Un, où vivront mes pages ? Deux, dans quel classeur je range mon contenu ? Trois, qui met mon site en ligne ? Vous pouvez reprendre les miens tels quels : des pages avec Next.js, un classeur Supabase, un hébergement Cloudflare. Tant que ces trois cases ne sont pas remplies, on ne lance rien.

Pourquoi cet ordre ? Parce que la plupart des gens ouvrent leur assistant IA et disent « fais-moi un site », sans rien décider. L'assistant part dans tous les sens, et au bout de trois heures, plus rien ne tient debout. Vous, vous allez décider d'abord, construire ensuite. La suite vous montre comment faire poser la base de données bien rangée, puis comment installer la porte d'entrée qui capture les adresses mail.