Response modification in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is response modification in Next.js?

Response modification means changing the server's reply before it reaches the user. In Next.js, you can adjust headers, status codes, or body content in server actions or API routes.

beginner

How do you set a custom header in a Next.js API route?

Use the Response object’s setHeader method. For example, res.setHeader('Cache-Control', 'max-age=3600') adds a cache control header.

beginner

Why would you modify the response status code in Next.js?

Changing the status code helps tell the browser or client what happened. For example, res.status(404) means the page was not found, so the client can handle it properly.

intermediate

What is a common use case for modifying the response body in Next.js server actions?

You might add extra data or format the response before sending it. For example, wrapping data in an object with a message or filtering sensitive info.

intermediate

How does Next.js 14+ support response modification in the App Router?

Next.js 14+ uses server actions and the new Response API, letting you create and return custom Response objects with headers, status, and body directly from route handlers.

In Next.js API routes, which method sets a response header?

A res.sendHeader()

B res.getHeader()

C res.setHeader()

D res.modifyHeader()

Use res.setHeader() to add or change headers in the response.

What status code should you use to indicate a resource was not found?

A 200

B 302

C 500

D 404

Status code 404 means 'Not Found', telling the client the resource doesn't exist.

Which Next.js feature allows returning custom Response objects?

A Server Actions

B Client Components

C Static Props

D getServerSideProps

Server Actions in Next.js 14+ let you create and return custom Response objects.

Why modify the response body before sending it?

A To add or format data for the client

B To change the HTTP method

C To speed up the server

D To change the URL

Modifying the body lets you customize the data the client receives.

Which of these is NOT a reason to modify response headers?

A Set content type

B Change the request method

C Control caching

D Add security policies

Response headers cannot change the HTTP request method.

Explain how you would modify a response in a Next.js API route to add a custom header and set a 200 status code.

Think about how to use res.setHeader and res.status in your handler.

Describe the benefits of modifying the response body in Next.js server actions and give an example scenario.

Consider why you might want to change what the client receives.

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