Frontend Middleware

ELI5 — The Vibe Check

Frontend middleware runs BEFORE a page renders — it can redirect you, check your auth, rewrite URLs, or add headers. It's the bouncer who checks your ID before you enter the club. In Next.js it runs at the edge; in Nuxt it runs on the server.

Real Talk

Frontend middleware in frameworks like Next.js and Nuxt intercepts requests before they reach the page handler. Next.js middleware runs on the Edge Runtime and can rewrite, redirect, or modify responses. Nuxt middleware can be global or route-specific, running on the server before page rendering.

Show Me The Code

// middleware.ts (Next.js)
import { NextResponse } from 'next/server';

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

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

When You'll Hear This

"Our middleware redirects unauthenticated users before the page even starts rendering" / "Next.js middleware at the edge means auth checks happen in milliseconds"