Modifying request headers

The following example shows how to modify request headers in your Middleware.

Your middleware file should be placed at the root of your project. If you are using the src directory, the file should be placed in the src directory.

middleware.ts

import { NextResponse } from 'next/server';
 
export default function middleware(request: Request) {
  // Clone the request headers
  // You can modify them with headers API: https://developer.mozilla.org/en-US/docs/Web/API/Headers
  const requestHeaders = new Headers(request.headers);
 
  // Add new request headers
  requestHeaders.set('x-hello-from-middleware1', 'hello');
  requestHeaders.set('x-hello-from-middleware2', 'world!');
 
  // Update an existing request header
  requestHeaders.set('user-agent', 'New User Agent overriden by middleware!');
 
  // Delete an existing request header
  requestHeaders.delete('x-from-client');
 
  // You can also set request headers in NextResponse.rewrite
  return NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  });
}

Modifying request headers

More resources