How to add a custom response header to 404 and 500 page in Next.js

Question

I want to add a custom response header to my 404 and 500 pages for Next.js app. I use a custom 404 page (as described here) and the default 500 page. I tried adding custom headers as described here, but that doesn't seem to work. Below is the next.config.js I added:

{
    source: '/404',
    headers: [
      { key: 'CDN-Cache-Control', value: '1' },
    ],
  },
  {
    source: '/500',
    headers: [
      { key: 'CDN-Cache-Control', value: '1' },
    ],
  },

Seemingly that isn't the correct way to specify source for all 404 responses. I do see the header appearing on localhost:3003/400, but it doesn't show up on any actual 404 response triggered by the Next.js router.

PS: The reason we want to cache the 404 and 500 for a small duration is prevent all requests to the same URL from hitting the server, and be served from the CDN edge instead.