Middleware for API routes in NextJS - Performance & Optimization

Performance: Middleware for API routes

MEDIUM IMPACT

Middleware affects the time to process API requests and the responsiveness of the server, impacting interaction speed and server load.

Adding authentication checks to API routes

NextJS

import { NextResponse } from 'next/server';
import { verifyToken } from './auth';

export default function middleware(req) {
  const token = req.cookies.get('token')?.value;
  if (!verifyToken(token)) return new Response('Unauthorized', { status: 401 });
  return NextResponse.next();
}

Uses local token verification without external calls, reducing latency and server dependency.

📈 Performance GainNon-blocking, reduces request delay by 50-200ms

Adding authentication checks to API routes

NextJS

import { NextResponse } from 'next/server';

export default async function middleware(req) {
  const user = await fetch('https://auth.example.com/validate', { headers: { cookie: req.headers.get('cookie') } });
  if (!user.ok) return new Response('Unauthorized', { status: 401 });
  return NextResponse.next();
}

Middleware makes a blocking external API call on every request, delaying response and increasing server load.

📉 Performance CostBlocks rendering for 50-200ms per request depending on network latency

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Middleware with blocking external API calls	0 (server-side)	0	0	[X] Bad
Middleware with local synchronous checks	0 (server-side)	0	0	[OK] Good

Rendering Pipeline

Middleware runs before the API route handler, affecting the server response time and thus the interaction to next paint (INP) metric.

→Server Processing

→Network Response

⚠️ BottleneckBlocking asynchronous operations inside middleware

Core Web Vital Affected

INP

Middleware affects the time to process API requests and the responsiveness of the server, impacting interaction speed and server load.

Optimization Tips

1Avoid blocking asynchronous calls in middleware to keep API responses fast.

2Use local synchronous checks or caching to reduce middleware latency.

3Monitor server response times in DevTools to detect middleware bottlenecks.

Performance Quiz - 3 Questions

What is the main performance risk of using middleware that calls external APIs on every request?

A It reduces the bundle size of the frontend code.

B It increases server response time and delays user interaction.

C It improves the Largest Contentful Paint (LCP) metric.

D It decreases the number of DOM nodes rendered.

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network panel, filter API requests, check response times; use Performance panel to record and analyze server response delays.

What to look for: Look for long server response times before the API response arrives; high blocking time indicates slow middleware.

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