Response modification in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a custom header in a Next.js API route response.

NextJS

export async function GET() {
  const response = new Response('Hello World');
  response.headers.set('[1]', 'application/json');
  return response;
}

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

AAuthorization

BAccept

CContent-Type

DCache-Control

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Accept' instead of 'Content-Type' will not set the response content type.

Setting 'Authorization' header is for requests, not responses.

The Content-Type header tells the client what type of data is being sent. Here, setting it to application/json indicates JSON data.

2fill in blank

medium

Complete the code to modify the response status code in a Next.js API route.

NextJS

export async function GET() {
  return new Response('Not Found', { status: [1] });
}

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

A200

B404

C500

D301

Attempts:

3 left

💡 Hint

Common Mistakes

Using 200 means success, which doesn't match the 'Not Found' message.

Using 500 means server error, which is not appropriate here.

The status code 404 means 'Not Found', which matches the response message.

3fill in blank

hard

Fix the error in setting multiple headers in the Next.js response object.

NextJS

export async function GET() {
  const headers = new Headers();
  headers.append('X-Custom-Header', 'value1');
  headers.[1]('X-Another-Header', 'value2');
  return new Response('OK', { headers });
}

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

Aadd

Binsert

Cpush

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'add' or 'push' causes runtime errors because these methods don't exist on Headers.

Using 'append' again would add multiple values to the same header name.

The Headers object uses set to add or overwrite a header. append adds a new value, but to set a new header, set is correct.

4fill in blank

hard

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

NextJS

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

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

A200

B404

CContent-Type

DAuthorization

Attempts:

3 left

💡 Hint

Common Mistakes

Using 404 status with a success message is contradictory.

Using 'Authorization' header instead of 'Content-Type' is incorrect here.

Status 200 means success. The header Content-Type tells the client the response is JSON.

5fill in blank

hard

Fill all three blanks to create a Next.js API response with a JSON body, custom header, and status code.

NextJS

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

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

Aresult

B404

CContent-Type

D200

Attempts:

3 left

💡 Hint

Common Mistakes

Using 404 status with a success object is wrong.

Using wrong header names causes clients to misinterpret the data.

The response body is the result object stringified. Status 200 means success. Header Content-Type indicates JSON data.