SaaS Boilerplate
v1.7.3
SaaS Boilerplate ist eine leistungsstarke und vollständig anpassbare Vorlage zum Starten Ihrer SaaS-Anwendungen. Gebaut mit Next.js und Tailwind CSS sowie den modularen UI-Komponenten von Shadcn UI . Diese Next.js-SaaS-Vorlage hilft Ihnen, SaaS mit minimalem Aufwand schnell zu erstellen und zu starten.
Vollgepackt mit wichtigen Funktionen wie integrierter Authentifizierung , Mandantenfähigkeit mit Teamunterstützung, Rolle und Berechtigungen , Datenbank, I18n (Internationalisierung), Landing Page, Benutzer-Dashboard, Formularverarbeitung, SEO-Optimierung, Protokollierung, Fehlerberichterstattung mit Sentry, Tests, Bereitstellung , Überwachung und Benutzeridentitätswechsel – diese SaaS-Vorlage bietet alles, was Sie für den Einstieg benötigen.
Dieses Next.js Starter Kit wurde speziell für Entwickler entwickelt und verwendet TypeScript für die Typsicherheit und integriert ESLint zur Aufrechterhaltung der Codequalität sowie Prettier für eine konsistente Codeformatierung. Die Testsuite kombiniert Vitest und React Testing Library für robuste Unit-Tests, während Playwright die Integration und E2E-Tests übernimmt. Kontinuierliche Integration und Bereitstellung werden über GitHub Actions verwaltet. Für die Benutzerverwaltung übernimmt Clerk die Authentifizierung. Für Datenbankoperationen wird Drizzle ORM für die typsichere Datenbankverwaltung in gängigen Datenbanken wie PostgreSQL, SQLite und MySQL verwendet.
Ganz gleich, ob Sie eine neue SaaS-App erstellen oder nach einer flexiblen, produktionsbereiten SaaS-Vorlage suchen, mit diesem Musterbeispiel sind Sie bestens versorgt. Dieses kostenlose Open-Source-Starterkit enthält alles, was Sie brauchen, um Ihre Entwicklung zu beschleunigen und Ihr Produkt problemlos zu skalieren.
Klonen Sie dieses Projekt und erstellen Sie damit Ihr eigenes SaaS. Sie können sich die Live-Demo bei SaaS Boilerplate ansehen, bei der es sich um eine Demo mit einem funktionierenden Authentifizierungs- und Mandantenfähigkeitssystem handelt.
 |  |   |
 | ||
| Fügen Sie hier Ihr Logo hinzu |
Live-Demo: SaaS Boilerplate
| Landingpage | Benutzer-Dashboard |
|---|---|
 |  |
| Teammanagement | Benutzerprofil |
|---|---|
 |  |
| Melden Sie sich an | Anmelden |
|---|---|
 |  |
| Landing Page mit Dark Mode (Pro-Version) | Benutzer-Dashboard mit Dunkelmodus (Pro-Version) |
|---|---|
 |  |
| Benutzer-Dashboard mit Seitenleiste (Pro-Version) |
|---|
 |
Entwicklererfahrung steht an erster Stelle, extrem flexible Codestruktur und nur das behalten, was Sie brauchen:
@ -PräfixIntegrierte Funktion von Next.js:
Führen Sie den folgenden Befehl in Ihrer lokalen Umgebung aus:
git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm installZu Ihrer Information: Alle Abhängigkeiten werden jeden Monat aktualisiert.
Anschließend können Sie das Projekt lokal im Entwicklungsmodus mit Live-Neuladen ausführen, indem Sie Folgendes ausführen:
npm run devÖffnen Sie http://localhost:3000 mit Ihrem bevorzugten Browser, um Ihr Projekt anzuzeigen.
Erstellen Sie ein Clerk-Konto bei Clerk.com und erstellen Sie eine neue Anwendung im Clerk-Dashboard. Kopieren Sie dann die Werte von NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY und CLERK_SECRET_KEY in die Datei .env.local (die von Git nicht verfolgt wird):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key In Ihrem Clerk-Dashboard müssen Sie außerdem Enable Organization , indem Sie zu Organization management > Settings > Enable organization navigieren.
Jetzt verfügen Sie mit Next.js über ein voll funktionsfähiges Authentifizierungssystem: Registrieren, Anmelden, Abmelden, Passwort vergessen, Passwort zurücksetzen, Profil aktualisieren, Passwort aktualisieren, E-Mail aktualisieren, Konto löschen und mehr.
Das Projekt verwendet DrizzleORM, ein typsicheres ORM, das mit PostgreSQL-, SQLite- und MySQL-Datenbanken kompatibel ist. Standardmäßig ist das Projekt so eingerichtet, dass es nahtlos mit PostgreSQL zusammenarbeitet, und Sie können problemlos einen beliebigen PostgreSQL-Datenbankanbieter auswählen.
Für die Übersetzung nutzt das Projekt next-intl in Kombination mit Crowdin. Als Entwickler müssen Sie sich lediglich um die englische (oder eine andere Standardsprache) Version kümmern. Übersetzungen für andere Sprachen werden von Crowdin automatisch generiert und verwaltet. Sie können Crowdin nutzen, um mit Ihrem Übersetzungsteam zusammenzuarbeiten oder die Nachrichten mithilfe der maschinellen Übersetzung selbst zu übersetzen.
Um die Übersetzung (i18n) einzurichten, erstellen Sie ein Konto bei Crowdin.com und erstellen Sie ein neues Projekt. Im neu erstellten Projekt finden Sie die Projekt-ID. Sie müssen außerdem ein neues persönliches Zugriffstoken erstellen, indem Sie zu Kontoeinstellungen > API gehen. Anschließend müssen Sie in Ihren GitHub-Aktionen die folgenden Umgebungsvariablen definieren: CROWDIN_PROJECT_ID und CROWDIN_PERSONAL_TOKEN .
Nachdem Sie die Umgebungsvariablen in Ihren GitHub-Aktionen definiert haben, werden Ihre Lokalisierungsdateien jedes Mal mit Crowdin synchronisiert, wenn Sie einen neuen Commit in den main übertragen.
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── scripts # Scripts folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # Reusable components
│ ├── features # Components specific to a feature
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ └── utils # Utilities folder
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration Sie können Next.js SaaS Boilerplate ganz einfach konfigurieren, indem Sie das gesamte Projekt nach FIXME: durchsuchen, um eine schnelle Anpassung vorzunehmen. Hier sind einige der wichtigsten Dateien zum Anpassen:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png und public/favicon-32x32.png : Ihr Website-Faviconsrc/utils/AppConfig.ts : Konfigurationsdateisrc/templates/BaseTemplate.tsx : Standardthemanext.config.mjs : Next.js-Konfiguration.env : StandardumgebungsvariablenSie haben vollen Zugriff auf den Quellcode für weitere Anpassungen. Der bereitgestellte Code ist nur ein Beispiel, das Ihnen beim Start Ihres Projekts helfen soll. Der Himmel ist die Grenze.
Im Quellcode finden Sie außerdem PRO Kommentare, die auf den Code hinweisen, der nur in der PRO-Version verfügbar ist. Sie können diesen Code problemlos entfernen oder durch Ihre eigene Implementierung ersetzen.
Um das Datenbankschema im Projekt zu ändern, können Sie die Schemadatei unter ./src/models/Schema.ts aktualisieren. Diese Datei definiert die Struktur Ihrer Datenbanktabellen mithilfe der Drizzle ORM-Bibliothek.
Nachdem Sie Änderungen am Schema vorgenommen haben, generieren Sie eine Migration, indem Sie den folgenden Befehl ausführen:
npm run db:generateDadurch wird eine Migrationsdatei erstellt, die Ihre Schemaänderungen widerspiegelt. Die Migration wird bei der nächsten Datenbankinteraktion automatisch angewendet, sodass keine Notwendigkeit besteht, sie manuell auszuführen oder den Next.js-Server neu zu starten.
Das Projekt folgt der Spezifikation „Conventional Commits“, was bedeutet, dass alle Commit-Nachrichten entsprechend formatiert werden müssen. Um Sie beim Schreiben von Commit-Nachrichten zu unterstützen, verwendet das Projekt Commitizen, eine interaktive CLI, die Sie durch den Commit-Prozess führt. Um es zu verwenden, führen Sie den folgenden Befehl aus:
npm run commit Einer der Vorteile der Verwendung konventioneller Commits ist die Möglichkeit, automatisch eine CHANGELOG Datei zu generieren. Es ermöglicht uns auch, die nächste Versionsnummer automatisch anhand der in einem Release enthaltenen Commits-Typen zu ermitteln.
Das Projekt ist für die Abonnementzahlung in Stripe integriert. Sie müssen ein Stripe-Konto erstellen und außerdem die Stripe-CLI installieren. Nach der Installation der Stripe-CLI müssen Sie sich über die CLI anmelden:
stripe loginAnschließend können Sie den folgenden Befehl ausführen, um einen neuen Preis zu erstellen:
npm run stripe:setup-price Nachdem Sie den Befehl ausgeführt haben, müssen Sie die Preis-ID kopieren und in src/utils/AppConfig.ts einfügen, indem Sie die vorhandene Preis-ID durch die neue aktualisieren.
In Ihrem Stripe-Dashboard müssen Sie die Einstellungen Ihres Kundenportals unter https://dashboard.stripe.com/test/settings/billing/portal konfigurieren. Am wichtigsten ist, dass Sie die Einstellungen speichern.
In Ihrer .env Datei müssen Sie NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY mit Ihrem eigenen Stripe Publishable-Schlüssel aktualisieren. Den Schlüssel finden Sie in Ihrem Stripe Dashboard. Anschließend müssen Sie außerdem eine neue Datei mit dem Namen .env.local erstellen und der neu erstellten Datei die folgenden Umgebungsvariablen hinzufügen:
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret Sie erhalten den STRIPE_SECRET_KEY von Ihrem Stripe-Dashboard. STRIPE_WEBHOOK_SECRET wird durch Ausführen des folgenden Befehls generiert:
npm run dev Sie finden in Ihrem Terminal das Webhook-Signaturgeheimnis. Sie können es kopieren und in Ihre .env.local Datei einfügen.
Alle Unit-Tests liegen neben dem Quellcode im selben Verzeichnis und sind so leichter auffindbar. Das Projekt verwendet die Vitest- und React-Testing-Bibliothek für Unit-Tests. Sie können die Tests mit dem folgenden Befehl ausführen:
npm run testDas Projekt nutzt Playwright für die Integration und End-to-End-Tests (E2E). Sie können die Tests mit den folgenden Befehlen ausführen:
npx playwright install # Only for the first time in a new environment
npm run test:e2e In der lokalen Umgebung ist das visuelle Testen deaktiviert und das Terminal zeigt die Meldung [percy] Percy is not running, disabling snapshots. . Standardmäßig werden visuelle Tests nur in GitHub Actions ausgeführt.
Der App Router-Ordner ist mit der Edge-Laufzeitumgebung kompatibel. Sie können es aktivieren, indem Sie die folgenden Zeilen src/app/layouts.tsx hinzufügen:
export const runtime = 'edge' ; Zu Ihrer Information: Die Datenbankmigration ist nicht mit der Edge-Laufzeitumgebung kompatibel. Sie müssen also die automatische Migration in src/libs/DB.ts deaktivieren:
await migrate ( db , { migrationsFolder : './migrations' } ) ;Nach der Deaktivierung müssen Sie die Migration manuell ausführen mit:
npm run db:migrateSie müssen den Befehl außerdem jedes Mal ausführen, wenn Sie das Datenbankschema aktualisieren möchten.
Während des Build-Prozesses werden Datenbankmigrationen automatisch ausgeführt, sodass keine Notwendigkeit besteht, sie manuell auszuführen. Sie müssen jedoch DATABASE_URL in Ihren Umgebungsvariablen definieren.
Anschließend können Sie einen Produktions-Build generieren mit:
$ npm run buildEs generiert einen optimierten Produktionsaufbau des Boilerplates. Führen Sie Folgendes aus, um den generierten Build zu testen:
$ npm run start Sie müssen außerdem die Umgebungsvariablen CLERK_SECRET_KEY mit Ihrem eigenen Schlüssel definieren.
Dieser Befehl startet einen lokalen Server mit dem Produktions-Build. Sie können jetzt http://localhost:3000 in Ihrem bevorzugten Browser öffnen, um das Ergebnis anzuzeigen.
Das Projekt nutzt Sentry zur Fehlerüberwachung. In der Entwicklungsumgebung ist keine zusätzliche Einrichtung erforderlich: NextJS SaaS Boilerplate ist für die Verwendung von Sentry und Spotlight (Sentry for Development) vorkonfiguriert. Alle Fehler werden automatisch an Ihre lokale Spotlight-Instanz gesendet, sodass Sie Sentry lokal erleben können.
Für die Produktionsumgebung müssen Sie ein Sentry-Konto und ein neues Projekt erstellen. Anschließend müssen Sie in next.config.mjs die org und project in der Funktion withSentryConfig aktualisieren. Fügen Sie außerdem Ihren Sentry-DSN zu sentry.client.config.ts , sentry.edge.config.ts und sentry.server.config.ts hinzu.
Die SaaS-Vorlage von Next.js basiert auf Codecov für die Code-Coverage-Reporting-Lösung. Um Codecov zu aktivieren, erstellen Sie ein Codecov-Konto und verbinden Sie es mit Ihrem GitHub-Konto. Ihre Repositorys sollten in Ihrem Codecov-Dashboard angezeigt werden. Wählen Sie das gewünschte Repository aus und kopieren Sie das Token. Definieren Sie in GitHub Actions die Umgebungsvariable CODECOV_TOKEN und fügen Sie das Token ein.
Stellen Sie sicher, dass Sie CODECOV_TOKEN als GitHub Actions-Geheimnis erstellen und es nicht direkt in Ihren Quellcode einfügen.
Das Projekt verwendet Pino.js zur Protokollierung. In der Entwicklungsumgebung werden Protokolle standardmäßig in der Konsole angezeigt.
Für die Produktion ist das Projekt bereits in Better Stack integriert, um Ihre Protokolle mithilfe von SQL zu verwalten und abzufragen. Um Better Stack nutzen zu können, müssen Sie ein Better Stack-Konto erstellen und eine neue Quelle erstellen: Gehen Sie zu Ihrem Better Stack Logs Dashboard > Quellen > Quelle verbinden. Anschließend müssen Sie Ihrer Quelle einen Namen geben und Node.js als Plattform auswählen.
Nachdem Sie die Quelle erstellt haben, können Sie Ihr Quell-Token anzeigen und kopieren. Fügen Sie in Ihren Umgebungsvariablen das Token in die Variable LOGTAIL_SOURCE_TOKEN ein. Jetzt werden alle Protokolle automatisch an Better Stack gesendet und von diesem aufgenommen.
Das Projekt nutzt Checkly, um sicherzustellen, dass Ihre Produktionsumgebung immer betriebsbereit ist. In regelmäßigen Abständen führt Checkly die Tests mit der Endung *.check.e2e.ts durch und benachrichtigt Sie, wenn einer der Tests fehlschlägt. Darüber hinaus haben Sie die Flexibilität, Tests von mehreren Standorten aus durchzuführen, um sicherzustellen, dass Ihre Anwendung weltweit verfügbar ist.
Um Checkly nutzen zu können, müssen Sie zunächst ein Konto auf deren Website erstellen. Generieren Sie nach dem Erstellen eines Kontos einen neuen API-Schlüssel im Checkly Dashboard und legen Sie die Umgebungsvariable CHECKLY_API_KEY in GitHub Actions fest. Zusätzlich müssen Sie die CHECKLY_ACCOUNT_ID definieren, die Sie auch in Ihrem Checkly Dashboard unter Benutzereinstellungen > Allgemein finden.
Um die Einrichtung abzuschließen, aktualisieren Sie die Datei checkly.config.ts mit Ihrer eigenen E-Mail-Adresse und Produktions-URL.
Das Next.js SaaS Starter Kit enthält einen integrierten Bundle-Analysator. Es kann verwendet werden, um die Größe Ihrer JavaScript-Bundles zu analysieren. Führen Sie zunächst den folgenden Befehl aus:
npm run build-statsDurch Ausführen des Befehls wird automatisch ein neues Browserfenster mit den Ergebnissen geöffnet.
Das Projekt ist bereits mit Drizzle Studio konfiguriert, um die Datenbank zu erkunden. Sie können den folgenden Befehl ausführen, um das Datenbankstudio zu öffnen:
npm run db:studioAnschließend können Sie https://local.drizzle.studio mit Ihrem bevorzugten Browser öffnen, um Ihre Datenbank zu durchsuchen.
Wenn Sie VSCode-Benutzer sind, können Sie eine bessere Integration mit VSCode erreichen, indem Sie die vorgeschlagene Erweiterung in .vscode/extension.json installieren. Der Startercode enthält Einstellungen für eine nahtlose Integration mit VSCode. Die Debug-Konfiguration wird auch für das Frontend- und Backend-Debugging bereitgestellt.
Mit den in Ihrem VSCode installierten Plugins können ESLint und Prettier den Code automatisch beheben und Fehler anzeigen. Das Gleiche gilt für das Testen: Sie können die VSCode-Vitest-Erweiterung installieren, um Ihre Tests automatisch auszuführen, und sie zeigt auch die Codeabdeckung im Kontext an.
Profi-Tipps: Wenn Sie eine projektweite Typprüfung mit TypeScript benötigen, können Sie einen Build mit Cmd + Shift + B auf dem Mac ausführen.
Jeder ist herzlich willkommen, zu diesem Projekt beizutragen. Wenn Sie Fragen haben oder einen Fehler finden, können Sie jederzeit ein Problem eröffnen. Völlig offen für Vorschläge und Verbesserungen.
Lizenziert unter der MIT-Lizenz, Copyright © 2024
Weitere Informationen finden Sie unter LIZENZ.
| | |
| ||
| Fügen Sie hier Ihr Logo hinzu |
Hergestellt mit ♥ von CreativeDesignsGuru
Suchen Sie nach einem maßgeschneiderten Boilerplate für den Start Ihres Projekts? Gerne bespreche ich mit Ihnen, wie ich Ihnen beim Aufbau helfen kann. Sie können uns jederzeit unter [email protected] kontaktieren!
