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.

Practice

1. What HTTP method should you use in a Next.js route handler to receive webhook events?

easy

A. GET

B. POST

C. PUT

D. DELETE

Solution

1. Step 1: Understand webhook data sending

   Webhooks send data to your server, usually using the POST method to submit event payloads.

2. Step 2: Match HTTP method in Next.js route handler

   To receive webhook data, your Next.js route handler must listen for POST requests.

3. Final Answer:

   POST -> Option B

4. Quick Check:

   Webhook data uses POST = POST [OK]

Hint: Webhooks send data with POST method, always listen for POST [OK]

Common Mistakes:

• Using GET method which does not carry webhook payload
• Using PUT or DELETE which are not standard for webhooks
• Not specifying method and allowing all methods

2. Which of the following is the correct syntax to export a POST route handler in Next.js for a webhook?

easy

A. export function POST(req) { return new Response('ok') }

B. export default function handler(req, res) { res.send('ok') }

C. export async function get(req) { return Response.json('ok') }

D. export function postHandler(req, res) { res.json('ok') }

Solution

1. Step 1: Identify Next.js route handler syntax

   Next.js route handlers export named functions matching HTTP methods, e.g., export function POST(req) { ... }

2. Step 2: Check each option for correct syntax

   export function POST(req) { return new Response('ok') } uses correct named export POST with a Request object and returns a Response. Others use Express style or wrong method names.

3. Final Answer:

   export function POST(req) { return new Response('ok') } -> Option A

4. Quick Check:

   Named export POST with Request and Response = export function POST(req) { return new Response('ok') } [OK]

Hint: Use named export POST(req) returning Response for webhook handlers [OK]

Common Mistakes:

• Using default export instead of named export for POST
• Using lowercase 'post' instead of uppercase 'POST'
• Mixing Express.js syntax with Next.js route handlers

3. Given this Next.js route handler code for a webhook, what will be the HTTP status code of the response?

export async function POST(req) {
  const data = await req.json();
  if (data.event === 'ping') {
    return new Response('pong', { status: 200 });
  }
  return new Response('ignored', { status: 204 });
}

medium

A. Always 204

B. Always 200

C. 200 if event is 'ping', otherwise 204

D. 500 on error

Solution

1. Step 1: Analyze conditional response

   If the JSON body has event equal to 'ping', the handler returns status 200 with 'pong'. Otherwise, it returns status 204 with 'ignored'.

2. Step 2: Understand status codes

   Status 200 means OK, 204 means No Content (successful but no response body expected). The code matches these conditions exactly.

3. Final Answer:

   200 if event is 'ping', otherwise 204 -> Option C

4. Quick Check:

   Conditional status 200 or 204 = 200 if event is 'ping', otherwise 204 [OK]

Hint: Check conditions returning different status codes in route handler [OK]

Common Mistakes:

• Assuming always 200 regardless of condition
• Confusing 204 with error status
• Ignoring async/await for JSON parsing

4. Identify the error in this Next.js webhook route handler code:

export async function POST(req) {
  const body = await req.json;
  return new Response('Received');
}

medium

A. No error, code is correct

B. Response should be JSON, not plain text

C. POST function must be synchronous

D. Missing parentheses when calling req.json()

Solution

1. Step 1: Check usage of req.json

   req.json is a function and must be called with parentheses: req.json()

2. Step 2: Verify other parts

   Returning new Response with plain text is valid; async function is allowed. So only missing parentheses is error.

3. Final Answer:

   Missing parentheses when calling req.json() -> Option D

4. Quick Check:

   req.json() requires parentheses = Missing parentheses when calling req.json() [OK]

Hint: Always call req.json() as a function with parentheses [OK]

Common Mistakes:

• Forgetting parentheses on req.json causing runtime error
• Assuming POST must be synchronous
• Thinking Response must be JSON always

5. You want to create a Next.js webhook route handler that only accepts POST requests, verifies a secret token in headers, and responds with status 401 if unauthorized. Which code snippet correctly implements this?

hard

A. export async function POST(req) {
const token = req.headers.get('x-secret-token');
if (token !== 'mysecret') {
return new Response('Unauthorized', { status: 401 });
}
return new Response('Webhook received', { status: 200 });
}

B. export function GET(req) {
const token = req.headers['x-secret-token'];
if (token !== 'mysecret') {
return new Response('Unauthorized', { status: 401 });
}
return new Response('Webhook received', { status: 200 });
}

C. export async function POST(req, res) {
if (req.headers['x-secret-token'] !== 'mysecret') {
res.status(401).send('Unauthorized');
} else {
res.status(200).send('Webhook received');
}
}

D. export async function POST(req) {
const token = req.headers.get('secret-token');
if (token === 'mysecret') {
return new Response('Unauthorized', { status: 401 });
}
return new Response('Webhook received', { status: 200 });
}

Solution

1. Step 1: Check method and header access

   Webhook must use POST method and access headers with req.headers.get('header-name'). export async function POST(req) { const token = req.headers.get('x-secret-token'); if (token !== 'mysecret') { return new Response('Unauthorized', { status: 401 }); } return new Response('Webhook received', { status: 200 }); } uses POST and correct header name 'x-secret-token'.

2. Step 2: Verify authorization logic and response

   If token mismatches, respond 401 Unauthorized; else respond 200 OK. export async function POST(req) { const token = req.headers.get('x-secret-token'); if (token !== 'mysecret') { return new Response('Unauthorized', { status: 401 }); } return new Response('Webhook received', { status: 200 }); } correctly implements this logic.

3. Final Answer:

   Option A code snippet -> Option A

4. Quick Check:

   POST + req.headers.get + 401 on bad token = export async function POST(req) { const token = req.headers.get('x-secret-token'); if (token !== 'mysecret') { return new Response('Unauthorized', { status: 401 }); } return new Response('Webhook received', { status: 200 }); } [OK]

Hint: Use POST, req.headers.get, and return 401 if token invalid [OK]

Common Mistakes:

• Using GET instead of POST for webhook
• Accessing headers as object instead of using .get()
• Reversing authorization logic (401 on valid token)
• Using Express style req, res in Next.js route handlers