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.

Practice

1. What is the main purpose of middleware in Next.js API routes?

easy

A. To run code before the API route handles a request

B. To replace the API route handler completely

C. To style the API response

D. To store data permanently on the server

Solution

1. Step 1: Understand middleware role

   Middleware runs before the API route handler to process requests.

2. Step 2: Identify correct purpose

   It can check, block, or modify requests but does not replace handlers or style responses.

3. Final Answer:

   To run code before the API route handles a request -> Option A

4. Quick Check:

   Middleware runs before API handler [OK]

Hint: Middleware runs before API handler to control requests [OK]

Common Mistakes:

• Thinking middleware replaces the API handler
• Confusing middleware with styling or storage
• Assuming middleware runs after the API handler

2. Which of the following is the correct way to continue to the API route handler inside Next.js middleware?

easy

A. return NextResponse.stop()

B. return NextResponse.redirect()

C. return NextResponse.next()

D. return NextResponse.error()

Solution

1. Step 1: Recall Next.js middleware continuation method

   To continue processing the request, middleware must call NextResponse.next().

2. Step 2: Match correct method

   NextResponse.stop() halts, redirect() sends elsewhere, error() signals failure.

3. Final Answer:

   return NextResponse.next() -> Option C

4. Quick Check:

   Use NextResponse.next() to continue [OK]

Hint: Use NextResponse.next() to proceed to API handler [OK]

Common Mistakes:

• Using NextResponse.stop() which blocks the request
• Confusing redirect() with continuing
• Forgetting to return NextResponse.next()

3. Given this middleware code, what will happen when a request with header x-auth: secret is sent?

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (request.headers.get('x-auth') !== 'secret') {
    return NextResponse.redirect(new URL('/unauthorized', request.url));
  }
  return NextResponse.next();
}

medium

A. The request is redirected to /unauthorized

B. The request continues to the API route handler

C. The middleware throws an error

D. The request is blocked with no response

Solution

1. Step 1: Check header condition

   The middleware checks if 'x-auth' header equals 'secret'. If yes, it continues.

2. Step 2: Analyze given header

   The request has 'x-auth: secret', so condition is false and middleware returns NextResponse.next().

3. Final Answer:

   The request continues to the API route handler -> Option B

4. Quick Check:

   Header matches 'secret' so continue [OK]

Hint: Check header value to decide redirect or continue [OK]

Common Mistakes:

• Assuming redirect happens even if header matches
• Thinking middleware throws error on mismatch
• Ignoring header case sensitivity

4. Identify the error in this Next.js middleware code:

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (!request.headers.get('authorization')) {
    NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

medium

A. Using 'authorization' header instead of 'auth'

B. Middleware function must be async

C. NextResponse.next() should be inside the if block

D. Missing return before NextResponse.redirect

Solution

1. Step 1: Check redirect usage

   NextResponse.redirect must be returned to stop further processing.

2. Step 2: Identify missing return

   The code calls NextResponse.redirect but does not return it, so middleware continues incorrectly.

3. Final Answer:

   Missing return before NextResponse.redirect -> Option D

4. Quick Check:

   Always return redirect response [OK]

Hint: Always return redirect to stop middleware flow [OK]

Common Mistakes:

• Not returning redirect response
• Thinking middleware must be async
• Misplacing NextResponse.next() inside if block

5. You want to create middleware that blocks requests to API routes if the query parameter token is missing or empty. Which code correctly implements this behavior?

hard

A. export function middleware(request) {
const url = new URL(request.url);
if (!url.searchParams.get('token')) {
return NextResponse.redirect(new URL('/error', request.url));
}
return NextResponse.next();
}

B. export function middleware(request) {
if (!request.query.token) {
return NextResponse.redirect('/error');
}
return NextResponse.next();
}

C. export function middleware(request) {
if (request.url.token === '') {
return NextResponse.next();
}
return NextResponse.redirect('/error');
}

D. export function middleware(request) {
const token = request.headers.get('token');
if (!token) {
return NextResponse.next();
}
return NextResponse.redirect('/error');
}

Solution

1. Step 1: Access query parameters correctly

   Use new URL(request.url) and url.searchParams.get('token') to read query params.

2. Step 2: Check token presence and redirect if missing

   If token is missing or empty, redirect to /error; otherwise continue with NextResponse.next().

3. Final Answer:

   Code that checks query param and redirects if missing -> Option A

4. Quick Check:

   Use URL and searchParams for query checks [OK]

Hint: Use URL and searchParams to check query tokens [OK]

Common Mistakes:

• Trying to access query params directly on request
• Checking headers instead of query parameters
• Reversing redirect and continue logic