mediumSystem Design

What is Middleware in Next.js and what can it do?

Q: What is Middleware in Next.js and what can it do?

**TL;DR.** middleware.ts runs on **every matching request before rendering**, on the **Edge runtime**. Use it for **auth gating, redirects/rewrites, A/B testing, geolocation, setting headers/cookies** — but keep it **lightweight** (no DB, no heavy work) since it runs on the hot path. request middleware redirect/rewrite/headers <rect class='d-box-muted' x='354' y='52' width='96'

853 views

Understand the problem

Edge code running before a request is completed.

nextjsmiddlewareedgeauth

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Auth gate with a matcher

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('session')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  return NextResponse.next();
}
export const config = { matcher: ['/dashboard/:path*', '/settings/:path*'] };

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are layouts and nested layouts in the Next.js App Router?

What is the difference between the App Router and the Pages Router?