Web Dev
Cara Membangun SaaS dalam 30 Hari dengan Next.js dan Tailwind
September 202511 menit baca
Foto oleh Unsplash
Foto oleh Unsplash
Saya membangun SaaS pertama dalam 47 hari dan hasilnya berantakan. Yang kedua selesai dalam 28 hari dan diluncurkan dengan langganan Stripe yang berfungsi, otomasi email, dan dashboard yang tidak memalukan. Perbedaannya bukan keahlian — melainkan memiliki kerangka mingguan sebelum menulis satu baris kode. Ini adalah kerangka tersebut, diadaptasi dari proyek nyata menggunakan Next.js 15, Tailwind CSS, Prisma, dan Stripe.
Developer solo gagal di SaaS bukan karena tidak bisa coding tapi karena terlalu lama di hal yang salah. Minggu 1 adalah fondasi: scaffold proyek, skema database, dan autentikasi. Minggu 2 adalah fitur inti — proposisi nilai sebenarnya. Minggu 3 adalah infrastruktur bisnis: pembayaran, email, dan kontrol akses. Minggu 4 adalah ship: SEO, performa, staging, dan peluncuran. Timeline 30 hari memaksa prioritisasi.
Jangan mulai dari nol — gunakan template atau starter yang sudah memiliki Tailwind, TypeScript strict mode, dan ESLint terkonfigurasi. Saya menggunakan starter Next.js sendiri dengan shadcn/ui, next-intl untuk i18n, dan singleton Prisma yang sudah terhubung. Di hari 3-4, desain skema Prisma sebelum menyentuh UI — skema adalah kerangka aplikasimu. Dapatkan User, Session (via NextAuth), Subscription, dan model domain inti yang benar di hari 1.
Di sinilah kebanyakan developer solo salah. Mereka membangun halaman pengaturan, preferensi notifikasi, dan editor profil sebelum membangun hal yang sebenarnya dibayar pengguna. Di minggu 2, bangun satu fitur end-to-end: buat, daftar, edit, hapus, dengan validasi dan penanganan error yang tepat. Buat jelek tapi fungsional. Poles di minggu 3.
Week 1 — Foundation
Day 1-2 : Next.js 15 scaffold + Tailwind + shadcn/ui
Day 3-4 : Prisma schema + PostgreSQL + auth (NextAuth v5)
Day 5-7 : Core data models + basic CRUD API routes
Week 2 — Core Features
Day 8-10 : Dashboard layout + sidebar navigation
Day 11-12 : Feature #1 (your SaaS's main value prop)
Day 13-14 : Stripe integration (subscription + webhooks)
Week 3 — Polish & UX
Day 15-17 : Onboarding flow + empty states
Day 18-19 : Email (Resend) — welcome, receipts, alerts
Day 20-21 : Role-based access control (free / pro / admin)
Week 4 — Ship
Day 22-24 : SEO metadata + OG images + sitemap
Day 25-26 : Error boundaries + loading states + toasts
Day 27-28 : Performance audit (Lighthouse ≥ 90)
Day 29 : Staging deploy on Vercel + smoke tests
Day 30 : Production launch → ProductHunt / XGunakan komponen shadcn/ui dari hari pertama — cukup tidak bergaya untuk terlihat seperti merekmu tapi cukup lengkap untuk menghemat berhari-hari pekerjaan. Tambahkan dengan 'npx shadcn@latest add button input table dialog' dan kamu memiliki fondasi UI profesional dalam 10 menit. Sesuaikan variabel CSS di globals.css daripada melawan internal komponen.
Integrasi Stripe memiliki dua bagian: alur checkout dan penangan webhook. Checkout sederhana — buat checkout session, arahkan pengguna. Webhook adalah tempat kerja nyata terjadi. Kamu perlu menangani event subscription.created, subscription.updated, subscription.deleted, dan invoice.payment_failed. Gunakan kunci idempotency pada pemrosesan webhook untuk menghindari pembaruan ganda pada percobaan ulang Stripe.
Resend adalah layanan email transaksional terbaik untuk developer Next.js — memiliki SDK React native sehingga template email-mu hanyalah komponen React. Hubungkan tiga email di minggu 3: email sambutan saat daftar, tanda terima pada pembayaran berhasil, dan peringatan pembayaran gagal.
// app/api/webhooks/stripe/route.ts
import { NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"
import { prisma } from "@/lib/db"
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!
export async function POST(req: NextRequest) {
const body = await req.text()
const signature = req.headers.get("stripe-signature")!
let event: Stripe.Event
try {
event = stripe.webhooks.constructEvent(body, signature, webhookSecret)
} catch {
return NextResponse.json({ error: "Invalid signature" }, { status: 400 })
}
switch (event.type) {
case "customer.subscription.created":
case "customer.subscription.updated": {
const sub = event.data.object as Stripe.Subscription
await prisma.subscription.upsert({
where: { stripeSubscriptionId: sub.id },
update: {
status: sub.status,
currentPeriodEnd: new Date(sub.current_period_end * 1000),
plan: sub.items.data[0].price.lookup_key ?? "pro",
},
create: {
stripeSubscriptionId: sub.id,
stripeCustomerId: sub.customer as string,
status: sub.status,
currentPeriodEnd: new Date(sub.current_period_end * 1000),
plan: sub.items.data[0].price.lookup_key ?? "pro",
},
})
break
}
case "customer.subscription.deleted": {
const sub = event.data.object as Stripe.Subscription
await prisma.subscription.update({
where: { stripeSubscriptionId: sub.id },
data: { status: "canceled" },
})
break
}
}
return NextResponse.json({ received: true })
}Minggu terakhir adalah tentang membuat apa yang kamu bangun dapat ditemukan dan stabil. Tambahkan Metadata API Next.js ke setiap halaman publik. Generate OG image menggunakan next/og. Jalankan Lighthouse di setiap halaman kunci dan perbaiki apa pun di bawah 85. Siapkan error boundary agar satu komponen yang rusak tidak menghancurkan seluruh dashboard.
Godaan minggu 4 adalah menambahkan 'satu fitur lagi' sebelum peluncuran. Tahan. Setiap fitur baru yang ditambahkan di minggu terakhir belum diuji, belum dipoles, dan menunda peluncuran. Tulis di backlog, kirim apa yang kamu janjikan di minggu 1-3, dan luncurkan. SaaS yang sudah diluncurkan dengan lima fitur mengalahkan SaaS yang selalu dalam pengembangan dengan lima puluh fitur setiap kali.
Tiga hal yang membunuh timeline: (1) Sindrom UI sempurna — menghabiskan seharian penuh di hover state tombol di minggu 1. Gunakan default shadcn, lanjutkan. (2) Auth yang over-engineered — jangan bangun session management sendiri. NextAuth v5 atau Clerk menanganinya dalam setengah hari. (3) Tidak deploy hingga minggu 4 — deploy ke Vercel di hari 1 dengan halaman placeholder.
Next.js 15 App Router untuk frontend dan API route. Prisma + PostgreSQL (Neon atau Supabase free tier untuk proyek solo). NextAuth v5 untuk autentikasi dengan provider Google dan GitHub. Tailwind CSS + shadcn/ui untuk UI. Stripe untuk pembayaran. Resend untuk email. Vercel untuk hosting. Stack ini memungkinkan developer solo membangun apa yang dulunya membutuhkan tim karena setiap library memiliki tipe TypeScript yang sangat baik, dokumentasi yang bagus, dan konfigurasi minimal.