HTTP method handlers (GET, POST) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a GET handler in Next.js API route.

NextJS

export async function [1](request) {
  return new Response('Hello from GET');
}

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

AGET

BPOST

CPUT

DDELETE

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET for fetching data

Misspelling the method name

The GET handler is named GET in Next.js API routes to respond to GET requests.

2fill in blank

medium

Complete the code to define a POST handler that reads JSON body in Next.js API route.

NextJS

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

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

Aurl

Bname

Cmethod

Dheaders

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access request.url or request.method as JSON data

Not awaiting request.json()

The POST handler reads the JSON body and accesses the name property from it.

3fill in blank

hard

Fix the error in the POST handler to correctly parse JSON body.

NextJS

export async function POST(request) {
  const data = request.[1]();
  return new Response(JSON.stringify(data), { status: 200 });
}

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

Ajson()

Btext

Cjson

DjsonData

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting parentheses after json

Using property names instead of method calls

The json() method must be called with parentheses to return a promise that resolves to the parsed JSON.

4fill in blank

hard

Fill both blanks to create a GET handler that returns JSON with status 200.

NextJS

export async function GET(request) {
  const response = new Response(JSON.stringify({ message: 'Hello' }), { status: [1] });
  response.headers.set('Content-Type', [2]);
  return response;
}

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

A200

B'application/json'

C404

D'text/html'

Attempts:

3 left

💡 Hint

Common Mistakes

Using status 404 for success

Setting Content-Type to 'text/html' for JSON data

Status code 200 means success. The Content-Type header must be 'application/json' to indicate JSON data.

5fill in blank

hard

Fill all three blanks to create a POST handler that reads JSON, extracts 'title', and returns it with status 201.

NextJS

export async function POST(request) {
  const data = await request.[1]();
  const title = data.[2];
  return new Response(JSON.stringify({ received: title }), { status: [3] });
}

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

Ajson()

Btitle

C201

Dtext()

Attempts:

3 left

💡 Hint

Common Mistakes

Not awaiting request.json()

Using wrong property name

Using status 200 instead of 201

The POST handler calls json() to parse the body, extracts the 'title' property, and returns a response with status 201 indicating resource creation.