Templates

Next.js SaaS Starter Kit - Panduan Lengkap

Contoh dokumentasi produk untuk template SaaS berbasis Next.js + TypeScript + Supabase

📄 Next.js SaaS Starter Kit - Panduan Lengkap

Contoh dokumentasi produk untuk template SaaS berbasis Next.js + TypeScript + Supabase

📦 Tentang Produk

Next.js SaaS Starter Kit adalah template siap pakai untuk membangun aplikasi SaaS modern dengan teknologi terkini. Hemat waktu development hingga 100+ jam dengan foundation yang solid dan best practices.

✨ Fitur Utama

🚀 Next.js 14 dengan App Router & Server Components
🔐 Authentication lengkap (Email, Google, GitHub)
💳 Payment Integration dengan Stripe
🎨 UI Components 50+ komponen siap pakai
📊 Admin Dashboard untuk manage users & data
📧 Email Service dengan Resend/SendGrid
🗄️ Database Supabase (PostgreSQL)
🎯 Landing Page conversion-optimized
📱 Responsive mobile-first design
🌙 Dark Mode support
🔍 SEO Optimized dengan metadata lengkap
📈 Analytics Google Analytics & Umami ready

💡 Untuk Siapa Produk Ini?

Produk ini cocok untuk:

👨‍💻 Developers yang ingin launch SaaS dengan cepat
🚀 Startup yang butuh MVP dalam hitungan hari
💼 Freelancer yang sering build aplikasi web
🎓 Learners yang ingin belajar modern web development

🛒 Cara Membeli Produk

Langkah 1: Pilih Produk

Kunjungi halaman produk di website kami
Baca deskripsi lengkap dan demo live
Cek bagian "Kompatibel dengan" untuk memastikan produk sesuai

Langkah 2: Klik Tombol "Unduh Sekarang"

Klik tombol "Unduh Sekarang" berwarna hijau
Anda akan diarahkan ke halaman checkout

Langkah 3: Lengkapi Pembayaran

Pilih metode pembayaran favorit Anda
Ikuti instruksi pembayaran
Setelah berhasil, Anda akan menerima:
- ✅ Email konfirmasi dengan link download
- ✅ Invoice pembelian
- ✅ Akses ke folder Google Drive

⏱️ Waktu Proses: Link download dikirim dalam 5-10 menit setelah pembayaran

📥 Cara Download Produk dari Google Drive

Metode Recommended: Add to My Drive (Untuk File >1GB)

Karena ukuran produk cukup besar (~1.5GB), kami sarankan metode ini:

Klik link Google Drive yang diterima via email
Login dengan akun Google Anda
Klik ikon "Add to My Drive" (folder dengan tanda +) di pojok kanan atas
Pilih lokasi folder di Drive Anda
Tunggu proses copy selesai (2-5 menit)
Buka Google Drive Anda
Cari folder "Next.js SaaS Starter Kit"
Klik kanan > Download (atau gunakan Google Drive Desktop App untuk sync otomatis)

Metode Alternatif: Download Langsung

Klik link Google Drive
Klik tombol "Download" di pojok kanan atas
Jika muncul warning "Can't scan for viruses", klik "Download anyway"
File akan didownload sebagai ZIP

Troubleshooting Download

❌ "Download quota exceeded"

Solusi:

Gunakan akun Google yang berbeda
ATAU tunggu 24 jam
ATAU gunakan metode "Add to My Drive"

❌ Download terputus di tengah jalan

Solusi:

Gunakan download manager (IDM, Free Download Manager)
ATAU gunakan Google Drive Desktop App (auto-resume)
ATAU "Add to My Drive" lalu sync dengan desktop app

💻 Persyaratan Sistem

Minimal Requirements

OS: Windows 10, macOS 12+, atau Ubuntu 20.04+
Processor: Intel Core i3 / AMD Ryzen 3
RAM: 8GB minimum
Storage: 2GB ruang kosong
Node.js: Version 18.17 atau lebih baru
Git: Untuk version control (optional tapi recommended)

Recommended Requirements

OS: Windows 11, macOS 13+, atau Ubuntu 22.04+
Processor: Intel Core i5 / AMD Ryzen 5 atau lebih baik
RAM: 16GB
Storage: 5GB ruang kosong (untuk node_modules)
Node.js: Version 20 LTS
Internet: Koneksi stabil untuk install dependencies

Software yang Dibutuhkan

✅ Node.js & npm (Download)
✅ Code Editor (VS Code recommended)
✅ Git (Download)
⚙️ pnpm (optional, tapi lebih cepat dari npm)

🚀 Instalasi & Setup

Langkah 1: Extract File

Setelah download selesai, cari file di folder Downloads
Klik kanan pada file nextjs-saas-starter.zip
Pilih "Extract All" (Windows) atau double-click (macOS)
Extract ke lokasi yang mudah diakses, misalnya C:\Projects atau ~/Projects

Langkah 2: Buka Project di VS Code

# Buka terminal/command prompt
cd ~/Projects/nextjs-saas-starter

# Buka di VS Code
code .

Struktur folder akan terlihat seperti ini:

nextjs-saas-starter/
├── README.md                 # Dokumentasi utama
├── SETUP.md                  # Setup guide singkat
├── CHANGELOG.md              # Update history
├── .env.example              # Template environment variables
├── .gitignore                
├── package.json              
├── tsconfig.json             
├── next.config.js            
├── tailwind.config.ts        
├── src/
│   ├── app/                  # Next.js App Router
│   ├── components/           # React components
│   ├── lib/                  # Utilities & helpers
│   └── styles/               # Global styles
├── public/                   # Static assets
├── supabase/
│   ├── migrations/           # Database migrations
│   └── seed.sql              # Sample data
└── docs/                     # Extended documentation

Langkah 3: Install Dependencies

Pilih salah satu package manager (kami recommend pnpm karena lebih cepat):

Menggunakan pnpm (Recommended):

# Install pnpm jika belum punya
npm install -g pnpm

# Install dependencies
pnpm install

Menggunakan npm:

npm install

Menggunakan yarn:

yarn install

⏱️ Waktu install: 3-5 menit tergantung koneksi internet

Langkah 4: Setup Environment Variables

Copy file .env.example menjadi .env.local:

# macOS/Linux
cp .env.example .env.local

# Windows (Command Prompt)
copy .env.example .env.local

Edit file .env.local:

# macOS
open .env.local

# Windows
notepad .env.local

# VS Code
code .env.local

Konfigurasi yang wajib diisi:

# =================
# APP CONFIGURATION
# =================
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_NAME="My SaaS App"

# =================
# SUPABASE
# =================
NEXT_PUBLIC_SUPABASE_URL=your-project-url.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# =================
# STRIPE (Optional - untuk payment)
# =================
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxx
STRIPE_SECRET_KEY=sk_test_xxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxx

# =================
# EMAIL (Optional - untuk email notifications)
# =================
RESEND_API_KEY=re_xxxxx
EMAIL_FROM=noreply@yourdomain.com

# =================
# OAUTH (Optional - untuk social login)
# =================
GOOGLE_CLIENT_ID=xxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=xxxxx
GITHUB_CLIENT_ID=xxxxx
GITHUB_CLIENT_SECRET=xxxxx

Langkah 5: Setup Supabase Database

A. Buat Project di Supabase

Buka supabase.com
Sign up atau Login
Klik "New Project"
Isi detail project:
- Name: My SaaS App
- Database Password: password yang kuat
- Region: Singapore (Southeast Asia)
Tunggu project selesai dibuat (~2 menit)

B. Dapatkan Credentials

Di dashboard Supabase, buka Settings > API
Copy credentials berikut ke .env.local:
- Project URL → NEXT_PUBLIC_SUPABASE_URL
- Anon/Public Key → NEXT_PUBLIC_SUPABASE_ANON_KEY
- Service Role Key → SUPABASE_SERVICE_ROLE_KEY

C. Run Database Migrations

Kita akan create tables yang dibutuhkan:

Option 1: Via Supabase Dashboard (Mudah)

Buka SQL Editor di dashboard Supabase
Copy isi file supabase/migrations/001_initial_schema.sql
Paste di SQL Editor
Klik Run
Ulangi untuk semua file migration

Option 2: Via Supabase CLI (Recommended untuk development)

# Install Supabase CLI
npm install -g supabase

# Login
supabase login

# Link ke project Anda
supabase link --project-ref your-project-ref

# Run all migrations
supabase db push

D. Seed Sample Data (Optional)

Jika ingin data contoh untuk testing:

# Via CLI
supabase db reset --db-url your-connection-string

# ATAU via SQL Editor
# Copy-paste isi file supabase/seed.sql

Langkah 6: Setup Stripe (Optional - Skip jika tidak butuh payment)

Buat akun di stripe.com
Aktifkan Test Mode (toggle di dashboard)
Buka Developers > API Keys
Copy keys ke .env.local:
- Publishable key → NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
- Secret key → STRIPE_SECRET_KEY
Setup Webhook (untuk production nanti):
- Buka Developers > Webhooks
- Add endpoint: https://yourdomain.com/api/webhooks/stripe
- Select events: checkout.session.completed, customer.subscription.updated, customer.subscription.deleted
- Copy Signing secret → STRIPE_WEBHOOK_SECRET
Create Products di Stripe Dashboard:
- Buka Products
- Add product untuk setiap pricing tier
- Copy Price ID dan update di src/config/pricing.ts

Langkah 7: Run Development Server

Sekarang kita siap menjalankan aplikasi!

# Menggunakan npm
npm run dev

# Menggunakan pnpm
pnpm dev

# Menggunakan yarn
yarn dev

Tunggu hingga muncul pesan:

✓ Ready in 2.5s
○ Local:        http://localhost:3000
○ Network:      http://192.168.1.100:3000

Langkah 8: Buka di Browser

Buka browser favorit Anda
Akses http://localhost:3000
Anda akan melihat landing page SaaS starter kit! 🎉

Pages yang Tersedia:

/ - Landing page
/pricing - Pricing plans
/features - Feature showcase
/docs - Documentation
/auth/login - Login page
/auth/signup - Signup page
/dashboard - User dashboard (require auth)
/admin - Admin panel (require admin role)

⚙️ Konfigurasi Lanjutan

1. Kustomisasi Branding

Update Logo & Favicon

# Replace file-file ini dengan logo Anda:
public/logo.svg          # Logo utama
public/logo-dark.svg     # Logo untuk dark mode
public/favicon.ico       # Favicon
public/og-image.png      # Open Graph image untuk social share

Update Colors & Theme

Edit file tailwind.config.ts:

export default {
  theme: {
    extend: {
      colors: {
        // Ganti dengan brand colors Anda
        primary: {
          DEFAULT: '#10b981', // Green
          foreground: '#ffffff',
        },
        secondary: {
          DEFAULT: '#84cc16', // Lime
          foreground: '#000000',
        },
      },
    },
  },
}

Update Site Metadata

Edit file src/app/layout.tsx:

export const metadata: Metadata = {
  title: 'Your SaaS Name',
  description: 'Your SaaS Description',
  keywords: ['saas', 'your', 'keywords'],
  authors: [{ name: 'Your Name' }],
  creator: 'Your Name',
  openGraph: {
    title: 'Your SaaS Name',
    description: 'Your SaaS Description',
    url: 'https://yourdomain.com',
    siteName: 'Your SaaS Name',
    images: ['/og-image.png'],
  },
}

2. Kustomisasi Landing Page

Edit file src/app/page.tsx:

// Update hero section
<HeroSection
  title="Your Catchy Headline"
  subtitle="Your compelling subtitle that explains the value"
  ctaText="Get Started Free"
  ctaLink="/auth/signup"
/>

// Update features
const features = [
  {
    title: 'Your Feature 1',
    description: 'Description of feature 1',
    icon: <Zap />,
  },
  // ... more features
]

3. Setup Email Notifications

Kami support 2 email providers:

Option A: Resend (Recommended)

Daftar di resend.com
Verify domain Anda
Create API key

Add ke .env.local:

RESEND_API_KEY=re_xxxxx
EMAIL_FROM=noreply@yourdomain.com

Option B: SendGrid

Daftar di sendgrid.com
Create API key
Update config di src/lib/email.ts

4. Setup OAuth Providers

Google OAuth

Buka Google Cloud Console
Create new project
Enable Google+ API
Create OAuth 2.0 Client ID:
- Application type: Web application
- Authorized redirect URIs:
  - http://localhost:3000/api/auth/callback/google
  - https://yourdomain.com/api/auth/callback/google
Copy Client ID dan Client Secret ke .env.local

GitHub OAuth

Buka GitHub Settings > Developer settings > OAuth Apps
New OAuth App:
- Homepage URL: http://localhost:3000
- Authorization callback URL: http://localhost:3000/api/auth/callback/github
Copy Client ID dan generate Client Secret
Add ke .env.local

Enable di Supabase

Buka Authentication > Providers di Supabase Dashboard
Enable Google dan GitHub
Paste Client ID dan Secret dari step sebelumnya

5. Setup Analytics

Google Analytics

Edit src/app/layout.tsx:

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout() {
  return (
    <html>
      <body>
        {children}
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      </body>
    </html>
  )
}

Umami Analytics (Privacy-friendly alternative)

NEXT_PUBLIC_UMAMI_WEBSITE_ID=xxxxx
NEXT_PUBLIC_UMAMI_URL=https://analytics.yourdomain.com

🚢 Deploy ke Production

Option 1: Vercel (Recommended untuk Next.js)

Push ke GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/your-saas.git
git push -u origin main

Deploy di Vercel:
- Buka vercel.com
- Import Project dari GitHub
- Vercel akan auto-detect Next.js
- Add environment variables dari .env.local
- Click Deploy
Setup Custom Domain:
- Di Vercel dashboard, buka Settings > Domains
- Add domain Anda
- Update DNS records sesuai instruksi
Update Environment Variables:
- Buka Settings > Environment Variables
- Update NEXT_PUBLIC_APP_URL dengan domain production
- Update Stripe Webhook URL
- Update OAuth redirect URLs

Option 2: Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Deploy
netlify deploy --prod

Option 3: VPS (Docker)

File Dockerfile sudah included:

# Build image
docker build -t my-saas .

# Run container
docker run -p 3000:3000 --env-file .env.local my-saas

Post-Deployment Checklist

Update .env production values
Configure custom domain
Setup SSL certificate (auto di Vercel/Netlify)
Test authentication flow
Test payment flow dengan Stripe test cards
Setup monitoring (Sentry, LogRocket)
Configure backup strategy untuk database
Setup error monitoring
Test email notifications
Update OAuth redirect URLs ke production domain

🔧 Troubleshooting

Problem 1: "Module not found" Error

Gejala:

Error: Cannot find module 'xxx'

Solusi:

# Clear cache dan reinstall
rm -rf node_modules .next
npm cache clean --force
npm install

# Restart dev server
npm run dev

Problem 2: Supabase Connection Error

Gejala:

"Invalid API key"
"Connection refused"

Solusi:

Double-check credentials di .env.local
Pastikan tidak ada trailing spaces
Restart dev server setelah update env
Check Supabase project status (might be paused)

Problem 3: Stripe Webhook Fails in Local

Gejala:

Payment success tapi tidak tercatat di database

Solusi:

# Install Stripe CLI
brew install stripe/stripe-cli/stripe  # macOS
# atau download dari stripe.com/docs/stripe-cli

# Login
stripe login

# Forward webhooks ke local
stripe listen --forward-to localhost:3000/api/webhooks/stripe

# Copy webhook signing secret ke .env.local