DEV Community

Cover image for How I Built a Production-Ready Next.js 14 & Supabase SaaS Boilerplate (To Save 100+ Hours)
maahmoud | SaaS Builder
maahmoud | SaaS Builder

Posted on

How I Built a Production-Ready Next.js 14 & Supabase SaaS Boilerplate (To Save 100+ Hours)

Every time I start a new SaaS project, I find myself wasting at least 20 to 30 hours rebuilding the same foundational building blocks:

  • Setting up Authentication flow with middleware protection.
  • Hand-crafting Stripe webhooks to listen for subscription events.
  • Building a responsive dashboard layout with dark mode.

To break this endless cycle, I built Lumen β€” a clean, modern, production-ready SaaS Boilerplate engineered to help developers ship their ideas in hours, not weeks.


🧰 The Tech Stack

I chose a modern, enterprise-ready stack built for speed and scalability:

  • Framework: Next.js 14 (App Router, Server Actions)
  • Language: TypeScript
  • Styling: Tailwind CSS & Shadcn UI
  • Backend & Auth: Supabase (Email/Password & Google OAuth)
  • Monetization: Stripe Checkout & Customer Billing Portal
  • Quality: Strict ESLint rules, 0 TypeScript build errors

⚑ Key Architectural Highlights

1. Robust Middleware Auth

Lumen comes pre-configured with Supabase auth middleware. Unauthenticated users are seamlessly redirected away from protected /dashboard routes, while session refreshing happens automatically under the hood.

2. Fully Wired Stripe Webhooks

No more digging through Stripe API docs to figure out webhooks. Lumen includes fully tested handlers for:

  • Successful checkouts (checkout.session.completed)
  • Subscription cancellations & updates
  • Direct redirection to Stripe Billing Portal for invoice management

3. Modern UI Components

Built on top of Shadcn UI and Radix primitives. The layout includes clean sidebars, dark/light mode toggles, and extensible user setting screens.


πŸ“¦ What’s Included in the Bundle?

When you clone Lumen, you get a zero-friction developer setup:

  • Full source code with structured directory architecture.
  • Detailed step-by-step .env.example setup documentation.
  • Pre-configured Supabase SQL migrations.
  • Clean npm run build execution out-of-the-box.

πŸš€ Check Out Lumen

If you're looking to launch your next project without wasting weeks on boilerplate setup:

πŸ‘‰ Get Lumen SaaS Boilerplate on Gumroad

πŸ‘‰ **[Alternative Link on Lemon Squeezy / Ko-fi](https://lumen.lemonsqueezy.com/checkout/buy/fb7215f7-e507-4a0a-9f10-cdffa17b8911






 )**


What features do you usually spend the most time setting up when starting a new project? Let's discuss in the comments below!

Top comments (0)