nextjs starter kit

Commencer

Condition préalable

• Node.js et fil / chignon installés
• Comptes et clés API pour:
  • Supabase
  • Stripe (si vous utilisez des paiements)
  • Commis (si vous utilisez l'authentification)

Installation

1. Clone le référentiel:

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

2. Installez les dépendances:

    yarn
   

3. Configurer des variables d'environnement: Créez un fichier .env dans le répertoire racine avec les variables suivantes:

    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. Configurer les fonctionnalités: dans config.ts , définissez les fonctionnalités souhaitées:

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

5. Configurez la base de données: exécutez les migrations Prisma:

    npx prisma migrate dev
   

6. Démarrer le serveur de développement:

    yarn dev
   

7. Ouvrez votre navigateur et accédez à http://localhost:3000 pour voir votre application en cours d'exécution.

Configuration supplémentaire

• WebHooks: Configurez WebHooks pour Clerk (si vous utilisez AUTH) sur /api/auth/webhook et pour Stripe (si vous utilisez les paiements) sur /api/payments/webhook .
• Personnalisez la page de destination, le tableau de bord et d'autres composants au besoin.
• Modifiez le schéma PRISMA dans prisma/schema.prisma Si vous devez modifier la structure de la base de données.

Notes de sécurité importantes

• Activez la sécurité du niveau de ligne (RLS) dans votre projet Supabase pour assurer la protection des données au niveau de la base de données.
• Faites toujours des appels Supabase sur le côté serveur (dans les routes API ou les composants du serveur) pour garder votre clé de service sécurisée.

Apprendre encore plus

Reportez-vous à la documentation des technologies individuelles utilisées dans ce projet pour des informations plus détaillées:

• Documentation suivante.js
• Documentation CSS à vent arrière
• Documentation Supabase
• Documentation PRISMA
• Documentation du greffier (si vous utilisez AUTH)
• Documentation à rayures (si vous utilisez des paiements)