Ce chapitre te guide pas à pas pour configurer toute l'infrastructure d'un SaaS moderne. Pour chaque service : ce que c'est, comment le configurer, et combien ça coûte. Temps de lecture : 15 minutes.
Vue d'ensemble
Un SaaS moderne typique utilise 7 à 8 services :
- Supabase : base de données + authentification + stockage 2. Vercel : hébergement et déploiement 3. Nom de domaine : l'adresse de ton app (Namecheap, OVH, etc.) 4. Stripe : paiements et abonnements 5. Resend : emails transactionnels 6. Upstash : rate limiting (anti-abus) 7. Anthropic : IA générative (si ton app utilise l'IA) 8. Sentry : monitoring des erreurs en production
La bonne nouvelle : tous ont un plan gratuit suffisant pour développer. Tu ne paies qu'au moment de passer en production avec de vrais utilisateurs.
Prérequis : Docker et Node.js
Avant de configurer les services, tu auras besoin de deux outils sur ta machine.
Docker (pour la base de données locale)
Docker te permet de faire tourner une base de données Supabase sur ton ordinateur pendant le développement. Tu ne touches jamais aux données de production.
Sur macOS :
- Télécharge Docker Desktop sur docker.com/products/docker-desktop, c'est gratuit pour un usage individuel
- Installe-le comme n'importe quelle application
- Lance Docker Desktop, il tourne en tâche de fond (icône de baleine 🐳 dans la barre de menu)
Sur Windows :
- Télécharge Docker Desktop sur docker.com/products/docker-desktop
- L'installeur activera WSL 2 (Windows Subsystem for Linux) si nécessaire, accepte
- Redémarre si demandé, puis lance Docker Desktop
Vérifie que Docker tourne :
docker --version
Docker Desktop utilise de la RAM (2-4 Go). Si ton ordinateur a moins de 8 Go de RAM, ça peut ralentir. Tu peux fermer Docker quand tu ne développes pas.
Node.js (pour les outils de développement)
Node.js fait tourner les outils du projet (le serveur de dev Next.js, les migrations Supabase, etc.). Ce n'est pas nécessaire pour Claude Code lui-même, mais c'est indispensable dès que tu travailles sur un vrai projet.
Sur macOS : ouvre le Terminal et colle :
curl -fsSL https://fnm.vercel.app/install | bash && fnm install 22
Ferme et rouvre le Terminal, puis vérifie :
node --version
Tu dois voir v22.x.x.
Sur Windows :
- Va sur nodejs.org
- Télécharge l'installeur LTS
- Lance l'installeur, coche "Add to PATH" quand on te le demande
- Ouvre PowerShell et tape
node --version
Erreur fréquente sur Windows : si node --version ne fonctionne pas après
l'installation, redémarre ton ordinateur. Le PATH a besoin d'un redémarrage
pour être pris en compte.
1. Supabase, base de données, Auth, Storage
Ce que c'est : ta base de données PostgreSQL, ton système d'authentification (login, register, OAuth), et ton stockage de fichiers. Tout en un, avec une interface d'administration web.
Étapes d'installation
- Crée un compte sur supabase.com
- Crée un nouveau projet (choisis la région
eu-westpour la France) - Note l'URL et les clés API (Dashboard → Settings → API)
- En local, installe le CLI :
npx supabase initpuisnpx supabase start(Docker doit tourner)
Variables d'environnement
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...
Pricing
| Plan | Prix | Limites | Pour qui |
|---|---|---|---|
| Free | 0$/mois | 500 Mo stockage, 50K utilisateurs, 2 projets | Développement |
| Pro | 25$/mois | 8 Go stockage, 100K utilisateurs, backups quotidiens | Production |
Piège : le plan Free pause automatiquement ton projet après 7 jours sans activité. Tes utilisateurs ne pourront plus se connecter. Passe en Pro dès que tu as des vrais utilisateurs.
2. Vercel, hébergement et déploiement
Ce que c'est : l'hébergeur qui fait tourner ton app Next.js. Chaque git push déclenche un déploiement automatique. Zéro configuration serveur.
Étapes d'installation
- Crée un compte sur vercel.com (connexion via GitHub)
- Clique "New Project" et importe ton repository GitHub
- Vercel détecte automatiquement que c'est du Next.js
- Ajoute tes variables d'environnement dans Settings → Environment Variables
- Premier déploiement automatique en 2 minutes
Fonctionnalités clés
- Deploy Preview : chaque Pull Request a sa propre URL de prévisualisation
- Cron Jobs : tâches planifiées (envoi d'emails, synchro, rappels) définies dans
vercel.json - Analytics : métriques de performance Web Vitals
Pricing
| Plan | Prix | Limites | Pour qui |
|---|---|---|---|
| Hobby | 0$/mois | 1 projet perso, fonctions jusqu'à 60s, 1 cron/jour max | Tester |
| Pro | 20$/mois | Projets illimités, fonctions jusqu'à 300s (800s avec Fluid Compute), crons illimités | Production |
3. Nom de domaine
Ce que c'est : l'adresse de ton app (ex: monapp.com). Tu peux l'acheter chez n'importe quel registrar.
Étapes
- Choisis un registrar : Namecheap, OVH, Google Domains, Gandi...
- Cherche et achète ton nom de domaine
- Dans Vercel : Settings → Domains → ajoute ton domaine
- Copie les DNS fournis par Vercel chez ton registrar
- Attends 24-48h pour la propagation DNS
Pricing
- .com : environ 10€/an (première année souvent en promo à 7€)
- .fr : environ 10-12€/an
- .app : environ 15€/an
- WhoisGuard (protection vie privée) : gratuit chez Namecheap
4. Stripe, paiements
Ce que c'est : la plateforme de paiement qui gère tes abonnements. Pas d'abonnement mensuel, Stripe prend une commission uniquement quand quelqu'un paie.
Étapes d'installation
- Crée un compte sur stripe.com
- Active le mode Test d'abord (Dashboard → bascule "Test mode")
- Crée tes produits et prix (Products → Add product)
- Récupère tes clés API (Developers → API keys)
- Configure le webhook : Developers → Webhooks → ajoute ton URL +
/api/webhooks/stripe - En local :
stripe listen --forward-to localhost:3000/api/webhooks/stripe
Variables d'environnement
STRIPE_SECRET_KEY=sk_test_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx
STRIPE_PRICE_PRO_MONTHLY=price_xxx
Pricing
| Type | Coût |
|---|---|
| Abonnement Stripe | 0$, gratuit tant que personne ne paie |
| Commission par paiement (Europe) | 1,4% + 0,25€ par transaction |
| Stripe Billing (abonnements) | +0,7% du volume facturé |
Coût réel : si tu as 10 clients Pro à 29€/mois, Stripe te prend environ 4,50€/mois au total. C'est négligeable.
5. Resend, emails transactionnels
Ce que c'est : le service qui envoie tes emails automatiques (bienvenue, rappels, récaps hebdomadaires). Interface moderne, intégration facile avec React Email.
Étapes d'installation
- Crée un compte sur resend.com
- Ajoute ton domaine : Settings → Domains → Add domain
- Configure 3 enregistrements DNS chez ton registrar
- Vérifie le domaine (quelques minutes)
- Récupère ta clé API : API Keys → Create
Variable d'environnement
RESEND_API_KEY=re_xxx
Pricing
| Plan | Prix | Limites |
|---|---|---|
| Free | 0$/mois | 3 000 emails/mois, 1 jour de rétention des logs |
| Pro | 20$/mois | 50 000 emails/mois, analytics complètes |
3 000 emails/mois gratuits = largement suffisant pour démarrer. Même avec 100 utilisateurs actifs, tu restes dans le quota gratuit.
6. Upstash, rate limiting (anti-abus)
Ce que c'est : un Redis serverless qui empêche les abus. Sans lui, un utilisateur pourrait spammer ton API d'IA et te coûter des centaines de dollars en tokens.
Étapes d'installation
- Crée un compte sur upstash.com
- Crée une base Redis (région :
eu-west-1) - Récupère l'URL et le token (Database → Details)
Variables d'environnement
UPSTASH_REDIS_REST_URL=https://xxx.upstash.io
UPSTASH_REDIS_REST_TOKEN=xxx
Pricing
- Free : 500 000 commandes/mois. Tu ne dépasseras probablement jamais ce quota, même avec 1 000 utilisateurs.
- Pay-as-you-go : 0,2$/100 000 commandes au-delà.
7. Anthropic, API Claude (si ton app utilise l'IA)
Ce que c'est : l'API qui fait tourner la génération de contenu IA dans ton app.
Ne pas confondre : l'abonnement Claude Max (100$/mois) te donne accès à Claude Code pour développer. L'API Anthropic est un service séparé, facturé à l'usage, pour intégrer l'IA dans ton app.
Étapes
- Crée un compte sur console.anthropic.com
- Ajoute un moyen de paiement (obligatoire même pour tester)
- Crée une clé API : API Keys → Create Key
- Configure un budget mensuel max dans Settings → Billing (pour éviter les surprises)
Variable d'environnement
ANTHROPIC_API_KEY=sk-ant-xxx
Pricing
- Claude Sonnet : 3$/million de tokens en entrée, 15$/million en sortie
- En pratique : une génération de contenu (3 variantes) coûte environ 0,02-0,05$
Estimation mensuelle réaliste : - 10 utilisateurs actifs, 20 générations/mois chacun = environ 10-20$/mois - 100 utilisateurs actifs = environ 50-100$/mois - Configure un budget max dans la console pour éviter les surprises
8. Sentry, monitoring des erreurs
Ce que c'est : capture automatiquement les erreurs en production et te les signale. Sans lui, tu ne sais pas quand ton app plante pour tes utilisateurs.
Étapes
- Crée un compte sur sentry.io
- Crée un projet Next.js
- Suis le wizard d'installation (ajoute automatiquement les fichiers de config)
Variables d'environnement
NEXT_PUBLIC_SENTRY_DSN=https://xxx@sentry.io/xxx
SENTRY_ORG=ton-org
SENTRY_PROJECT=ton-projet
SENTRY_AUTH_TOKEN=sntrys_xxx
Pricing
- Developer (0$/mois) : 5 000 erreurs/mois, 1 utilisateur. Suffisant pour démarrer.
- Team (26$/mois) : 50 000 erreurs/mois, utilisateurs illimités.
Récap des coûts
Phase développement (0 utilisateur)
| Service | Coût |
|---|---|
| Supabase Free | 0$ |
| Vercel Hobby | 0$ |
| Domaine .com | ~0,80$/mois (10$/an) |
| Stripe | 0$ (pas de transaction) |
| Resend Free | 0$ |
| Upstash Free | 0$ |
| Anthropic (tes tests) | ~5$/mois |
| Sentry Developer | 0$ |
| Claude Code (Max) | 100$/mois |
| Total phase dev | ~106$/mois (dont 100$ pour Claude Code) |
L'infrastructure coûte quasi rien en développement. Le seul coût significatif, c'est Claude Code lui-même (100$/mois). Tous les services ont un plan gratuit suffisant pour développer.
Phase production (10-50 utilisateurs)
| Service | Coût |
|---|---|
| Supabase Pro | 25$/mois |
| Vercel Pro | 20$/mois |
| Domaine | ~1$/mois |
| Stripe (commissions) | ~5$/mois |
| Resend Free | 0$ |
| Upstash Free | 0$ |
| Anthropic | 20-50$/mois |
| Sentry Developer | 0$ |
| Total production | ~75-105$/mois |
Seuil de rentabilité : si ton abonnement est à 29€/mois, il te faut 4-5 clients payants pour couvrir tous les coûts d'infrastructure. Dès le 6ème client, tu es rentable.
L'ordre d'installation recommandé
Phase 1, développement (jour 1)
- Supabase → ta base de données et auth fonctionnent
- Vercel → ton app est déployée automatiquement
- Sentry → tu vois les erreurs dès le début
Phase 2, features (jours 2-3)
- Resend → tes emails automatiques fonctionnent
- Upstash → ton API est protégée contre les abus
- Anthropic API → ton IA est intégrée (si applicable)
Phase 3, lancement (jour 4+)
- Stripe → tes utilisateurs peuvent payer
- Domaine → ton app a sa propre adresse
À retenir : tous les services ont un plan gratuit suffisant pour développer. Tu ne paies qu'en production, et le seuil de rentabilité est atteint dès 4-5 clients payants. L'infrastructure d'un SaaS moderne coûte moins cher qu'un abonnement Netflix.