Why middleware intercepts requests in NextJS - See It in Action

Understanding Why Middleware Intercepts Requests in Next.js

📖 Scenario: You are building a Next.js app that needs to check user access before showing pages. Middleware helps by intercepting requests to decide what to do next.

🎯 Goal: Build a simple Next.js middleware that intercepts requests to check if a user is logged in before allowing access to a protected page.

📋 What You'll Learn

Create a middleware function in middleware.ts

Set a config variable to specify which paths the middleware should run on

Use the middleware to check for a cookie named userToken

Redirect to /login if the cookie is missing

Allow the request to continue if the cookie exists

💡 Why This Matters

🌍 Real World

Middleware is used in real apps to protect pages, check user login status, and redirect users before they see content.

💼 Career

Understanding middleware is important for Next.js developers to build secure and user-friendly web applications.

1

Create the middleware function

Create a file named middleware.ts and write a middleware function called middleware that takes a request parameter.

NextJS

// Your code here

export function middleware(request) {
  // Your code here
}

Hint

Middleware is a function that runs before your page loads. Start by defining it with export function middleware(request).

2

Configure middleware to run on protected paths

Add a config export with a matcher array that includes the path /protected so the middleware runs only on that path.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  // Your code here
}

export const config = {
  matcher: ['/protected'],
};
// Your code here

Hint

Use export const config = { matcher: ['/protected'] } to tell Next.js where to run the middleware.

3

Check for userToken cookie in middleware

Inside the middleware function, get the cookie named userToken from request.cookies. If the cookie is missing, return a redirect response to /login.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const userToken = request.cookies.get('userToken');
  // Your code here
}

export const config = {
  matcher: ['/protected'],
};

Hint

Use request.cookies.get('userToken') to read the cookie. If it is missing, redirect to /login using NextResponse.redirect.

4

Allow request to continue if userToken exists

At the end of the middleware function, return NextResponse.next() to let the request continue if the userToken cookie exists.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const userToken = request.cookies.get('userToken');
  if (!userToken) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  // Your code here
}

export const config = {
  matcher: ['/protected'],
};

Hint

Use return NextResponse.next() to let the request continue when the user is logged in.

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