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.