Response modification in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js API route return?

Consider this Next.js API route handler that modifies the response before sending:

export async function GET() {
  const res = new Response(JSON.stringify({ message: 'Hello' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
  res.headers.set('X-Custom-Header', 'TestValue');
  return res;
}

What will the client receive in the response headers?

NextJS

export async function GET() {
  const res = new Response(JSON.stringify({ message: 'Hello' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
  res.headers.set('X-Custom-Header', 'TestValue');
  return res;
}

A Response with status 200, Content-Type 'application/json', and header 'X-Custom-Header' set to 'TestValue'

B Response with status 200 and Content-Type 'application/json' only, no 'X-Custom-Header'

C Response with status 200 and header 'X-Custom-Header' only, no Content-Type

D Response with status 500 due to header modification error

💡 Hint

Think about how the Response object headers can be modified before returning.

The Response object allows header modification before returning. Setting X-Custom-Header adds it to the response headers along with the original Content-Type.

📝 Syntax

intermediate

Which option correctly modifies the response status in Next.js API route?

Given this Next.js API route snippet, which option correctly changes the response status to 404?

export async function GET() {
  const res = new Response('Not Found');
  // Modify status here
  return res;
}

NextJS

export async function GET() {
  const res = new Response('Not Found');
  // Modify status here
  return res;
}

A res.setStatus(404);

B res.statusCode = 404;

C res = new Response('Not Found', { status: 404 });

D res.status = 404;

💡 Hint

Remember that Response objects are immutable for status after creation.

The Response object status cannot be changed after creation. You must create a new Response with the desired status.

🔧 Debug

advanced

Why does this Next.js API route fail to set a cookie?

Examine this Next.js API route code:

export async function GET() {
  const res = new Response('OK');
  res.headers.append('Set-Cookie', 'token=abc123; HttpOnly');
  return res;
}

Why might the cookie not be set in the browser?

NextJS

export async function GET() {
  const res = new Response('OK');
  res.headers.append('Set-Cookie', 'token=abc123; HttpOnly');
  return res;
}

A Because the Response object headers are immutable and cannot be appended after creation

B Because the Response body must be JSON to set cookies

C Because 'HttpOnly' cookies cannot be set from Next.js API routes

D Because the 'Set-Cookie' header must be set during Response creation, not appended later

💡 Hint

Consider when headers can be set on the Response object.

The Response headers are immutable after creation. To set cookies, you must include the 'Set-Cookie' header in the Response constructor options.

❓ state_output

advanced

What is the output of this Next.js middleware modifying response headers?

Given this Next.js middleware code:

import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('X-Middleware', 'Active');
  return response;
}

What will the client receive in the response headers?

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('X-Middleware', 'Active');
  return response;
}

A Response without 'X-Middleware' header because headers cannot be set in middleware

B Response with header 'X-Middleware' set to 'Active'

C Response with status 500 due to header modification error

D Response with header 'X-Middleware' set to 'next'

💡 Hint

Think about how NextResponse.next() allows header modification.

NextResponse.next() returns a mutable response object. You can set headers on it before returning, so the client receives the custom header.

🧠 Conceptual

expert

Which statement about response modification in Next.js App Router is true?

Choose the correct statement about modifying responses in Next.js App Router server actions or route handlers.

A Response objects are immutable; to change status or headers, create a new Response with desired options

B You can modify the response headers after returning the Response object by mutating it asynchronously

C Next.js automatically merges headers set in multiple middleware and route handlers without conflicts

D You must always use the <code>res</code> object from Express to modify responses in Next.js App Router

💡 Hint

Think about immutability of Response objects in web standards.

Response objects follow web standards and are immutable after creation. To modify status or headers, you must create a new Response object with the desired properties.

Practice

1. In Next.js, what does modifying the response headers allow you to do?

easy

A. Change the React component state on the client

B. Control caching and security policies sent to the browser

C. Modify the URL path of the current page

D. Update the database directly from the response

Solution

1. Step 1: Understand response headers role

   Response headers tell the browser how to handle the data, like caching or security rules.

2. Step 2: Identify what modifying headers affects

   Changing headers controls browser behavior, not client state or URLs.

3. Final Answer:

   Control caching and security policies sent to the browser -> Option B

4. Quick Check:

   Headers control browser policies = A [OK]

Hint: Headers control browser rules like caching and security [OK]

Common Mistakes:

• Thinking headers change client-side state
• Confusing headers with URL routing
• Assuming headers update databases

2. Which of the following is the correct way to set a custom header in a Next.js API route response?

easy

A. res.setHeader('X-Custom-Header', 'value')

B. res.headers['X-Custom-Header'] = 'value'

C. res.header('X-Custom-Header', 'value')

D. res.addHeader('X-Custom-Header', 'value')

Solution

1. Step 1: Recall Next.js API response methods

   Next.js uses Node.js response objects where setHeader is the standard method.

2. Step 2: Compare options to Node.js response API

   Only setHeader is a valid method; others are incorrect or undefined.

3. Final Answer:

   res.setHeader('X-Custom-Header', 'value') -> Option A

4. Quick Check:

   Use setHeader to set headers = D [OK]

Hint: Use res.setHeader() to set headers in Next.js API [OK]

Common Mistakes:

• Using res.headers as an object directly
• Calling non-existent methods like header() or addHeader()
• Confusing client-side and server-side APIs

3. What will be the HTTP status code of this Next.js API response?

export default function handler(req, res) {
  res.status(404).json({ error: 'Not found' });
}

medium

A. 500

B. 200

C. 404

D. 302

Solution

1. Step 1: Identify the status method usage

   The code calls res.status(404) to set the HTTP status code to 404.

2. Step 2: Understand the effect of res.status()

   This sets the response status code before sending JSON data.

3. Final Answer:

   404 -> Option C

4. Quick Check:

   res.status(404) sets status code 404 [OK]

Hint: res.status(code) sets HTTP status code [OK]

Common Mistakes:

• Assuming default 200 status without checking code
• Confusing 404 with 500 or redirect codes
• Ignoring the status() method effect

4. Identify the error in this Next.js API route code that tries to modify the response:

export default function handler(req, res) {
  res.status(200);
  res.json({ message: 'Hello' });
  res.setHeader('X-Test', 'value');
}

medium

A. res.json() cannot be used with status()

B. res.status(200) is missing a return statement

C. res.setHeader() should be called after res.json()

D. Headers must be set before sending the response body

Solution

1. Step 1: Review response order rules

   Headers must be set before sending the response body with res.json().

2. Step 2: Identify incorrect header setting

   res.setHeader() is called after res.json(), which is too late to modify headers.

3. Final Answer:

   Headers must be set before sending the response body -> Option D

4. Quick Check:

   Set headers before body = C [OK]

Hint: Set headers before sending response body [OK]

Common Mistakes:

• Setting headers after res.json()
• Thinking res.status() sends response immediately
• Ignoring response flow order

5. You want to add caching headers to a Next.js API response only if the user is authenticated. Which code snippet correctly modifies the response based on this condition?

export default function handler(req, res) {
  const isAuth = req.headers.authorization === 'secret-token';
  // Add caching headers only if authenticated
  ???
  res.status(200).json({ data: 'Secure data' });
}

hard

A. if (isAuth) { res.setHeader('Cache-Control', 'private, max-age=3600'); }

B. if (!isAuth) { res.setHeader('Cache-Control', 'private, max-age=3600'); }

C. res.setHeader('Cache-Control', 'public, max-age=3600');

D. res.status(401).json({ error: 'Unauthorized' });

Solution

1. Step 1: Understand the condition for caching

   Caching headers should be added only if the user is authenticated (isAuth is true).

2. Step 2: Choose the correct conditional header setting

   if (isAuth) { res.setHeader('Cache-Control', 'private, max-age=3600'); } sets caching headers only when isAuth is true, matching the requirement.

3. Final Answer:

   if (isAuth) { res.setHeader('Cache-Control', 'private, max-age=3600'); } -> Option A

4. Quick Check:

   Set cache header only if authenticated = B [OK]

Hint: Use if (isAuth) to conditionally set headers [OK]

Common Mistakes:

• Setting cache headers when not authenticated
• Using public cache instead of private
• Returning 401 without setting headers when required