Why middleware intercepts requests in NextJS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why does Next.js middleware intercept requests?

In Next.js, middleware runs before a request reaches a page or API route. What is the main reason middleware intercepts requests?

A To delay the request processing until the user confirms an action

B To modify the request or response, like redirecting or adding headers, before reaching the final handler

C To automatically cache all requests on the client side

D To convert all requests into static HTML pages

💡 Hint

Think about what middleware can do before the page or API handles the request.

Middleware intercepts requests to allow changes like redirects, authentication checks, or header modifications before the request reaches the final page or API route.

❓ component_behavior

intermediate

What happens when middleware redirects a request?

Consider this Next.js middleware snippet that redirects users based on a condition. What will the user see if the condition is true?

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

A The user is sent to the /login page before the original page loads

B The user sees the original page but with a warning message

C The middleware blocks the request and shows a blank page

D The user stays on the original page but the URL changes to /login

💡 Hint

Redirect means sending the user to a different page before loading the original one.

If the token cookie is missing, the middleware redirects the user to /login, so they never see the original page.

❓ state_output

advanced

What is the output of this middleware modifying headers?

Given this middleware code, what header will the final response include?

export function middleware(request) {
  const response = Response.next()
  response.headers.set('X-Custom-Header', 'HelloWorld')
  return response
}

A The response will not include any custom headers

B The code will throw a runtime error because headers cannot be set this way

C The response will include the header 'X-Custom-Header' with value 'HelloWorld'

D The response will include 'X-Custom-Header' but with an empty value

💡 Hint

Think about how middleware can add headers to responses.

The middleware creates a response with Response.next(), then sets a custom header before returning it. This header will be included in the final response.

📝 Syntax

advanced

Identify the syntax error in this middleware code

Which option correctly fixes the syntax error in this Next.js middleware?

export function middleware(request) {
  if request.cookies.get('user') {
    return Response.next()
  }
  return Response.redirect('/login')
}

A Add a semicolon after the if statement condition

B Change 'if' to 'when' to fix the syntax

C Remove the curly braces after if statement

D Add parentheses around the if condition: if (request.cookies.get('user')) { ... }

💡 Hint

JavaScript requires parentheses around conditions in if statements.

The if statement must have parentheses around its condition. Without them, it's a syntax error.

🔧 Debug

expert

Why does this middleware cause a runtime error?

Examine this middleware code. Why does it cause a runtime error?

export function middleware(request) {
  if (!request.cookies.get('session')) {
    return Response.redirect('/signin')
  }
  const response = Response.next()
  response.headers.append('Set-Cookie', 'visited=true')
  return response
}

A Response.next() returns a Response object whose headers are immutable, so append() causes an error

B The redirect URL '/signin' is invalid and causes the error

C request.cookies.get() is not a function and causes a TypeError

D The middleware must always return a string, not a Response object

💡 Hint

Consider if the headers of the Response object can be changed after Response.next()

Response.next() returns a response with immutable headers. Trying to append headers causes a runtime error.

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