Adding headers at the edge

In some cases we might want to add or modify the headers from an incoming request for different reasons, AB testing, personalization, analytics, etc. To have access to the tenative response we can call NextResponse.next() and then modify its headers:

// 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

Open the network tab in devtools to see the response headers

x-modified-edge: true