starter saas berikutnya

Pemula SaaS Next.js

Ini adalah templat awal untuk membangun aplikasi SaaS menggunakan Next.js dengan dukungan untuk autentikasi, integrasi Stripe untuk pembayaran, dan dasbor untuk pengguna yang masuk.

Demo: https://next-saas-start.vercel.app/

Mengapa saya membuat ini?

Pada tahun 2020, saya membuat kursus bernama "React 2025" yang menunjukkan cara membangun aplikasi SaaS dengan Next.js, Stripe, dan alat lainnya.

Ya, ini hampir tahun 2025 dan React 19 telah menghadirkan begitu banyak fitur baru yang menakjubkan yang tidak saya duga! Repo ini adalah demonstrasi pola React dan Next.js terbaru. Pola ini dapat secara drastis menyederhanakan beberapa tugas umum dalam membangun SaaS Anda, seperti membuat formulir, berkomunikasi dengan database Anda, dan banyak lagi.

Misalnya, React sekarang memiliki hook bawaan seperti useActionState untuk menangani kesalahan formulir inline dan status tertunda. React Server Actions dapat menggantikan banyak kode boilerplate yang diperlukan untuk memanggil Rute API dari sisi klien. Dan terakhir, use hook React yang dikombinasikan dengan Next.js membuatnya sangat mudah untuk membuat useUser() hook yang kuat.

Kami dapat mengambil pengguna dari database Postgres kami di tata letak root, tetapi tidak dapat menunggu Promise . Sebagai gantinya, kami meneruskan Promise tersebut ke penyedia konteks React, di mana kami dapat "membukanya" dan menunggu data dialirkan. Ini berarti kita bisa mendapatkan yang terbaik dari kedua dunia: kode mudah untuk mengambil data dari database kita (misalnya getUser() ) dan React hook yang dapat kita gunakan di Komponen Klien (misalnya useUser() ).

Fakta menarik: sebagian besar UI untuk aplikasi ini dibuat dengan v0? Detail lebih lanjut di sini jika Anda ingin mempelajari tentang repo ini.

Fitur

• Halaman arahan pemasaran ( / ) dengan elemen Terminal animasi
• Halaman harga ( /pricing ) yang terhubung ke Stripe Checkout
• Halaman dasbor dengan operasi CRUD pada pengguna/tim
• RBAC dasar dengan peran Pemilik dan Anggota
• Manajemen langganan dengan Portal Pelanggan Stripe
• Otentikasi email/kata sandi dengan JWT disimpan ke cookie
• Middleware global untuk melindungi rute masuk
• Middleware lokal untuk melindungi Tindakan Server atau memvalidasi skema Zod
• Sistem pencatatan aktivitas untuk setiap peristiwa pengguna

Tumpukan Teknologi

• Kerangka : Next.js
• Basis Data : Postgres
• ORM : Gerimis
• Pembayaran : Garis
• Perpustakaan UI : shadcn/ui

Memulai

git clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install

Berjalan Secara Lokal

Gunakan skrip pengaturan yang disertakan untuk membuat file .env Anda:

pnpm db:setup

Kemudian, jalankan migrasi database dan masukkan database dengan pengguna dan tim default:

pnpm db:migrate
pnpm db:seed

Ini akan membuat pengguna dan tim berikut:

• Pengguna: [email protected]
• Kata sandi: admin123

Anda tentu saja dapat membuat pengguna baru juga melalui /sign-up .

Terakhir, jalankan server pengembangan Next.js:

pnpm dev

Buka http://localhost:3000 di browser Anda untuk melihat aplikasi beraksi.

Secara opsional, Anda dapat mendengarkan webhook Stripe secara lokal melalui CLI mereka untuk menangani peristiwa perubahan langganan:

stripe listen --forward-to localhost:3000/api/stripe/webhook

Menguji Pembayaran

Untuk menguji pembayaran Stripe, gunakan detail kartu tes berikut:

• Nomor Kartu: 4242 4242 4242 4242
• Kedaluwarsa: Tanggal apa pun di masa depan
• CVC: Nomor 3 digit apa pun

Pergi ke Produksi

Saat Anda siap untuk menyebarkan aplikasi SaaS ke produksi, ikuti langkah-langkah berikut:

Siapkan webhook Stripe produksi

1. Buka Dasbor Stripe dan buat webhook baru untuk lingkungan produksi Anda.
2. Tetapkan URL titik akhir ke rute API produksi Anda (misalnya https://yourdomain.com/api/stripe/webhook ).
3. Pilih acara yang ingin Anda dengarkan (misal, checkout.session.completed , customer.subscription.updated ).

Terapkan ke Vercel

1. Dorong kode Anda ke repositori GitHub.
2. Hubungkan repositori Anda ke Vercel dan terapkan.
3. Ikuti proses penerapan Vercel, yang akan memandu Anda dalam menyiapkan proyek Anda.

Tambahkan variabel lingkungan

Dalam pengaturan proyek Vercel Anda (atau selama penerapan), tambahkan semua variabel lingkungan yang diperlukan. Pastikan untuk memperbarui nilai lingkungan produksi, termasuk:

1. BASE_URL : Setel ini ke domain produksi Anda.
2. STRIPE_SECRET_KEY : Gunakan kunci rahasia Stripe Anda untuk lingkungan produksi.
3. STRIPE_WEBHOOK_SECRET : Gunakan rahasia webhook dari webhook produksi yang Anda buat pada langkah 1.
4. POSTGRES_URL : Setel ini ke URL database produksi Anda.
5. AUTH_SECRET : Setel ini ke string acak. openssl rand -base64 32 akan menghasilkan satu.

Templat Lainnya

Meskipun templat ini sengaja dibuat minimal dan untuk digunakan sebagai sumber belajar, ada versi berbayar lain di komunitas yang memiliki fitur lebih lengkap:

• https://achromatic.dev
• https://shipfa.st
• https://makerkit.dev