Stop 11 · Next.jsTopics · 12/16

Middleware

In short

Some checks should happen before a page even starts rendering, like 'is this user logged in?'. Next.js calls this Middleware, and since version 16 the file is named proxy.ts.

Code that runs before a request completes, at the edge — commonly used for auth redirects, A/B testing, or rewriting URLs based on conditions.

The jaadu, a hostel gate guard, checks a student's ID card with a torch at night.

Think of it like this

The hostel gate guard

Before you reach your room, the guard at the gate checks your ID. Late at night without one? He sends you to the warden's office. Proxy is that guard: it sees every matching request first and can let it pass, redirect it, or rewrite it.

Watch it happen

proxy.ts at the gate

Browser

proxy.ts

Dashboard

GET /dashboard

1/5The path matches /dashboard/:path*, so proxy runs before any rendering.

The big ideas

What you need to know

proxy.ts, not middleware.ts

Next.js 16 renamed the middleware file to proxy.ts and the function to proxy. Older projects still use middleware.ts.

matcher picks the paths

The config.matcher decides which URLs it runs on, so you don't slow down every image and file.

Redirect, rewrite, headers

NextResponse.redirect sends users elsewhere, rewrite shows a different page at the same URL, and you can add headers.

Keep it light

It runs on many requests. Do quick checks like reading a cookie, not heavy database work.

See it in code

Walk through the code

1// proxy.ts  (project root, or src/)2import { NextResponse, type NextRequest } from "next/server";3 4export function proxy(request: NextRequest) {5  const session = request.cookies.get("session");6 7  if (!session) {8    return NextResponse.redirect(new URL("/login", request.url));9  }10  return NextResponse.next();11}12 13export const config = {14  matcher: ["/dashboard/:path*", "/settings/:path*"],15};

1/4Next.js 16 calls the function proxy. It reads the session cookie first.

Only dashboard and settings routes go through this check. Everything else, like the home page and images, skips it.

Save yourself the pain

Common mistakes

Oops

Treating proxy as your only security check.

Do this instead

Use it for fast redirects, but also verify the session inside pages, Server Actions and route handlers.

Oops

Running it on every path with no matcher.

Do this instead

Set a matcher so static files and public pages aren't slowed down.

Your mission

Guard the dashboard

~25 min

Quick check

In a Next.js 16 project, what's the file for this kind of request check called?

Go deeper

1Write a middleware that redirects unauthenticated users away from a protected route.
2Learn middleware runs on the Edge Runtime, with a more limited API surface than Node.
3Use the `matcher` config to scope which routes middleware runs on.