Next.js App Router + Stripe Webhook Signature Verification

Simple method to get Next.js app router raw body for Stripe webhook verification

Since the move from Next.js “Pages Router” to the newer “App Router”, the steps for verifying a webhook signature in Stripe have changed slightly.

They’ve actually become simpler, but finding the right information across their documentation and Stack Overflow can be confusing.

Note: The method is the same for any service that requires the request raw body to verify a signature.

What should we do for Next.js App Router?

Inside of your webhook API, we want first to get the stripe-signature from the headers:

import { headers } from 'next/headers'

export async function POST(req: Request) {
  const headerPayload = headers()
  const signature = headerPayload.get('stripe-signature')
    ...

To access the raw body on the request we want to call .text() :

...

const rawBody = await req.text()
...

We finally need to call stripe.webhook.constructEvent to verify the signature:

...
const event = stripe.webhooks.constructEvent(
  rawBody,
  signature…