Route handlers for webhooks in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a POST route handler for a webhook in Next.js.

NextJS

export async function [1](request) {
  const data = await request.json();
  return new Response('Webhook received', { status: 200 });
}

Drag options to blanks, or click blank then click option'

ADELETE

BGET

CPOST

DPUT

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST

Using PUT or DELETE which are not typical for webhooks

The POST method is used to handle webhook requests because webhooks usually send data to your server.

2fill in blank

medium

Complete the code to parse JSON body from the webhook request.

NextJS

export async function POST(request) {
  const [1] = await request.json();
  return new Response('Data processed', { status: 200 });
}

Drag options to blanks, or click blank then click option'

Abody

Bpayload

Cjson

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names that don't represent data clearly

Forgetting to await request.json()

We assign the parsed JSON to a variable named data to represent the webhook payload.

3fill in blank

hard

Fix the error in the route handler to correctly respond with JSON content type.

NextJS

export async function POST(request) {
  const data = await request.json();
  return new Response(JSON.stringify({ message: 'Success' }), { headers: { '[1]': 'application/json' }, status: 200 });
}

Drag options to blanks, or click blank then click option'

AAccept

BContent-Type

Ccontent-type

DAuthorization

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'content-type' which may cause issues

Using wrong headers like 'Accept' or 'Authorization'

The header Content-Type must be capitalized exactly to tell the client the response is JSON.

4fill in blank

hard

Fill both blanks to create a route handler that responds with status 400 if no JSON body is sent.

NextJS

export async function POST(request) {
  try {
    const data = await request.[1]();
    if (!data) {
      return new Response('Bad Request', { status: [2] });
    }
    return new Response('OK', { status: 200 });
  } catch {
    return new Response('Bad Request', { status: 400 });
  }
}

Drag options to blanks, or click blank then click option'

Ajson

B400

Cbody

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method to parse body

Using incorrect status code for bad request

We use request.json() to parse JSON body and respond with status 400 for bad requests.

5fill in blank

hard

Fill all three blanks to create a route handler that logs the webhook event type and returns a JSON response.

NextJS

export async function POST(request) {
  const [1] = await request.json();
  console.log('Received event:', [2]);
  return new Response(JSON.stringify({ success: true, event: [3] }), {
    headers: { 'Content-Type': 'application/json' },
    status: 200
  });
}

Drag options to blanks, or click blank then click option'

Apayload

Bpayload.type

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined variables

Not accessing the event type correctly

The JSON body is stored in payload. We log and return the type property from it.