Below is the code from pages/_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
}
https://edge-functions-add-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-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).