Middleware for API routes in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the middleware function from Next.js.

NextJS

import { [1] } from 'next/server';

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

Amiddleware

BuseMiddleware

ChandleMiddleware

DapplyMiddleware

Attempts:

3 left

💡 Hint

Common Mistakes

Using default import instead of named import.

Using incorrect function names like useMiddleware.

The middleware function is imported from 'next/server' as middleware.

2fill in blank

medium

Complete the code to define a middleware function that logs the request URL.

NextJS

export function middleware(request) {
  console.log(request.[1]);
  return new Response('OK');
}

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

Amethod

Burl

Cheaders

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.method instead of request.url.

Trying to access request.body which is not directly available.

The request.url property contains the full URL of the incoming request.

3fill in blank

hard

Fix the error in the middleware to correctly forward the request to the next handler.

NextJS

export function middleware(request) {
  return [1](request);
}

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

AforwardRequest

Bnext()

ChandleRequest

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Calling a non-existent function like next() or forwardRequest().

Not returning a Response object.

In Next.js middleware, to forward the request, you use fetch(request) to continue the chain.

4fill in blank

hard

Complete the code to create a matcher that applies middleware only to API routes starting with '/api/'.

NextJS

export const config = {
  matcher: [1]
};

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

A'/api/:path*'

B'/((?!_next|api).*)'

C'/api'

D'/dashboard/:path*'

Attempts:

3 left

💡 Hint

Common Mistakes

Using exact path '/api' which doesn't match /api/users.

Using patterns that match non-API routes.

The matcher '/api/:path*' applies to all routes starting with /api/ including subpaths.

5fill in blank

hard

Fill all three blanks to create middleware that blocks requests without a valid token header.

NextJS

export function middleware(request) {
  const token = request.headers.get('[1]');
  if (!token || token !== '[2]') {
    return new Response('Unauthorized', { status: [3] });
  }
  return fetch(request);
}

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

AAuthorization

BX-Auth-Token

CBearer

D401

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong header names like Authorization when the token is in X-Auth-Token.

Returning wrong status codes like 403 instead of 401.

The middleware checks the X-Auth-Token header for the value Bearer and returns a 401 status if unauthorized.

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