Request modification in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to modify the request method to POST in a Next.js API route.

NextJS

export async function handler(req, res) {
  if (req.method === '[1]') {
    res.status(200).json({ message: 'Success' });
  } else {
    res.status(405).end();
  }
}

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

APOST

BGET

CPUT

DDELETE

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' instead of 'POST' for modifying data.

The request method is checked against 'POST' to handle POST requests correctly.

2fill in blank

medium

Complete the code to read JSON data from the request body in a Next.js API route.

NextJS

export async function handler(req, res) {
  if (req.method === 'POST') {
    const data = await req.[1]();
    res.status(200).json({ received: data });
  } else {
    res.status(405).end();
  }
}

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

Atext

Bjson

CformData

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' instead of 'json' to parse JSON data.

Use req.json() to parse JSON data from the request body.

3fill in blank

hard

Fix the error in the code to correctly modify the request headers in a Next.js middleware.

NextJS

import { NextResponse } from 'next/server';

export function middleware(req) {
  const res = NextResponse.next();
  res.headers.set('[1]', 'application/json');
  return res;
}

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

AContent-Type

BAuthorization

CAccept

Dcontent-type

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'content-type' which might cause issues in some environments.

The header name must be 'Content-Type' with correct casing to set the response content type.

4fill in blank

hard

Fill both blanks to correctly clone and modify the request URL in Next.js middleware.

NextJS

import { NextResponse } from 'next/server';

export function middleware(req) {
  const url = req.nextUrl.clone();
  url.[1] = '/new-path';
  return NextResponse.rewrite(url.[2]);
}

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

Apathname

Bhref

Corigin

Dsearch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'origin' or 'search' instead of 'pathname' or 'href'.

Modify the pathname to change the path, and use href to get the full URL string for rewriting.

5fill in blank

hard

Fill all three blanks to correctly modify request headers and method in Next.js middleware.

NextJS

import { NextResponse } from 'next/server';

export function middleware(req) {
  const newHeaders = new Headers(req.headers);
  newHeaders.set('[1]', 'application/json');
  const newRequest = req.clone({
    method: '[2]',
    headers: newHeaders
  });
  return NextResponse.next({ request: newRequest, [3]: true });
}

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

AContent-Type

BPOST

CwaitUntil

Dcache

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong header names, wrong method names, or incorrect middleware options.

Set the 'Content-Type' header, change the method to 'POST', and use 'waitUntil' to handle async tasks in middleware.

Practice

1. In Next.js, what is the main purpose of modifying a request in middleware?

easy

A. To change request details like headers or body before the app processes it

B. To directly send a response to the client without processing

C. To update the database with request data

D. To log request details only without changing anything

Solution

1. Step 1: Understand middleware role in Next.js

   Middleware runs before the app processes a request, allowing changes to the request.

2. Step 2: Identify what request modification means

   Modifying means changing headers, body, or other request parts before the app sees it.

3. Final Answer:

   To change request details like headers or body before the app processes it -> Option A

4. Quick Check:

   Request modification = change request details [OK]

Hint: Middleware changes requests before app sees them [OK]

Common Mistakes:

• Confusing request modification with sending responses
• Thinking middleware updates databases directly
• Assuming middleware only logs requests

2. Which of the following is the correct way to return a modified request in Next.js middleware?

easy

A. return NextResponse.next(request);

B. return NextResponse.next(new Request(request));

C. return NextResponse.redirect('/new-path');

D. return NextResponse.next(new Request(request, { headers: { 'x-new': 'value' } }));

Solution

1. Step 1: Understand how to modify requests in Next.js middleware

   You must create a new Request object with changes (like new headers) and pass it to NextResponse.next().

2. Step 2: Check each option

   return NextResponse.next(request); passes original request without changes. return NextResponse.next(new Request(request)); creates a new Request but without changes. return NextResponse.next(new Request(request, { headers: { 'x-new': 'value' } })); creates a new Request with modified headers correctly. return NextResponse.redirect('/new-path'); redirects instead of modifying request.

3. Final Answer:

   return NextResponse.next(new Request(request, { headers: { 'x-new': 'value' } })); -> Option D

4. Quick Check:

   New Request with changes + NextResponse.next() = D [OK]

Hint: Wrap new Request with changes inside NextResponse.next() [OK]

Common Mistakes:

• Returning original request without changes
• Using redirect instead of next() for modification
• Not creating a new Request object for changes

3. Given this middleware code snippet, what will be the value of the header 'x-user' in the request seen by the app?

import { NextResponse } from 'next/server';
export function middleware(request) {
  const newHeaders = new Headers(request.headers);
  newHeaders.set('x-user', 'alice');
  const newRequest = new Request(request.url, { headers: newHeaders });
  return NextResponse.next(newRequest);
}

medium

A. null

B. undefined

C. alice

D. original header value if any

Solution

1. Step 1: Analyze header modification in middleware

   The code creates new headers from the original, sets 'x-user' to 'alice', then creates a new Request with these headers.

2. Step 2: Determine header value passed to app

   The app receives the new Request with 'x-user' header set to 'alice', so the value is 'alice'.

3. Final Answer:

   alice -> Option C

4. Quick Check:

   Header 'x-user' set to 'alice' in new Request [OK]

Hint: Headers set in new Request appear in app request [OK]

Common Mistakes:

• Assuming original headers remain unchanged
• Thinking header is removed or null
• Confusing middleware response headers with request headers

4. Identify the error in this Next.js middleware code that tries to add a custom header:

import { NextResponse } from 'next/server';
export function middleware(request) {
  request.headers.set('x-custom', '123');
  return NextResponse.next(request);
}

medium

A. Headers are immutable; cannot modify request.headers directly

B. NextResponse.next() cannot accept a Request object

C. Missing await keyword for asynchronous header setting

D. Middleware must return a Response, not NextResponse

Solution

1. Step 1: Check how headers can be modified in Next.js middleware

   Request headers are immutable; you cannot change them directly on the original request object.

2. Step 2: Identify correct way to modify headers

   You must create a new Headers object, modify it, then create a new Request with those headers.

3. Final Answer:

   Headers are immutable; cannot modify request.headers directly -> Option A

4. Quick Check:

   Request.headers immutable = B [OK]

Hint: Request.headers are read-only; create new Headers to modify [OK]

Common Mistakes:

• Trying to set headers directly on request.headers
• Assuming NextResponse.next() rejects Request objects
• Confusing async code requirement for headers

5. You want to add a custom header 'x-trace-id' with a unique value to every request in Next.js middleware, but only if the header is not already present. Which code snippet correctly implements this?

hard

A. import { NextResponse } from 'next/server';
export function middleware(request) {
const headers = request.headers;
if (!headers.has('x-trace-id')) {
headers.set('x-trace-id', crypto.randomUUID());
}
return NextResponse.next(request);
}

B. import { NextResponse } from 'next/server';
export function middleware(request) {
if (!request.headers.has('x-trace-id')) {
const headers = new Headers(request.headers);
headers.set('x-trace-id', crypto.randomUUID());
const newRequest = new Request(request.url, { headers });
return NextResponse.next(newRequest);
}
return NextResponse.next();
}

C. import { NextResponse } from 'next/server';
export function middleware(request) {
const newRequest = new Request(request.url, { headers: { 'x-trace-id': crypto.randomUUID() } });
return NextResponse.next(newRequest);
}

D. import { NextResponse } from 'next/server';
export function middleware(request) {
const headers = new Headers();
headers.set('x-trace-id', crypto.randomUUID());
const newRequest = new Request(request.url, { headers });
return NextResponse.next(newRequest);
}

Solution

1. Step 1: Identify the correct conditional logic and immutable handling

   Check !request.headers.has('x-trace-id'), then const headers = new Headers(request.headers); headers.set('x-trace-id', crypto.randomUUID()); const newRequest = new Request(request.url, { headers }); return NextResponse.next(newRequest); else return NextResponse.next().

2. Step 2: Why it works

   Clones headers immutably, adds conditionally if missing, preserves other headers, forwards new request or original.

3. Step 3: Why others fail

   Direct set on request.headers throws immutable error. new Request with { headers: { 'x-trace-id': ... } } replaces all headers. new Headers() starts empty, loses original headers.

4. Final Answer:

   import { NextResponse } from 'next/server'; export function middleware(request) { if (!request.headers.has('x-trace-id')) { const headers = new Headers(request.headers); headers.set('x-trace-id', crypto.randomUUID()); const newRequest = new Request(request.url, { headers }); return NextResponse.next(newRequest); } return NextResponse.next(); } -> Option B

5. Quick Check:

   Check header, clone headers, set new, return new Request = A [OK]

Hint: Clone headers, check presence, set if missing, return new Request [OK]

Common Mistakes:

• Modifying request.headers directly
• Overwriting all headers instead of cloning
• Not checking if header already exists