What is Next.js Middleware and a real-world auth use case?
This tests request interception before a route renders. A good answer defines Middleware as pre-request code using NextRequest and NextResponse, often on the Edge Runtime, with auth redirects as an example.
What's really being asked
This question checks if you understand where Middleware sits in the request lifecycle and how it differs from route handlers or client-side guards. The interviewer wants to hear that it intercepts traffic before a request completes, not during or after React renders, and that you can use it for cross-cutting concerns like authentication.
The full answer
First, define Middleware as code that executes before a request reaches application routes, operating on NextRequest and returning NextResponse. Second, mention that it can run on the Edge Runtime, giving it low latency and access to request headers, cookies, and geolocation. Third, give a concrete pattern like authentication: inspect the incoming request for a valid session token, and if it is missing, issue a redirect to a login page or rewrite the request to a public fallback. Fourth, note the file-system convention that places it at the project root and that it can be configured to match or skip specific paths using a matcher config.
The mistakes people make
Confusing Middleware with API Routes is a major red flag because API Routes handle requests at a dedicated endpoint, whereas Middleware intercepts traffic before routing happens. Another mistake is saying Middleware runs after React renders or that it can perform heavy database queries directly, since Edge Runtime constraints limit available Node APIs. Claiming it only works in the Pages Router or that it replaces Server Component auth entirely is also incorrect.
What usually comes next
How would you conditionally apply Middleware only to certain routes while ignoring static assets? How do you securely validate a JWT at the edge without leaking secrets? What is the behavioral difference between a rewrite and a redirect inside Middleware? When would a layout-level Server Component auth check be preferable to Middleware?
A concrete example
An e-commerce site wants to protect its checkout pages. In the Middleware file, the function receives a NextRequest object, reads an auth cookie from the request headers, and checks for its presence. If the cookie is absent, the function returns NextResponse.redirect(new URL('/login', request.url)). If the cookie exists, it returns NextResponse.next() so the request proceeds to the checkout route. This keeps checkout server components free of auth boilerplate and pushes the access decision to the edge.
Interview question
Which statement accurately describes Next.js Middleware execution timing and a typical use case?
- a.It operates on the client after page load to protect routes using browser storage
- b.It runs after React server renders the page, allowing modification of the final HTML response
- c.It executes before a request reaches application routes, such as checking auth cookies and redirecting to loginCorrect
- d.It functions inside API Route handlers to validate request bodies before database operations
Why? this is the answer
Middleware intercepts traffic before a request reaches application routes, making it ideal for edge-side auth checks and redirects. Distractor B is tempting because developers often conflate middleware with API Route logic, but API Routes handle requests at dedicated endpoints rather than pre-routing interception.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
- #next.js
- #middleware
- #authentication
- #edge runtime
- #interview
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles