Middleware.ts file convention in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Middleware.ts: What happens when a request matches the middleware?

Given a middleware.ts file in Next.js that intercepts requests, what is the expected behavior when a request URL matches the middleware's matcher pattern?

NextJS

import { NextResponse } from 'next/server';

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

export const config = {
  matcher: ['/admin/:path*'],
};

A The middleware redirects the user to '/login' for any URL starting with '/admin'.

B The middleware allows all requests to '/admin' to proceed without changes.

C The middleware blocks all requests to '/admin' by returning a 404 response.

D The middleware modifies the request headers but does not redirect.

💡 Hint

Look at the middleware function and what it returns when the path starts with '/admin'.

The middleware checks if the request path starts with '/admin'. If it does, it returns a redirect response to '/login'. Otherwise, it allows the request to continue normally.

📝 Syntax

intermediate

Middleware.ts: Identify the syntax error

Which option contains a syntax error in a Next.js middleware.ts file?

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (request.nextUrl.pathname === '/home') {
    return NextResponse.rewrite('/dashboard');
  }
  return NextResponse.next();
}

A export function middleware(request) { return NextResponse.rewrite('/dashboard');

B export function middleware(request) { return NextResponse.redirect('/login'); }

C export function middleware(request) { return NextResponse.rewrite('/dashboard'); }

D export function middleware(request) { return NextResponse.next(); }

💡 Hint

Check for missing brackets or incomplete statements.

Option A is missing the closing curly brace for the function, causing a syntax error.

❓ state_output

advanced

Middleware.ts: What is the output URL after rewrite?

Given this middleware, what URL will the user see in the browser after accessing '/profile'?

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.rewrite('/user/profile');
  }
  return NextResponse.next();
}

A The browser URL changes to '/user/profile'.

B The browser URL changes to '/profile' and content from '/profile' is shown.

C The browser URL remains '/profile' but content from '/user/profile' is shown.

D The browser URL changes to '/user/profile' and content from '/profile' is shown.

💡 Hint

Consider how NextResponse.rewrite works compared to redirect.

NextResponse.rewrite changes the resource served without changing the URL in the browser. So the URL stays '/profile' but the content is from '/user/profile'.

🔧 Debug

advanced

Middleware.ts: Why does this middleware cause an infinite redirect?

Examine this middleware code. Why does it cause an infinite redirect loop?

NextJS

import { NextResponse } from 'next/server';

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

A Because NextResponse.next() is missing parentheses.

B Because the redirect URL is malformed and causes a server error.

C Because the middleware does not return a response for '/login' paths.

D Because it redirects all paths except '/login' to '/login', including requests already at '/login'.

💡 Hint

Think about what happens when the request is already at '/login'.

The condition redirects any path not '/login' to '/login'. The infinite loop happens because the redirect response causes the browser to request '/login' again, triggering the middleware again. If the middleware or browser does not properly handle this, it can cause repeated redirects.

🧠 Conceptual

expert

Middleware.ts: What is the purpose of the config.matcher property?

In a Next.js middleware.ts file, what does the config.matcher property control?

NextJS

export const config = {
  matcher: ['/dashboard/:path*', '/settings'],
};

A It sets environment variables for the middleware execution.

B It specifies which request paths the middleware should run on.

C It defines the order in which multiple middleware files execute.

D It controls the caching behavior of middleware responses.

💡 Hint

Think about when middleware runs for incoming requests.

The config.matcher property tells Next.js which URL paths should trigger the middleware. Only requests matching these patterns run the middleware code.