Route handlers for webhooks in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js route handler for a webhook POST request?

Consider this Next.js route handler in the app/api/webhook/route.ts file. What will be the response when a POST request with JSON body {"event":"payment_succeeded"} is sent?

NextJS

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const data = await request.json();
  if (data.event === 'payment_succeeded') {
    return NextResponse.json({ status: 'success', message: 'Payment processed' });
  }
  return NextResponse.json({ status: 'ignored' });
}

A {"status":"ignored"}

B {"status":"success","message":"Payment processed"}

C SyntaxError due to missing await

D TypeError because request.json is not a function

💡 Hint

Check how the JSON body is read and how the condition matches the event.

The handler reads the JSON body with await request.json(). If the event is payment_succeeded, it returns a JSON response with status success and a message. Otherwise, it returns ignored.

📝 Syntax

intermediate

Which option causes a syntax error in this Next.js webhook route handler?

Identify which code snippet will cause a syntax error when used as a Next.js route handler for a webhook.

A export async function POST(request: Request) { const data = await request.json(); return new Response('OK'); }

B export async function POST(request: Request) { const data = await request.json(); return new Response(JSON.stringify({ok:true}), { headers: { 'Content-Type': 'application/json' } }); }

C } ;)'KO'(esnopseR wen nruter ;)(nosj.tseuqer tiawa = atad tsnoc { )tseuqeR :tseuqer(TSOP noitcnuf cnysa tropxe

D export async function POST(request: Request) { const data = await request.json(); return Response.json({ok:true}); }

💡 Hint

Look for missing semicolons or incorrect method calls.

Option D is incorrect because Response.json is not a valid method. The correct way is to use NextResponse.json or create a new Response with JSON string and appropriate headers. Option D is valid JavaScript as semicolons are optional if line breaks are present.

🔧 Debug

advanced

Why does this Next.js webhook route handler fail to process the ping event?

Given this route handler code, why does it fail to return 'pong' when a POST request with JSON body {"event":"ping"} is made?

NextJS

export async function POST(request: Request) {
  const data = request.json();
  if (data.event === 'ping') {
    return new Response('pong');
  }
  return new Response('ignored');
}

A Because request.json() returns a Promise and is not awaited before accessing data.event

B Because the event property does not exist on the request object

C Because POST function must be synchronous, not async

D Because new Response requires a JSON string, not plain text

💡 Hint

Check how asynchronous functions and promises are handled.

The request.json() method returns a Promise. Without await, data is a Promise object, so data.event is undefined, causing the if condition to fail and return 'ignored'.

❓ state_output

advanced

What is the value of the response body when this Next.js webhook route handler receives a GET request?

Analyze this route handler code. What will be the response body if a GET request is sent to this webhook route?

NextJS

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  return NextResponse.json({ message: 'POST received' });
}

export async function GET(request: Request) {
  return NextResponse.json({ message: 'GET not supported' });
}

A {"message":"GET not supported"}

B {"message":"POST received"}

C 404 Not Found error

D 500 Internal Server Error

💡 Hint

Check which function handles GET requests.

The GET function returns a JSON response with message 'GET not supported'. So a GET request will receive that JSON body.

🧠 Conceptual

expert

Which option correctly implements a Next.js webhook route handler that verifies a signature header before processing?

You want to create a Next.js route handler for a webhook that first checks the X-Signature header matches a secret before reading the JSON body. Which code snippet correctly implements this?

A

export async function POST(request: Request) {
  const signature = request.headers['X-Signature'];
  if (signature !== process.env.WEBHOOK_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
  const data = await request.json();
  return new Response('OK');
}

B

export async function POST(request: Request) {
  const signature = request.headers.get('x-signature');
  if (signature !== process.env.WEBHOOK_SECRET) {
    return new Response('Unauthorized', { status: 403 });
  }
  const data = await request.json();
  return new Response('OK');
}

C

export async function POST(request: Request) {
  const signature = request.headers.get('X-Signature');
  if (signature !== process.env.WEBHOOK_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
  const data = await request.json();
  return new Response('OK');
}

D

export async function POST(request: Request) {
  const signature = request.headers.get('X-Signature');
  if (signature === process.env.WEBHOOK_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
  const data = await request.json();
  return new Response('OK');
}

💡 Hint

Remember how to get headers in Next.js route handlers and the correct status code for unauthorized access.

Option C correctly uses request.headers.get() with the exact header name, compares it to the secret, returns 401 Unauthorized if it doesn't match, then processes the JSON body.

Option C uses incorrect header access syntax. Option C uses lowercase header name and 403 status code which is less appropriate here. Option C reverses the condition causing wrong authorization logic.