Request modification in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js server action modifying a request header?

Consider this Next.js server action that modifies the request headers before processing:

export async function POST(request: Request) {
  const newHeaders = new Headers(request.headers);
  newHeaders.set('x-custom', '123');
  const modifiedRequest = new Request(request.url, {
    method: request.method,
    headers: newHeaders,
    body: await request.text()
  });
  const customHeader = modifiedRequest.headers.get('x-custom');
  return new Response(customHeader);
}

What will be the response body when this action is called?

NextJS

export async function POST(request: Request) {
  const newHeaders = new Headers(request.headers);
  newHeaders.set('x-custom', '123');
  const modifiedRequest = new Request(request.url, {
    method: request.method,
    headers: newHeaders,
    body: await request.text()
  });
  const customHeader = modifiedRequest.headers.get('x-custom');
  return new Response(customHeader);
}

A "123"

B "undefined"

C ""

D "null"

💡 Hint

Think about how headers are copied and set in the new Request object.

The new Headers object copies all original headers, then sets 'x-custom' to '123'. The new Request uses these headers, so getting 'x-custom' returns '123'.

📝 Syntax

intermediate

Which option causes a syntax error in Next.js server action modifying request?

Identify which code snippet will cause a syntax error when trying to modify a request in a Next.js server action.

A const newReq = new Request(request.url, { method: 'POST', headers: newHeaders });

B const newHeaders = new Headers(request.headers); newHeaders.set('x', '1');

C const newReq = new Request(request.url, { method: 'POST', headers: request.headers.set('x', '1') });

D const newHeaders = new Headers(request.headers); newHeaders.append('x', '1');

💡 Hint

Check if the method used on headers returns a new object or modifies in place.

Headers.set() modifies the Headers object in place and returns void, so using it directly inside the headers property causes a syntax error.

🔧 Debug

advanced

Why does this Next.js server action fail to modify the request body?

Given this server action code:

export async function POST(request: Request) {
  const newHeaders = new Headers(request.headers);
  newHeaders.set('x-modified', 'true');
  const modifiedRequest = new Request(request.url, {
    method: 'POST',
    headers: newHeaders,
    body: request.body
  });
  const text = await modifiedRequest.text();
  return new Response(text);
}

Why does calling modifiedRequest.text() throw an error?

NextJS

export async function POST(request: Request) {
  const newHeaders = new Headers(request.headers);
  newHeaders.set('x-modified', 'true');
  const modifiedRequest = new Request(request.url, {
    method: 'POST',
    headers: newHeaders,
    body: request.body
  });
  const text = await modifiedRequest.text();
  return new Response(text);
}

A Headers cannot be modified after the request is created, causing a runtime error.

B The original request body is a stream that can only be read once, so passing request.body causes an error.

C The method 'POST' is invalid in the new Request constructor, causing a syntax error.

D The new Request constructor requires a JSON body, so passing a stream causes a type error.

💡 Hint

Think about how request bodies behave as streams in web APIs.

Request bodies are streams that can only be read once. Passing request.body to a new Request after it was already read causes an error because the stream is locked or consumed.

❓ state_output

advanced

What is the value of the header after this Next.js server action modifies it twice?

Analyze this server action:

export async function POST(request: Request) {
  const headers = new Headers(request.headers);
  headers.set('x-count', '1');
  headers.set('x-count', String(Number(headers.get('x-count')) + 1));
  return new Response(headers.get('x-count'));
}

What will be the response body?

NextJS

export async function POST(request: Request) {
  const headers = new Headers(request.headers);
  headers.set('x-count', '1');
  headers.set('x-count', String(Number(headers.get('x-count')) + 1));
  return new Response(headers.get('x-count'));
}

A "undefined"

B "1"

C "NaN"

D "2"

💡 Hint

Consider how headers.set and headers.get work sequentially.

First, 'x-count' is set to '1'. Then it is read, converted to number 1, incremented to 2, and set again. So the final value is '2'.

🧠 Conceptual

expert

Which statement about modifying requests in Next.js server actions is true?

Choose the correct statement about modifying incoming requests in Next.js server actions.

A To modify headers or body, you must create a new Request object with the desired changes because Request objects are immutable.

B You can directly modify the incoming Request object headers and body without creating a new Request.

C Modifying the headers object returned by request.headers directly changes the original request headers.

D Next.js server actions automatically clone and allow mutation of the request object passed in.

💡 Hint

Think about immutability of web Request objects.

Request objects are immutable. To change headers or body, you create a new Request with the desired modifications.