Why middleware intercepts requests in NextJS - Visual Breakdown

Concept Flow - Why middleware intercepts requests

Incoming Request

↓

Middleware Intercepts

↓

Modify Request

↓

Pass to Next

↓

Final Handler (Page/API)

Middleware catches requests first to check or change them before they reach the final page or API.

Execution Sample

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (!request.nextUrl.pathname.startsWith('/admin')) {
    return NextResponse.next();
  }
  return NextResponse.redirect(new URL('/login', request.url));
}

This middleware checks if the path starts with '/admin'. If not, it lets the request continue. Otherwise, it redirects to '/login'.

Execution Table

Step	Request Path	Condition	Action	Result
1	/home	Does path start with '/admin'? No	Allow request to continue	Request passes to final handler
2	/admin/dashboard	Does path start with '/admin'? Yes	Redirect to '/login'	Response sent with redirect
3	/admin/settings	Does path start with '/admin'? Yes	Redirect to '/login'	Response sent with redirect
4	/about	Does path start with '/admin'? No	Allow request to continue	Request passes to final handler

💡 Middleware stops or passes request based on path check

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
request.nextUrl.pathname	/home	/home	/admin/dashboard	/admin/settings	/about
condition (startsWith '/admin')	N/A	false	true	true	false
action taken	N/A	next()	redirect('/login')	redirect('/login')	next()

Key Moments - 2 Insights

Why does middleware run before the page or API handler?

Middleware intercepts requests first to allow checks or changes before the final handler runs, as shown in the execution_table where action depends on the condition before passing on.

What happens if middleware redirects a request?

If middleware redirects, it sends a response immediately and the request does not reach the final handler, as seen in steps 2 and 3 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what action is taken when the request path is '/about'?

A Redirect to '/login'

B Allow request to continue

C Block the request

D Modify the request path

💡 Hint

Check the row where Request Path is '/about' in the execution_table

At which step does the middleware send a redirect response?

A Step 2

B Step 1

C Step 4

D Step 5

💡 Hint

Look for 'redirect' action in the execution_table rows

If the condition changed to check for '/user' instead of '/admin', what would happen at step 2?

A Block the request

B Redirect to '/login'

C Allow request to continue

D Cause an error

💡 Hint

Consider the condition and path '/admin/dashboard' at step 2 in variable_tracker

Concept Snapshot

Middleware in Next.js runs before pages or APIs.
It checks or changes requests.
It can allow, redirect, or block requests.
Use conditions on request paths.
Return NextResponse.next() to continue.
Return NextResponse.redirect() to redirect.

Full Transcript

Middleware in Next.js intercepts incoming requests before they reach the final page or API handler. It checks the request path and decides what to do. For example, if the path starts with '/admin', middleware can redirect the user to a login page. Otherwise, it lets the request continue. This lets developers control access or modify requests early. The execution table shows requests with different paths and how middleware acts on them. Variables track the path, condition result, and action taken at each step. Key moments clarify why middleware runs first and what happens on redirect. The quiz tests understanding of these steps and outcomes.