Implementing custom headers in Next.js Edge functions

Demonstrate how to set custom response headers in an Edge function, such as setting Content-Security-Policy or CORS headers.
import { NextResponse } from 'next/server';

export function middleware(request) {
  // Create a response by calling to continue the processing
  const response =;

  // Set the Content-Security-Policy header for security
  response.headers.set('Content-Security-Policy', "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';");

  // Set the CORS (Cross-Origin Resource Sharing) headers
  response.headers.set('Access-Control-Allow-Origin', '*');
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST');
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  return response;

export const config = {
  matcher: '/some-path*', // Specify the path to apply this middleware
This snippet defines a Next.js Edge middleware function that adds custom headers to the response. It sets a Content-Security-Policy header for enhanced security and CORS headers to allow cross-origin requests. '' continues the request without altering it, and the 'response.headers.set()' method is used to add or modify headers on the response.