nextjs starter kit

Erste Schritte

Voraussetzungen

• Node.js und Garn/Brötchen installiert
• Konten und API -Schlüssel für:
  • Supabase
  • Streifen (bei Verwendung von Zahlungen)
  • Angestellter (bei Verwendung der Authentifizierung)

Aufstellen

1. Klonen Sie das Repository:

    git clone <repository-url>
   cd <project-directory>
   

2. Abhängigkeiten installieren:

    yarn
   

3. Umgebungsvariablen einrichten: Erstellen Sie eine .env -Datei im Stammverzeichnis mit den folgenden Variablen:

    SUPABASE_URL=<your-supabase-project-url>
   SUPABASE_SERVICE_KEY=<your-supabase-service-key>
   
   # If using Stripe
   STRIPE_SECRET_KEY=<your-stripe-secret-key>
   NEXT_PUBLIC_STRIPE_PRICE_ID=<your-stripe-price-id>
   
   # If using Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
   CLERK_SECRET_KEY=<your-clerk-secret-key>
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
   

4. Konfigurieren Sie Funktionen: In config.ts stellen Sie die gewünschten Funktionen fest:

    const config = {
     auth : {
       enabled : true , // Set to false if not using Clerk
     } ,
     payments : {
       enabled : true , // Set to false if not using Stripe
     }
   } ;

5. Richten Sie die Datenbank ein: Führen Sie Prisma -Migrationen aus:

    npx prisma migrate dev
   

6. Starten Sie den Entwicklungsserver:

    yarn dev
   

7. Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000 um Ihre Bewerbung zu sehen.

Zusätzliche Konfiguration

• Webhooks: Richten Sie Webhooks für den Angestellten (falls auth) an /api/auth/webhook und für Stripe (bei Verwendung von Zahlungen) AT /api/payments/webhook ein.
• Passen Sie die Zielseite, das Dashboard und andere Komponenten nach Bedarf an.
• Ändern Sie das Prisma -Schema in prisma/schema.prisma wenn Sie die Datenbankstruktur ändern müssen.

Wichtige Sicherheitsnotizen

• Aktivieren Sie die Sicherheit der Zeilenebene (RLS) in Ihrem Supabase -Projekt, um den Datenschutz auf Datenbankebene sicherzustellen.
• Teilen Sie immer Supabase-Anrufe auf der serverseitigen (in API-Routen oder Serverkomponenten), um Ihren Serviceschlüssel sicher zu halten.

Erfahren Sie mehr

In der Dokumentation der in diesem Projekt verwendeten einzelnen Technologien finden Sie detailliertere Informationen:

• NEXT.JS Dokumentation
• Rückenwind -CSS -Dokumentation
• Supabase -Dokumentation
• Prisma -Dokumentation
• Sachbeschaffungsdokumentation (falls die Auth)
• Stripe -Dokumentation (bei Verwendung von Zahlungen)