Receive Email Webhooks in Next.js

Quick Start: Next.js Email Webhook

JsonHook delivers every inbound email as a JSON POST request to your webhook endpoint. Setting up a Next.js handler takes less than 5 minutes. Start by initializing your project:

npx create-next-app@latest my-app && cd my-app

Then create your webhook endpoint. The following example shows the minimal code needed to receive and acknowledge a JsonHook delivery:

// app/api/webhook/route.ts (App Router)
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const payload = await request.json();
  console.log('Email from:', payload.email.from);
  console.log('Subject:', payload.email.subject);
  return NextResponse.json({ status: 'ok' });
}

Point your JsonHook address webhook URL to this endpoint and you will start receiving parsed emails as JSON within seconds of the email arriving.

Full Next.js Implementation

The quick start example above is enough to get started, but a production implementation should include signature verification, structured error handling, and proper HTTP response codes. The complete example below demonstrates all of these patterns together.

This implementation verifies the X-JsonHook-Signature header to confirm the request genuinely came from JsonHook, parses the full email payload, and returns the appropriate HTTP status codes to trigger or suppress retries.

// app/api/webhook/route.ts (Next.js App Router)
import { NextRequest, NextResponse } from 'next/server';
import { createHmac, timingSafeEqual } from 'crypto';

const WEBHOOK_SECRET = process.env.JSONHOOK_WEBHOOK_SECRET!;

function verifySignature(rawBody: string, sigHeader: string | null): boolean {
  if (!sigHeader) return false;
  const computed = createHmac('sha256', WEBHOOK_SECRET)
    .update(rawBody, 'utf-8')
    .digest('hex');
  try {
    return timingSafeEqual(
      Buffer.from(computed, 'hex'),
      Buffer.from(sigHeader, 'hex')
    );
  } catch { return false; }
}

export async function POST(request: NextRequest) {
  const rawBody = await request.text(); // text() preserves exact bytes
  const sig = request.headers.get('x-jsonhook-signature');

  if (!verifySignature(rawBody, sig)) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  let payload: any;
  try { payload = JSON.parse(rawBody); }
  catch { return NextResponse.json({ error: 'Bad request' }, { status: 400 }); }

  const { email, address, timestamp } = payload;
  console.log(`[${timestamp}] ${address}: ${email.from} — ${email.subject}`);

  for (const att of email.attachments ?? []) {
    console.log(`  Attachment: ${att.filename} (${att.size} bytes)`);
  }

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

// Disable Next.js body parsing — we need the raw text for HMAC
export const config = { api: { bodyParser: false } };

The webhook handler returns 200 immediately after queuing the email for processing. Avoid doing expensive work (database writes, API calls) synchronously inside the handler — process the payload in a background job to stay within JsonHook's 10-second response timeout.

Parsing the Webhook Payload

Every JsonHook delivery is an HTTP POST with Content-Type: application/json. The payload follows a consistent schema regardless of the originating email client or provider:

// App Router (app/api/webhook/route.ts)
const rawBody = await request.text();
const payload = JSON.parse(rawBody);

const event     = payload.event;      // "email.received"
const timestamp = payload.timestamp;  // ISO 8601
const address   = payload.address;    // "[email protected]"

const { from, to, subject, textBody, htmlBody, attachments } = payload.email;

for (const att of attachments ?? []) {
  console.log(att.filename, att.contentType, att.size);
}

Key fields in the payload:

• event — Always "email.received" for inbound email events
• timestamp — ISO 8601 timestamp of when JsonHook received the email
• address — The JsonHook inbound address that received the email (e.g., [email protected])
• email.from — Sender address string, e.g., "Alice <[email protected]>"
• email.to — Array of recipient address strings
• email.subject — Email subject line
• email.textBody — Plain text body of the email (may be empty if HTML-only)
• email.htmlBody — HTML body of the email (may be empty if plain-text-only)
• email.attachments — Array of attachment objects, each with filename, contentType, size, and contentId

Verifying Webhook Signatures

JsonHook signs every webhook delivery using HMAC-SHA256. The signature is included in the X-JsonHook-Signature request header as a hex digest. To verify it, compute the HMAC-SHA256 of the raw request body using your address's webhook secret and compare it to the header value.

Your webhook secret is returned when you create an inbound address via the API (POST /api/addresses). Store it as an environment variable — never hard-code it.

import { createHmac, timingSafeEqual } from 'crypto';

function verifyJsonHookSignature(rawBody: string, sigHeader: string | null, secret: string): boolean {
  if (!sigHeader || !secret) return false;
  const computed = createHmac('sha256', secret)
    .update(rawBody, 'utf-8')
    .digest('hex');
  try {
    return timingSafeEqual(
      Buffer.from(computed, 'hex'),
      Buffer.from(sigHeader, 'hex')
    );
  } catch { return false; }
}

// In App Router route handler:
// const rawBody = await request.text();
// const sig = request.headers.get('x-jsonhook-signature');
// if (!verifyJsonHookSignature(rawBody, sig, WEBHOOK_SECRET)) {
//   return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
// }

Always verify the signature before processing the payload. Return 401 for invalid signatures so that legitimate retries from JsonHook (which always include a valid signature) are distinguishable from spoofed requests.

Error Handling Best Practices

Reliable webhook handling requires careful attention to error responses. JsonHook uses your HTTP response code to decide whether to retry a delivery:

• Return 200 quickly: Acknowledge receipt immediately and process asynchronously. JsonHook will retry any non-2xx response.
• Return 400 for bad requests: If the payload fails your own validation (not signature — use 401 for that), return 400 to prevent retries of malformed deliveries.
• Return 500 to trigger retries: If your downstream system is temporarily unavailable, returning 500 causes JsonHook to retry with exponential backoff (up to 5 attempts over ~1 hour).
• Never return 200 before verifying the signature: Doing so silently accepts spoofed requests.

Next.js-specific tips:

• Use await request.text() in the App Router to get the raw body string — request.json() will consume the body stream and leave nothing for HMAC verification
• Add export const config = { api: { bodyParser: false } } when using the Pages Router (pages/api/webhook.ts) to disable Next.js's automatic body parsing
• Next.js API routes run serverlessly on Vercel — for heavy email processing, push a message to a queue (Upstash QStash, Vercel KV pub/sub, etc.) rather than processing inline
• Set JSONHOOK_WEBHOOK_SECRET in Vercel's environment variable dashboard, not in .env.local, for production deployments

Next.js Framework Tips

Next.js provides several conveniences that make webhook handling cleaner. Here are framework-specific patterns to use when integrating JsonHook:

• Register your webhook route before any authentication middleware — the JsonHook request does not carry user credentials, only the HMAC signature.
• Use raw body access for signature verification. Many Next.js frameworks parse the body automatically — make sure you are hashing the raw bytes, not the re-serialized parsed object.
• Use a dedicated route or controller file for webhook handlers to keep the codebase organized as you add more inbound address integrations.
• Log the address field from every payload to track which inbound address received the email — useful for multi-address setups.
• Consider using Next.js's built-in request validation or a schema library (e.g., Zod, Pydantic, etc.) to validate the payload structure after signature verification.