Response formatting in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to send a JSON response with Next.js.

NextJS

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello' }), {
    headers: { 'Content-Type': [1] }
  });
}

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

A'application/json'

B'text/html'

C'text/plain'

D'application/xml'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text/html' or 'text/plain' as Content-Type for JSON response.

The header 'Content-Type': 'application/json' tells the browser the response is JSON.

2fill in blank

medium

Complete the code to return a 404 status with a JSON error message.

NextJS

export async function GET() {
  return new Response(JSON.stringify({ error: 'Not found' }), {
    status: [1],
    headers: { 'Content-Type': 'application/json' }
  });
}

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

A500

B404

C200

D301

Attempts:

3 left

💡 Hint

Common Mistakes

Using 200 status code for error responses.

Using 500 which means server error instead of not found.

Status code 404 means the requested resource was not found.

3fill in blank

hard

Fix the error in setting a custom header in the response.

NextJS

export async function GET() {
  return new Response('OK', {
    headers: { [1]: 'no-cache' }
  });
}

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

A'cache-control'

BCache-Control

C'cachecontrol'

D'Cache-Control'

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around header name.

Using lowercase or missing hyphen in header name.

Headers keys must be strings with correct casing, so use 'Cache-Control'.

4fill in blank

hard

Fill both blanks to create a JSON response with a 201 status and a custom header.

NextJS

export async function POST() {
  return new Response(JSON.stringify({ success: true }), {
    status: [1],
    headers: { [2]: 'application/json' }
  });
}

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

A201

B200

C'Content-Type'

D'Accept'

Attempts:

3 left

💡 Hint

Common Mistakes

Using status 200 instead of 201 for creation.

Using 'Accept' header instead of 'Content-Type'.

Status 201 means resource created. The header 'Content-Type' must be set to 'application/json' for JSON responses.

5fill in blank

hard

Fill all three blanks to return a JSON response with a 400 status, a custom error message, and the correct header.

NextJS

export async function GET() {
  const error = { message: [1] };
  return new Response(JSON.stringify(error), {
    status: [2],
    headers: { [3]: 'application/json' }
  });
}

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

A'Invalid request'

B400

C'Content-Type'

D'Error-Message'

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the error message string.

Using wrong status code like 200 or 500.

Using incorrect header name.

The error message is a string, status 400 means bad request, and 'Content-Type' header must be set to 'application/json'.