SaaS Metrics Dashboard in Next.js: MRR, Churn, and Active Users with Recharts

Building a SaaS Metrics Dashboard in Next.js: MRR, Churn, and Active Users with Recharts If you're running a SaaS, you need three numbers every morning: MRR, churn rate, and active users. Everything else is noise until you have those down cold. In this guide we'll build a real metrics dashboard in Next.js 16 with: MRR calculated from live Stripe subscription data Churn rate derived from subscription cancellation events Active users queried directly from your database Recharts for clean, responsive visualizations This is the exact pattern in LaunchKit's admin metrics panel — let's build it from scratch. The Data Sources Before writing a line of UI code, understand where each metric lives: Metric Source Sync Strategy MRR Stripe subscriptions Webhook → DB Churn Stripe subscription events Webhook → DB Active users Your Postgres DB Direct query Revenue history Stripe invoices Webhook → DB The key insight: don't call Stripe at render time. Sync from webhooks into your own database, then quer