How do you add custom headers in Next.js?

Custom HTTP headers (such as CORS permissions, Cache-Control policies, or security headers like Content-Security-Policy and X-Frame-Options) can be configured in next.config.js:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        // Apply headers to all API routes
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE,OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization' },
        ],
      },
      {
        // Apply strict security headers to all pages
        source: '/(.*)',
        headers: [
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        ],
      },
    ];
  },
};

Alternatively, in Next.js App Router, headers can be dynamically appended inside Middleware (middleware.ts).