Why middleware intercepts requests in NextJS - Quick Recap

Recall & Review

beginner

What is the main purpose of middleware in Next.js?

Middleware in Next.js runs before a request reaches a page or API route. It lets you check or change the request, like redirecting users or adding headers.

beginner

How does middleware help with authentication in Next.js?

Middleware can check if a user is logged in before letting them access a page. If not logged in, it can redirect them to a login page.

intermediate

Why might middleware modify a request before it reaches a page?

Middleware can add or change request details, like headers or cookies, to control how the page handles the request or to add security.

intermediate

What is one benefit of intercepting requests with middleware instead of inside page code?

Middleware runs early and can stop or redirect requests before loading a page, making the app faster and more secure by avoiding unnecessary page loads.

beginner

Can middleware in Next.js run on both server and client sides?

No, Next.js middleware runs only on the server side during the request phase to intercept and handle requests before pages load.

What does Next.js middleware do with incoming requests?

A Intercepts and can modify or redirect them before reaching pages

B Runs after the page loads to change content

C Only logs requests without changing them

D Runs only on the client side

Middleware intercepts requests early to modify or redirect them before pages handle them.

Why use middleware for authentication checks in Next.js?

A To fetch data after page load

B To redirect unauthorized users before loading pages

C To style the login page

D To run code only on the client

Middleware can stop unauthorized users early by redirecting them before pages load.

Where does Next.js middleware run?

A In the database

B On the client after page load

C In the browser console

D On the server during request handling

Middleware runs on the server to handle requests before pages load.

Which of these is NOT a reason to use middleware in Next.js?

A To style page components

B To improve app security

C To intercept and modify requests

D To redirect users based on conditions

Styling pages is done in components, not middleware.

What happens if middleware redirects a request?

A The page loads twice

B The page loads and then redirects

C The original page does not load

D The request is ignored

Middleware redirect stops the original page from loading and sends the user elsewhere.

Explain why middleware intercepts requests in Next.js and how this helps improve app behavior.

Think about what happens before a page shows up.

Describe a real-life example where middleware intercepting a request would be useful in a Next.js app.

Imagine a locked door that only lets certain people 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