Next.js 16 Webhook Handler Pattern: Stripe, GitHub, and More

Webhooks are the backbone of every modern SaaS. Stripe fires one when a payment succeeds. GitHub fires one when a PR is merged. Clerk fires one when a user signs up. If your webhook handlers are a mess of copy-pasted boilerplate, this guide is for you. We’re going to build a clean, type-safe webhook handler pattern for Next.js 16 App Router — one you can reuse across every provider. The Problem With Ad-Hoc Webhook Handlers Most tutorials show you how to handle a Stripe webhook in isolation: // pages/api/stripe-webhook.ts (the old way) export default async function handler ( req , res ) { const sig = req . headers [ " stripe-signature " ]; const event = stripe . webhooks . constructEvent ( rawBody , sig , secret ); // ... handle event } This works, but it doesn’t scale. By the time you’re handling 10 event types across 3 providers, you’ve got spaghetti. The Pattern: A Typed Webhook Router Here’s the architecture we’ll build: app/ api/ webhooks/ stripe/ route.ts ← signature verification