Middleware.ts file convention in NextJS - Step-by-Step Execution

Concept Flow - Middleware.ts file convention

Request Received

↓

Middleware.ts Runs

↓

Check URL/Headers

↓

Allow Request

→Continue to Route Handler

↓

Modify Request/Response

↓

Redirect or Block

↓

Response Sent

Middleware.ts runs on every request, checks or modifies it, then decides to continue, redirect, or block.

Execution Sample

NextJS

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

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

This middleware redirects users trying to access '/admin' to '/login', otherwise lets requests continue.

Execution Table

Step	Request URL	Condition	Action	Result
1	/admin/dashboard	URL starts with '/admin'	Redirect to '/login'	Redirect response sent
2	/about	URL does not start with '/admin'	Continue	Request continues to route handler
3	/admin/settings	URL starts with '/admin'	Redirect to '/login'	Redirect response sent
4	/home	URL does not start with '/admin'	Continue	Request continues to route handler

💡 Middleware ends by either redirecting or allowing request to continue.

Variable Tracker

Variable	After 1	After 2	After 3	After 4
request.nextUrl.pathname	/admin/dashboard	/about	/admin/settings	/home
Action taken	Redirect	Continue	Redirect	Continue

Key Moments - 2 Insights

Why does the middleware redirect only some URLs?

Because it checks if the URL path starts with '/admin' (see execution_table rows 1 and 3). Only those matching URLs trigger the redirect.

What happens if middleware returns NextResponse.next()?

It means the middleware lets the request continue to the next handler or page (see execution_table rows 2 and 4). No redirect or block occurs.

Visual Quiz - 3 Questions

Look at the execution table, what action is taken at step 2 when the URL is '/about'?

A Redirect to '/login'

B Allow request to continue

C Block the request

D Modify the request URL

💡 Hint

Check the 'Action' column in execution_table row 2.

At which step does the middleware send a redirect response?

A Steps 1 and 3

B Step 4

C Step 2

D All steps

💡 Hint

Look at the 'Result' column for redirect responses in execution_table.

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

A Redirect to '/login'

B Block the request

C Allow request to continue

D Error occurs

💡 Hint

Refer to variable_tracker for request URL and condition logic.

Concept Snapshot

Middleware.ts runs on every request in Next.js.
It checks request details like URL or headers.
Based on conditions, it can redirect, modify, or allow requests.
Use NextResponse to control flow.
Place middleware.ts in the root of the project.
It runs before route handlers or pages.

Full Transcript

Middleware.ts in Next.js is a special file that runs on every incoming request. It checks the request URL or headers and decides what to do next. For example, it can redirect users trying to access protected routes like '/admin' to a login page. If the URL does not match the condition, the middleware lets the request continue to the intended page or API. This behavior is controlled by returning NextResponse.redirect or NextResponse.next. The middleware file should be placed in the root of the project. This setup helps control access and modify requests globally before they reach your pages or API routes.