I've got a next.config.mjs file that looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: securityHeaders
      }
    ]
  },
  experimental: {
    reactCompiler: true
  },
  reactStrictMode: false,
  poweredByHeader: false
}

const csp = `
    connect-src 'self' wss://ws-us2.pusher.com;
    default-src 'self';
    script-src 'self' 'unsafe-eval' 'unsafe-inline';
    style-src 'self' 'unsafe-inline';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
`

const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: csp.replace(/\n/g, '')
  },
  {
    key: 'Cross-Origin-Embedder-Policy',
    value: 'same-origin'
  },
  {
    key: 'Cross-Origin-Opener-Policy',
    value: 'same-origin'
  },
  {
    key: 'Cross-Origin-Resource-Policy',
    value: 'same-origin'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'X-Download-Options',
    value: 'noopen'
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY'
  },
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block'
  },
  {
    key: 'Referrer-Policy',
    value: 'strict-origin-when-cross-origin'
  },
  {
    key: 'Permissions-Policy',
    value: 'camera=(), microphone=(), geolocation=()'
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  }
]

export default nextConfig

When I build my app locally.. the headers are correctly applied to the response headers. However when I deploy to Vercel, the headers aren't on my page routes (i.e - / and /about, but are on my static assets urls. Any idea what I might be doing wrong?

Note: I'm using Next.js with the Pages router (not App Router)