Modifying Request Headers in Middleware

Modifying Request Headers in Middleware is a Vercel Edge Middleware example for Next.js that shows how to add, update, and delete incoming HTTP request headers inside a middleware.ts file before the request continues to a route handler.

What is Modifying Request Headers in Middleware?

It is a single-file Next.js middleware example, published in the vercel/examples repository, that intercepts an incoming request, clones its headers, mutates that copy, and forwards the modified set downstream. The input is the client's NextRequest; the output is a NextResponse.next() call whose request option carries the rewritten headers. Header mutation through the request object has been available since Next.js v13.0.0, and the demo runs at edge-middleware-modify-request-header.vercel.app.

What makes this example stand out?

• Adding headers — sets two new request headers, x-hello-from-middleware1 to hello and x-hello-from-middleware2 to world!, using the standard Headers.set() API.
• Updating headers — overwrites the existing user-agent header with a middleware-supplied value, replacing whatever the client sent.
• Deleting headers — removes a client-supplied x-from-client header with Headers.delete() before the request reaches the application.
• Clone-before-edit pattern — starts from new Headers(request.headers) so the original header set is preserved and only the intended keys change.
• Framework and APIs — built on Next.js, importing NextResponse and the NextRequest type from next/server.
• Styling — Tailwind CSS is listed as the styling layer for the example.
• One-click deployment — a Vercel clone URL provisions the repository as a new project named modify-request-header.
• Local bootstrap — pnpm create next-app --example pulls the same example into a local project, then pnpm dev starts the dev server.

Who should use this example?

• Next.js developers who need to stamp every incoming request with a trace ID, tenant ID, or internal flag before their route handlers read it.
• Platform and edge engineers building request-rewriting layers, such as geo or device detection that adds metadata headers for downstream rendering.
• Teams hardening header hygiene — the delete example shows how to strip a client-controlled header so backends never trust it.
• Developers evaluating Edge Middleware who want the smallest possible working file before wiring the pattern into a larger app.

What can you do with this example?

• Trace requests: attach custom headers such as x-hello-from-middleware1 to every request so logs and downstream services can correlate them.
• Normalize client headers: override user-agent (or similar) to a controlled value before the request hits your application code.
• Strip untrusted headers: remove keys like x-from-client that a browser or proxy could otherwise spoof.
• Feed rewrites: the source notes headers can also be set inside NextResponse.rewrite, so the same mutation pattern applies when routing to a different path.

How does it work?

1. Middleware receives the NextRequest and clones request.headers into a new Headers object.
2. It calls set() twice to add new headers, set() again to update user-agent, and delete() to drop x-from-client.
3. It returns NextResponse.next with the mutated headers attached to the outgoing request, so the route sees the edited set.

FAQ

Which Next.js version is required?

Modifying request headers in middleware is available since Next.js v13.0.0, so the example targets that version or later. Older releases cannot attach a modified header set to the forwarded request the way this example does.

How do I run it locally?

Use pnpm create next-app --example with the vercel/examples URL for this template, then run pnpm dev. The repository also supports one-click deployment to Vercel through its clone URL.

Can I modify headers on rewrites as well?

Yes. The example's comments state that request headers can also be set when returning NextResponse.rewrite, using the same Headers API shown for the pass-through case.

Is there a related example?

The page lists edge-functions-add-header as a related template, which covers header addition without the update and delete cases demonstrated here.