Route handlers for webhooks in NextJS - Mini Project: Build & Apply

Route handlers for webhooks

📖 Scenario: You are building a Next.js app that needs to receive data from an external service using webhooks. Webhooks send data to your app via HTTP POST requests. You want to create a route handler that listens for these webhook POST requests and processes the data.

🎯 Goal: Create a Next.js route handler that accepts POST requests at /api/webhook. It should read the JSON body sent by the webhook and respond with a success message.

📋 What You'll Learn

Create a POST route handler in Next.js using the new App Router conventions

Parse the JSON body from the incoming request

Return a JSON response confirming receipt

Use only functional code patterns recommended in Next.js 14+

Do not use deprecated API routes or class components

💡 Why This Matters

🌍 Real World

Webhooks are widely used to let external services notify your app about events like payments, form submissions, or updates. Handling webhooks correctly is essential for real-time integrations.

💼 Career

Many web developer roles require building or maintaining webhook endpoints to integrate with third-party APIs and services securely and reliably.

1

Create the API route file

Create a file named app/api/webhook/route.ts and export an async function called POST that takes a Request object as a parameter.

NextJS

// Create the file and export async function POST(request: Request) {}

// Your code here

Need a hint?

This is the new way to create API routes in Next.js 14+ using the App Router.

2

Parse JSON body from the request

Inside the POST function, use await request.json() to read the JSON body and store it in a variable called data.

NextJS

export async function POST(request: Request) {
  // Parse JSON body from request
  // Your code here
}

Need a hint?

Use await request.json() to get the webhook data sent as JSON.

3

Return a JSON response confirming receipt

Return a new Response object with a JSON string body containing { message: 'Webhook received' } and set the Content-Type header to application/json.

NextJS

export async function POST(request: Request) {
  const data = await request.json();
  // Return JSON response confirming receipt
  // Your code here
}

Need a hint?

Use new Response() to send back JSON with proper headers.

4

Complete the webhook route handler

Add a comment inside the POST function that says // Process webhook data here just after parsing the JSON body to indicate where webhook logic would go.

NextJS

export async function POST(request: Request) {
  const data = await request.json();
  // Your code here
  return new Response(JSON.stringify({ message: 'Webhook received' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Need a hint?

This comment shows where you would add your webhook processing logic.