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_