Learn to add/update/delete request headers in a middleware.
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 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, }, }) }
https://edge-middleware-modify-request-header.vercel.app
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/modify-request-header modify-request-header # or yarn 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:
npm install npm run dev # or yarn yarn dev
Deploy it to the cloud with Vercel (Documentation).
Learn to add/update/delete request headers in a middleware.
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 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, }, }) }
https://edge-middleware-modify-request-header.vercel.app
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/modify-request-header modify-request-header # or yarn 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:
npm install npm run dev # or yarn yarn dev
Deploy it to the cloud with Vercel (Documentation).