How to Set Up Stripe Subscriptions in Next.js 16 (Complete Guide)

Setting up Stripe subscriptions in Next.js is one of those tasks that sounds simple but has a dozen gotchas. After implementing it across multiple SaaS projects, here's the complete, production-ready approach. What we're building Stripe Checkout for new subscriptions Webhook handling for payment events Plan management with free/pro/enterprise tiers Customer portal for self-service billing 1. Install dependencies npm install stripe @stripe/stripe-js 2. Define your plans Create a central config for your plans. This is the source of truth for features and limits: // src/lib/stripe.ts import Stripe from "stripe"; export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export const PLANS = { free: { name: "Free", price: { monthly: 0 }, features: ["Up to 3 projects", "Basic analytics", "Community support"], limits: { projects: 3, aiMessages: 50 }, }, pro: { name: "Pro", price: { monthly: 29 }, stripePriceId: process.env.STRIPE_PRO_PRICE_ID, features: ["Unlimited projects", "Advance