Skip to content

Adding Headers in Edge Functions

Learn to add headers at the edge.

Framework Next.js
Use Case Edge Functions, Documentation
CSS Tailwind
Publisher ▲ Vercel

Add Header Example

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

import { NextResponse } from 'next/server'

export 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 npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/add-header add-header
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/add-header add-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).

Adding Headers in Edge Functions

Learn to add headers at the edge.

Framework Next.js
Use Case Edge Functions, Documentation
CSS Tailwind
Publisher ▲ Vercel

Add Header Example

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

import { NextResponse } from 'next/server'

export 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 npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/add-header add-header
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/add-header add-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).

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential