Adding a response header

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.

middleware.js

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;
}

middleware.ts

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;
}

middleware.js

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;
}

middleware.ts

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;
}

middleware.js

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;
}

middleware.ts

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;
}

Copy link to headingMore resources

Related documentation

More Next.js guides

How do I reduce my build time with Next.js on Vercel?

Integrating AWS Secrets Manager with Vercel Using Terraform

Can I redirect from a subdomain to a subpath?

Ready to deploy?