Il s'agit d'un modèle de démarrage pour créer une application SaaS à l'aide de Next.js avec prise en charge de l'authentification, intégration Stripe pour les paiements et un tableau de bord pour les utilisateurs connectés.
Démo : https://next-saas-start.vercel.app/
En 2020, j'ai suivi un cours intitulé "React 2025" qui montrait comment créer une application SaaS avec Next.js, Stripe et d'autres outils.
Eh bien, nous sommes presque en 2025 et React 19 a apporté tellement de nouvelles fonctionnalités étonnantes que je n'avais pas prédit ! Ce dépôt est une démonstration des derniers modèles React et Next.js. Ces modèles peuvent considérablement simplifier certaines tâches courantes lors de la création de votre SaaS, comme la création de formulaires, la communication avec votre base de données, etc.
Par exemple, React intègre désormais des hooks tels que useActionState pour gérer les erreurs de formulaire en ligne et les états en attente. Les actions React Server peuvent remplacer une grande partie du code passe-partout nécessaire pour appeler une route API depuis le côté client. Et enfin, le hook use React combiné à Next.js rend incroyablement facile la création d'un puissant hook useUser() .
Nous sommes en mesure de récupérer l'utilisateur de notre base de données Postgres dans la disposition racine, mais sans attendre le Promise . Au lieu de cela, nous transmettons la Promise à un fournisseur de contexte React, où nous pouvons la « déballer » et attendre les données diffusées. Cela signifie que nous pouvons avoir le meilleur des deux mondes : un code simple pour récupérer les données de notre base de données (par exemple getUser() ) et un hook React que nous pouvons utiliser dans les composants clients (par exemple useUser() ).
Fait amusant : la majorité de l'interface utilisateur de cette application a été créée avec la version v0 ? Plus de détails ici si vous souhaitez en savoir plus sur ce dépôt.
/ ) avec élément Terminal animé/pricing ) qui se connecte à Stripe Checkoutgit clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install Utilisez le script d'installation inclus pour créer votre fichier .env :
pnpm db:setupEnsuite, exécutez les migrations de base de données et amorcez la base de données avec un utilisateur et une équipe par défaut :
pnpm db:migrate
pnpm db:seedCela créera l'utilisateur et l'équipe suivants :
[email protected]admin123 Vous pouvez bien sûr également créer de nouveaux utilisateurs via /sign-up .
Enfin, exécutez le serveur de développement Next.js :
pnpm devOuvrez http://localhost:3000 dans votre navigateur pour voir l'application en action.
En option, vous pouvez écouter les webhooks Stripe localement via leur CLI pour gérer les événements de modification d'abonnement :
stripe listen --forward-to localhost:3000/api/stripe/webhookPour tester les paiements Stripe, utilisez les détails de la carte de test suivants :
4242 4242 4242 4242Lorsque vous êtes prêt à déployer votre application SaaS en production, procédez comme suit :
https://yourdomain.com/api/stripe/webhook ).checkout.session.completed , customer.subscription.updated ).Dans les paramètres de votre projet Vercel (ou lors du déploiement), ajoutez toutes les variables d'environnement nécessaires. Assurez-vous de mettre à jour les valeurs de l'environnement de production, notamment :
BASE_URL : définissez-le sur votre domaine de production.STRIPE_SECRET_KEY : Utilisez votre clé secrète Stripe pour l'environnement de production.STRIPE_WEBHOOK_SECRET : utilisez le secret du webhook du webhook de production que vous avez créé à l'étape 1.POSTGRES_URL : définissez ceci sur l'URL de votre base de données de production.AUTH_SECRET : définissez ceci sur une chaîne aléatoire. openssl rand -base64 32 en générera un. Bien que ce modèle soit intentionnellement minimal et destiné à être utilisé comme ressource d'apprentissage, il existe d'autres versions payantes dans la communauté qui sont plus complètes :
