nextjs starter kit

Memulai

Prasyarat

• Node.js dan benang/roti terpasang
• Akun dan kunci API untuk:
  • Supabase
  • Stripe (jika menggunakan pembayaran)
  • Panitera (jika menggunakan otentikasi)

Pengaturan

1. Klon Repositori:

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

2. Instal dependensi:

    yarn
   

3. Mengatur Variabel Lingkungan: Buat file .env di direktori root dengan variabel berikut:

    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. Konfigurasi Fitur: Di config.ts , atur fitur yang diinginkan:

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

5. Siapkan database: Jalankan migrasi prisma:

    npx prisma migrate dev
   

6. Mulai server pengembangan:

    yarn dev
   

7. Buka browser Anda dan navigasikan ke http://localhost:3000 untuk melihat aplikasi Anda berjalan.

Konfigurasi tambahan

• WebHooks: Siapkan Webhooks untuk Panitera (jika menggunakan auth) AT /api/auth/webhook dan untuk Stripe (jika menggunakan pembayaran) AT /api/payments/webhook .
• Kustomisasi halaman arahan, dasbor, dan komponen lainnya sesuai kebutuhan.
• Ubah skema prisma dalam prisma/schema.prisma jika Anda perlu mengubah struktur basis data.

Catatan Keamanan Penting

• Aktifkan Row Level Security (RLS) dalam proyek Supabase Anda untuk memastikan perlindungan data di tingkat database.
• Selalu lakukan panggilan SUPABASE di sisi server (dalam rute API atau komponen server) agar kunci layanan Anda aman.

Pelajari lebih lanjut

Lihat dokumentasi teknologi individu yang digunakan dalam proyek ini untuk informasi yang lebih rinci:

• Dokumentasi Next.js
• Dokumentasi Tailwind CSS
• Dokumentasi Supabase
• Dokumentasi Prisma
• Dokumentasi Panitera (jika menggunakan auth)
• Dokumentasi Stripe (jika menggunakan pembayaran)