Middleware Capabilities

Middleware is not just a bouncer at the door; it's a traffic manipulator.

While it is commonly used to redirect unauthenticated users to /login, it can also rewrite URLs (masking the true path from the user), read and set cookies, and inject custom headers into the request before it reaches your Server Components.

Imagine you verify a JWT token in Middleware to ensure the user is logged in. Your downstream page.tsx server component also needs to know *who* that user is to fetch their data.

Instead of verifying the token twice, Middleware can decode the token and attach x-user-id: 123 to the request headers.

When the request finally reaches your Server Component, it simply calls headers().get('x-user-id').

typescript

import { NextResponse } from 'next/server';

import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {

// 1. Clone the request headers

const requestHeaders = new Headers(request.headers);

// 2. Inject a custom header

requestHeaders.set('x-user-id', '999');

// 3. Pass the mutated headers downstream

return NextResponse.next({

request: {

headers: requestHeaders,

},

});

}