Dies ist eine Startervorlage zum Erstellen einer SaaS-Anwendung mit Next.js mit Unterstützung für Authentifizierung, Stripe-Integration für Zahlungen und einem Dashboard für angemeldete Benutzer.
Demo: https://next-saas-start.vercel.app/
Im Jahr 2020 habe ich einen Kurs mit dem Titel „React 2025“ erstellt, der zeigte, wie man eine SaaS-Anwendung mit Next.js, Stripe und anderen Tools erstellt.
Nun, wir schreiben das Jahr 2025 und React 19 hat so viele tolle neue Funktionen mit sich gebracht, die ich nicht vorhergesehen hätte! Dieses Repo ist eine Demonstration der neuesten React- und Next.js-Muster. Diese Muster können einige häufige Aufgaben beim Aufbau Ihres SaaS drastisch vereinfachen, z. B. das Erstellen von Formularen, die Kommunikation mit Ihrer Datenbank und mehr.
Beispielsweise verfügt React jetzt über integrierte Hooks wie useActionState um Inline-Formularfehler und ausstehende Zustände zu verarbeiten. React Server Actions können einen Großteil des Boilerplate-Codes ersetzen, der zum Aufrufen einer API-Route von der Clientseite aus erforderlich ist. Und schließlich macht es der React- use Hook in Kombination mit Next.js unglaublich einfach, einen leistungsstarken useUser() Hook zu erstellen.
Wir können den Benutzer aus unserer Postgres-Datenbank im Root-Layout abrufen, aber nicht auf das Promise warten. Stattdessen leiten wir das Promise an einen React-Kontextanbieter weiter, wo wir es „auspacken“ und auf die gestreamten Daten warten können. Das bedeutet, dass wir das Beste aus beiden Welten haben können: einfachen Code zum Abrufen von Daten aus unserer Datenbank (z. B. getUser() ) und einen React-Hook, den wir in Client-Komponenten verwenden können (z. B. useUser() ).
Interessante Tatsache: Der Großteil der Benutzeroberfläche dieser Anwendung wurde mit v0 erstellt? Weitere Details finden Sie hier, wenn Sie mehr über dieses Repo erfahren möchten.
/ ) mit animiertem Terminalelement/pricing ), die mit Stripe Checkout verbunden istgit clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install Verwenden Sie das mitgelieferte Setup-Skript, um Ihre .env Datei zu erstellen:
pnpm db:setupFühren Sie dann die Datenbankmigrationen aus und füllen Sie die Datenbank mit einem Standardbenutzer und -team:
pnpm db:migrate
pnpm db:seedDadurch werden der folgende Benutzer und das folgende Team erstellt:
[email protected]admin123 Sie können natürlich auch neue Benutzer über /sign-up erstellen.
Führen Sie abschließend den Next.js-Entwicklungsserver aus:
pnpm devÖffnen Sie http://localhost:3000 in Ihrem Browser, um die App in Aktion zu sehen.
Optional können Sie lokal über deren CLI auf Stripe-Webhooks warten, um Abonnementänderungsereignisse zu verarbeiten:
stripe listen --forward-to localhost:3000/api/stripe/webhookUm Stripe-Zahlungen zu testen, verwenden Sie die folgenden Testkartendetails:
4242 4242 4242 4242Wenn Sie bereit sind, Ihre SaaS-Anwendung in der Produktion bereitzustellen, führen Sie die folgenden Schritte aus:
https://yourdomain.com/api/stripe/webhook ).checkout.session.completed , customer.subscription.updated ).Fügen Sie in Ihren Vercel-Projekteinstellungen (oder während der Bereitstellung) alle erforderlichen Umgebungsvariablen hinzu. Stellen Sie sicher, dass Sie die Werte für die Produktionsumgebung aktualisieren, einschließlich:
BASE_URL : Legen Sie dies auf Ihre Produktionsdomäne fest.STRIPE_SECRET_KEY : Verwenden Sie Ihren geheimen Stripe-Schlüssel für die Produktionsumgebung.STRIPE_WEBHOOK_SECRET : Verwenden Sie das Webhook-Geheimnis des Produktions-Webhooks, den Sie in Schritt 1 erstellt haben.POSTGRES_URL : Legen Sie dies auf die URL Ihrer Produktionsdatenbank fest.AUTH_SECRET : Legen Sie dies auf eine zufällige Zeichenfolge fest. openssl rand -base64 32 generiert einen. Während diese Vorlage absichtlich minimalistisch gehalten ist und als Lernressource verwendet werden soll, gibt es in der Community auch andere kostenpflichtige Versionen mit umfassenderem Funktionsumfang:
