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.

Practice

1. What is the main reason Next.js middleware intercepts requests?

easy

A. To render React components on the server

B. To directly update the database

C. To check or modify requests before they reach the app

D. To compile CSS styles

Solution

1. Step 1: Understand middleware role

   Middleware runs before the app processes requests, allowing inspection or modification.

2. Step 2: Identify middleware purpose

   It is used for tasks like login checks, redirects, or adding headers before the app handles the request.

3. Final Answer:

   To check or modify requests before they reach the app -> Option C

4. Quick Check:

   Middleware intercepts requests = B [OK]

Hint: Middleware runs before app handles requests [OK]

Common Mistakes:

• Thinking middleware renders UI components
• Assuming middleware updates databases directly
• Confusing middleware with CSS compilation

2. Which of the following is the correct way to continue request processing in Next.js middleware?

easy

A. return NextResponse.next()

B. return fetch()

C. return res.send()

D. return render()

Solution

1. Step 1: Identify continuation method

   Next.js middleware uses NextResponse.next() to continue processing the request.

2. Step 2: Eliminate incorrect options

   fetch() is for network calls, res.send() is Express.js syntax, render() is unrelated here.

3. Final Answer:

   return NextResponse.next() -> Option A

4. Quick Check:

   Continue middleware with NextResponse.next() = D [OK]

Hint: Use NextResponse.next() to continue middleware [OK]

Common Mistakes:

• Using Express.js methods like res.send()
• Trying to fetch inside middleware to continue
• Calling render() which is not middleware syntax

3. Given this middleware code snippet, what happens when a request to '/dashboard' is made?

import { NextResponse } from 'next/server';
export function middleware(request) {
  if (!request.cookies.get('token')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

medium

A. The user is redirected to '/login' if no token cookie is found

B. The request is blocked with an error

C. The request proceeds without any check

D. The middleware crashes due to syntax error

Solution

1. Step 1: Analyze cookie check

   The middleware checks if the 'token' cookie exists in the request.

2. Step 2: Determine behavior based on cookie

   If no token cookie, it redirects to '/login'; otherwise, it continues processing.

3. Final Answer:

   The user is redirected to '/login' if no token cookie is found -> Option A

4. Quick Check:

   Missing token cookie triggers redirect = A [OK]

Hint: Check cookie presence to decide redirect or continue [OK]

Common Mistakes:

• Assuming request is blocked instead of redirected
• Thinking middleware crashes due to syntax
• Ignoring cookie check and assuming request proceeds

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

import { NextResponse } from 'next/server';
export function middleware(request) {
  if (request.nextUrl.pathname === '/admin') {
    NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

medium

A. Incorrect import statement for NextResponse

B. Missing return before NextResponse.redirect()

C. Using request.nextUrl.pathname instead of request.url

D. NextResponse.next() should not be called

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 B

4. Quick Check:

   Always return redirect response in middleware = A [OK]

Hint: Always return redirect response in middleware [OK]

Common Mistakes:

• Forgetting to return redirect response
• Confusing request.nextUrl with request.url
• Thinking NextResponse.next() is disallowed

5. You want to use Next.js middleware to block access to '/secret' unless a user has a valid 'auth' cookie. Which approach correctly applies this logic and continues processing other requests normally?

hard

A. Throw an error if 'auth' cookie is missing

B. Always return NextResponse.next() without checking cookies

C. Modify the request URL directly without returning a response

D. Return NextResponse.redirect('/login') if no 'auth' cookie; else return NextResponse.next()

Solution

1. Step 1: Define blocking condition

   Check if the 'auth' cookie exists when the request is for '/secret'.

2. Step 2: Apply redirect or continue

   If no cookie, return a redirect response to '/login'; otherwise, call NextResponse.next() to continue.

3. Final Answer:

   Return NextResponse.redirect('/login') if no 'auth' cookie; else return NextResponse.next() -> Option D

4. Quick Check:

   Redirect missing auth, else continue = C [OK]

Hint: Redirect missing auth cookie, else continue with NextResponse.next() [OK]

Common Mistakes:

• Not returning redirect response
• Throwing errors instead of redirecting
• Modifying request without returning response