Middleware for API routes in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js API middleware?

Consider this Next.js API middleware that adds a custom header before the API handler runs. 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-Custom-Header', 'HelloWorld');
  return response;
}

export async function GET(request) {
  return NextResponse.json({ message: 'API response' });
}

A The response will be a 404 error because middleware blocks the handler.

B The response does not include the custom header because middleware cannot modify headers.

C The response includes the header 'X-Custom-Header: HelloWorld' along with the JSON message.

D The response includes the header but with an empty value.

💡 Hint

Middleware can modify response headers before the handler runs.

The middleware uses NextResponse.next() to continue to the handler and sets a custom header. This header is included in the final response.

📝 Syntax

intermediate

Which middleware syntax is correct for Next.js API routes?

Identify the correct way to write middleware for Next.js API routes to run before the handler.

A export function middleware(req, res, next) { next(); }

B export function middleware(request) { return NextResponse.next(); }

C export function middleware(req) { return res.next(); }

D export default function middleware(req, res) { res.next(); }

💡 Hint

Next.js middleware uses the NextResponse object and a single request parameter.

Next.js middleware receives a request object and returns a NextResponse. It does not use Express-style req, res, next parameters.

🔧 Debug

advanced

Why does this middleware not modify the API response body?

This middleware tries to add a JSON field to the API response body but it does not work. Why?

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();
  const json = JSON.parse(response.body || '{}');
  json.middlewareAdded = true;
  response.body = JSON.stringify(json);
  return response;
}

export async function GET(request) {
  return NextResponse.json({ message: 'Hello' });
}

A The middleware must use res.json() to modify the body, not NextResponse.

B The JSON.parse call throws an error because response.body is undefined.

C The middleware should return a new Response object instead of NextResponse.next().

D Middleware cannot read or modify the response body because it runs before the handler sends it.

💡 Hint

Think about when middleware runs relative to the API handler.

Middleware runs before the API handler sends the response body, so it cannot modify the body content. It can only modify headers or redirect.

❓ state_output

advanced

What is the value of the custom header after multiple middleware run?

Given two middleware functions that both set the same header, what will the client receive?

NextJS

import { NextResponse } from 'next/server';

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

export function secondMiddleware(request) {
  const response = NextResponse.next();
  response.headers.set('X-Trace-Id', 'second');
  return response;
}

A The client receives 'X-Trace-Id: second' because the last middleware overwrites the header.

B The client receives 'X-Trace-Id: first' because only the first middleware header is kept.

C The client receives both headers as a comma-separated list.

D The client receives no 'X-Trace-Id' header because of conflict.

💡 Hint

Headers with the same name get overwritten by later middleware.

When multiple middleware set the same header, the last one to run overwrites the previous value.

🧠 Conceptual

expert

Which statement about Next.js API middleware is true?

Choose the correct statement about how Next.js middleware works with API routes.

A Middleware runs before the API route handler and can modify request headers but not the response body.

B Middleware can replace the API route handler by returning a custom response.

C Middleware runs only on client-side navigation and does not affect API routes.

D Middleware runs after the API route handler and can modify the response body before sending.

💡 Hint

Think about the middleware lifecycle and what it can access.

Next.js middleware runs before the API handler and can modify the request or response headers, redirect, or rewrite, but it cannot modify the response body generated by the handler.