Menu

How to add Stripe subscriptions to a Next.js App Router app (2026)
📰

How to add Stripe subscriptions to a Next.js App Router app (2026)

DEV Community: nextjs·Jake Mcdonald·about 4 hours ago
#7Een6wXF
#devtonextjs#devto#dev#stripe#customer
Reading 0:00
15s threshold

By Jake Mcdonald, founder of ShipEmber · Updated October 30, 2026 · About a 14-minute read

Adding Stripe subscriptions to a Next.js App Router app doesn't take much code. It goes wrong in the small details: a webhook that parses the body before verifying it, a handler that runs the same event twice, or a "Pro" check that only exists in a client component. This guide covers a complete Next.js Stripe subscription flow with stripe-node and Route Handlers, and keeps the parts that matter on the server.

Here's the plan:

A route that creates a Checkout Session in subscription mode.

A webhook route that reads the raw body, verifies the signature, and skips events it has already processed.

Syncing subscription state into your own database.

Gating a Pro page on the server, not in the browser.

The customer portal for upgrades, cancellations, and card changes.

Separate webhook secrets for local, test, and production (including Vercel).

The pitfalls that cost people an afternoon.

The examples assume…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.