Skip to content
Avatar of vercelvercel/examples

Modifying Request Headers in Middleware

Learn to add/update/delete request headers in a middleware.

Framework
Screenshot of "Modifying Request Headers in Middleware" example

Add Header Example

Below is the code from middleware.ts showing how to add/update/delete headers in a middleware (available since Next.js v13.0.0):

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export default function middleware(request: NextRequest) {
// 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,
},
})
}

Demo

https://edge-middleware-modify-request-header.vercel.app

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/modify-request-header modify-request-header

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

Screenshot of "Modifying Request Headers in Middleware" example
Avatar of vercelvercel/examples

Modifying Request Headers in Middleware

Learn to add/update/delete request headers in a middleware.

Framework

Add Header Example

Below is the code from middleware.ts showing how to add/update/delete headers in a middleware (available since Next.js v13.0.0):

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export default function middleware(request: NextRequest) {
// 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,
},
})
}

Demo

https://edge-middleware-modify-request-header.vercel.app

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/modify-request-header modify-request-header

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential