Why middleware intercepts requests in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create middleware that intercepts all requests.

NextJS

export function [1](req) {
  return new Response('Intercepted by middleware');
}

Drag options to blanks, or click blank then click option'

Acontroller

Bhandler

Crouter

Dmiddleware

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function name like 'handler' or 'router' which won't intercept requests.

The function named middleware is the standard way to intercept requests in Next.js middleware.

2fill in blank

medium

Complete the code to check the request URL pathname in middleware.

NextJS

export function middleware(req) {
  const url = req.nextUrl;
  if (url.pathname === [1]) {
    return new Response('Home page intercepted');
  }
}

Drag options to blanks, or click blank then click option'

A'/'

B'/about'

C'/api/data'

D'/contact'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a pathname like '/about' when intending to intercept the home page.

The root path '/' is the pathname for the home page, so checking for it intercepts requests to the home page.

3fill in blank

hard

Fix the error in the middleware code to correctly rewrite the request to '/login'.

NextJS

import { NextResponse } from 'next/server';

export function middleware(req) {
  return NextResponse.[1]('/login');
}

Drag options to blanks, or click blank then click option'

Aredirect

Brewrite

Creplace

Dforward

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'redirect' when the goal is to rewrite the request internally.

To change the request path without redirecting, use NextResponse.rewrite(). Redirect sends a new response to the client.

4fill in blank

hard

Fill both blanks to create middleware that blocks access to '/admin' and redirects to '/login'.

NextJS

import { NextResponse } from 'next/server';

export function middleware(req) {
  const url = req.nextUrl;
  if (url.pathname === [1]) {
    return NextResponse.[2]('/login');
  }
}

Drag options to blanks, or click blank then click option'

A'/admin'

Bredirect

Crewrite

D'/dashboard'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rewrite' instead of 'redirect' which does not change the browser URL.

Checking for '/admin' blocks that path, and redirect sends the user to '/login'.

5fill in blank

hard

Fill all three blanks to create middleware that logs the request method, checks if the path is '/secret', and rewrites to '/login' if so.

NextJS

import { NextResponse } from 'next/server';

export function middleware(req) {
  console.log('Request method:', req.[1]);
  const url = req.nextUrl;
  if (url.pathname === [2]) {
    return NextResponse.[3]('/login');
  }
}

Drag options to blanks, or click blank then click option'

Amethod

B'/secret'

Crewrite

Dpathname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pathname' instead of 'method' to log the request method.

Using 'redirect' instead of 'rewrite' when internal path change is needed.

The request method is accessed via req.method. Checking for '/secret' matches the path. Using rewrite changes the request path internally.

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