---
title: Adding a response header
description: Learn how to add a response header in your Middleware.
url: /kb/guide/add-response-header
canonical_url: "https://vercel.com/kb/guide/add-response-header"
published: 2025-11-03
last_updated: 2025-11-21
authors: DX Team
related:
  - /docs/routing-middleware
  - /docs/routing-middleware/api
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Modifying request headers](https://vercel.com/kb/guide/modify-request-headers?from=related) — Learn how to modify request headers in your Middleware.
- [Getting Started](https://vercel.com/docs/routing-middleware/getting-started?from=related) — Learn how you can use Routing Middleware, code that executes before a request is processed on a site, to provide speed a
- [Cache-Control Headers](https://vercel.com/docs/caching/cache-control-headers?from=related) — Learn about the cache-control headers sent to each Vercel deployment and how to use them to control the caching behavior
- [Response Headers](https://vercel.com/docs/headers/response-headers?from=related) — Learn about the response headers sent to each Vercel deployment and how to use them to process responses before sending
- [NextResponse](https://nextjs.org/docs/pages/api-reference/functions/next-response?from=related) — API Reference for NextResponse.
- [System Headers](https://vercel.com/docs/headers?from=related) — This reference covers the list of request, response, cache-control, and custom response headers included with deployment
- [CDN Cache](https://vercel.com/docs/caching/cdn-cache?from=related) — Learn how Vercel's CDN cache stores your content across a global network to reduce latency and origin load.
- [Rendering content based on device](https://vercel.com/kb/guide/rendering-content-based-on-device?from=related) — Learn how to render different content based on the user agent in your Middleware.
- [Filtering query parameters](https://vercel.com/kb/guide/filter-query-parameters?from=related) — Learn how to filter query parameters in your Middleware.
- [Using the crypto Web API to redirect requests with a unique token](https://vercel.com/kb/guide/use-crypto-web-api?from=related) — Learn how to use the Crypto Web API in your Middleware.
- [How to Configure the Cache-Control Response Header in Vercel Projects](https://vercel.com/kb/guide/how-to-configure-the-cache-control-response-header-in-vercel-projects?from=related) — After reviewing this guide, you will be able to set a cache-control header of any value to be returned when a specific p

Full cross-link map for this page: [/kb/guide/add-response-header.graph.md](/kb/guide/add-response-header.graph.md)
<!-- /docsgraph:related -->


The following example shows how to add a response header in your Middleware

Your `middleware` file should be placed at the root of your project. If you are using the `src` directory, the file should be placed in the `src` directory.

```javascript
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;
}
```
```typescript
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;
}
```
```javascript
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;
}
```
```typescript
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;
}
```
```javascript
import { next } from '@vercel/functions';

export default function middleware() {
  // Store the response so we can modify its headers
  const response = next();

  // Set custom header
  response.headers.set('x-modified-edge', 'true');

  // Return response
  return response;
}
```
```typescript
import { next } from '@vercel/functions';

export default function middleware() {
  // Store the response so we can modify its headers
  const response = next();

  // Set custom header
  response.headers.set('x-modified-edge', 'true');

  // Return response
  return response;
}
```

## More resources

- [Middleware](/docs/routing-middleware)
  
- [Middleware API](/docs/routing-middleware/api)
  
- [NextResponse API](https://nextjs.org/docs/app/api-reference/functions/next-response)