En bref
Un vrai produit est plus qu'un site web. Il lui faut des utilisateurs capables de se connecter, des données qui persistent et se mettent à jour, et un moyen d'encaisser des paiements. La bonne nouvelle, c'est que vous ne construisez plus ces parties difficiles de zéro : des services dédiés gèrent chacune en toute sécurité. Ce guide vous donne la carte - comment les pièces s'imbriquent, quel service fait quoi et dans quel ordre les assembler - pour que vous construisiez un SaaS de production sans réinventer les parties dangereuses.
Comment les pièces s'imbriquent
Une application moderne se divise en une surface marketing rapide et indexable et l'application interactive derrière le login. Un framework comme Next.js, Astro ou TanStack fournit structure, routage et rendu. Par-dessus, vous ajoutez trois services : l'authentification, une base de données et les paiements. Séparer proprement la surface marketing et la surface app laisse optimiser chacune pour son but, ce qui aide à la fois la performance et le SEO.
Authentification avec Clerk
Stocker des mots de passe, gérer des sessions et résister correctement aux attaques est une spécialité profonde, donc vous ne devriez pas la bricoler vous-même. Clerk gère l'inscription, la connexion, les sessions et le login social comme Google OAuth, ce qui enlève toute une catégorie de risque de sécurité. Vous intégrez ses composants et le laissez gérer l'identité, pendant que votre application gère tout le reste. Le passage du développement à la production est un échange de clés soigneux, pas une reconstruction.
Données réactives avec Convex
Convex stocke vos données et exécute votre logique backend comme des fonctions TypeScript. Vous déclarez un schéma, lisez avec des queries et modifiez avec des mutations, et l'UI se met à jour automatiquement quand change quelque chose dont elle dépend. Un typage fort circule de la base de données à vos composants et enlève toute une classe de bugs. Pour de vrais produits, préférez les soft deletes, qui marquent une ligne comme supprimée mais la conservent, pour que les données restent restaurables et l'historique intact.
Paiements avec Stripe
Stripe est le standard pour encaisser des paiements, et il signifie que vous ne touchez jamais de données de carte brutes. Checkout héberge une page de paiement sécurisée, les subscriptions gèrent les revenus récurrents, et les webhooks disent à votre application ce qui s'est passé, pour qu'elle reste synchronisée avec la réalité de la facturation. Une séparation stricte des clés de test et de production vous laisse tout construire et vérifier sans déplacer de vrai argent. Les détails difficiles - proration, coupons et Embedded Checkout - se bâtissent sur ce socle.
Les secrets tiennent tout ensemble
Chaque service que vous ajoutez vient avec des clés secrètes, et en fuiter une peut être catastrophique. Gardez-les hors du code dans des fichiers env toujours gitignorés, utilisez des clés séparées pour le développement et la production pour qu'une erreur en dev ne puisse pas toucher de données live, et chiffrez les données sensibles au repos. Cette discipline est le tissu conjonctif de tout le stack, et elle doit grandir avec chaque nouvelle intégration.
Passer en live
Le lancement, c'est basculer chaque service des clés et données de développement vers celles de production, un par un, et vérifier chacun avant de passer au suivant. Rendez ensuite le produit live trouvable en vous inscrivant à la Search Console et en soumettant une sitemap, et rapide en traitant les Core Web Vitals comme partie du lancement. Un ordre soigneux évite l'échec classique du jour de lancement, où une clé oubliée paralyse les connexions ou la facturation.
Questions fréquemment posées
Correspondance des leçons et des ressources
Bâtir une carte mentale claire du frontend, du backend et de la base de données, comprendre le split marketing versus app et savoir quand un monorepo vaut le coup
Ajouter une vraie authentification avec Clerk, câbler Google OAuth et passer d'une instance dev à une instance de production sur votre propre domaine
Modéliser et interroger des données dans Convex avec une type safety de bout en bout et des mises à jour en direct, et utiliser les index et les soft deletes comme le font les vrais produits
Guide d authentification Clerk : un composant pratique et réutilisable pour livrer de vrais workflows IA dans votre business.
Guide du backend Convex : un composant pratique et réutilisable pour livrer de vrais workflows IA dans votre business.