What Are Webhooks and How Can You Use Them in Next js 15

Webhooks are a powerful way to allow different applications to communicate automatically when specific events occur. Instead of checking for updates manually (polling), webhooks let apps notify each other in real time using HTTP requests.

What Are Webhooks?

A webhook is a user-defined HTTP callback. It's triggered by an event, like a user signing up or a payment going through. When that event happens, the originating site makes an HTTP POST request to the URL you've configured.

How to Create a Webhook in Next.js 15

Next.js 15 uses the new App Router, and you can create API routes inside the app/api directory.

Step 1: Create a Webhook Endpoint

In your Next.js project, create a file:

app/api/webhook/route.ts

import { NextResponse } from 'next/server';

export async function POST(request: Request) {

try {

const payload = await request.json();

// handle webhook payload here

return NextResponse.json({ status: 'ok' });

} catch (error) {

return new NextResponse('Bad Request', { status: 400 });

}

Step 2: Add Webhook Verification (e.g., Stripe)

When using providers like Stripe, you must verify that the request is actually from them:

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {

apiVersion: '2022-11-15',

});

export async function POST(request: Request) {

const sig = request.headers.get('stripe-signature')!;

const body = await request.text();

try {

const event = stripe.webhooks.constructEvent(

body,

sig,

process.env.STRIPE_WEBHOOK_SECRET!

);

// process event

return new Response('Received', { status: 200 });

} catch (err) {

return new Response(`Error: ${err.message}`, { status: 400 });

}

Testing Webhooks Locally

Since webhooks need a public URL, testing locally requires a tool like Ngrok.

ngrok http 3000

Use the generated public URL in your webhook provider’s dashboard (e.g., Stripe).

Standard Webhook Practices

The Standard Webhooks initiative encourages:

Clear documentation of event types
Secure requests with HMAC signatures
Retry mechanisms for failed deliveries
Idempotent event handling (to avoid duplication)
Structured JSON payloads

Common Use Cases

Stripe: Get notified of payments, subscriptions, etc.

GitHub: Trigger CI/CD or other actions when a push or pull request happens.

Discord: Post automatic updates (like new blog posts) to a server channel.

Best Practices for Webhooks

Always verify the request’s signature
Log each incoming event
Avoid heavy logic in the webhook route; offload to queues or background tasks
Use retry and idempotency to handle failures
Return a 2xx response quickly to avoid timeouts

Conclusion

Webhooks help make your application real-time and automated. In Next.js 15, setting up webhooks is cleaner and more organized with the App Router. Whether you're integrating Stripe, GitHub, or any other service, always verify, log, and process safely.