Skip to content
Avatar of vercelvercel/examples

Adding Response Headers in Edge Middleware

Learn to add response headers at the edge.

Framework
Adding Headers

Add Header Example

Below is the code from middleware.ts showing how to add response headers at the edge:

import { NextResponse } from 'next/server'
export default function middleware() {
// Store the response so we can modify its headers
const response = NextResponse.next()
// Set custom header
response.headers.set('x-modified-edge', 'true')
// Return response
return response
}

Demo

https://edge-functions-add-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/add-header add-header

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

Adding Headers
Avatar of vercelvercel/examples

Adding Response Headers in Edge Middleware

Learn to add response headers at the edge.

Framework

Add Header Example

Below is the code from middleware.ts showing how to add response headers at the edge:

import { NextResponse } from 'next/server'
export default function middleware() {
// Store the response so we can modify its headers
const response = NextResponse.next()
// Set custom header
response.headers.set('x-modified-edge', 'true')
// Return response
return response
}

Demo

https://edge-functions-add-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/add-header add-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