Why there're different host headers when making requests in Next.js?

Question

I host my Next.js app on Amazon Web Services in Elastic Beanstalk inside a docker container. I recently noticed by printing req.host from Express.js that whenever a request is sent to /_next* route the host is myid.elasticebeanstalk.com. In all other requests (e.g. for the actual page or request to API server) the host is example.com both client-side and server-side (supposing that my app is hosted at that address).

I'm wondering why is it that way? How can I set the host header even to /_next* routes to be example.com? I suspect that sometime this could result in SSL error because the host will not be correct.

The elastic beanstalk config is single instance. The DNS records are configures in AWS Route 53. The host header with myid.elasticebeanstalk.com appears in serverside requests only. example.com is a CNAME, not an alias. The logs are made inside the docker container. In general the SSL certificate is supplied by AWS in Cloudfront I think.

EDIT: it looks like the hostname should be set in the host operating system in Elastic Beanstalk which should be Linux. This AWS doc explains this.

Answer 1

To set custom HTTP headers you can use the headers key in next.config.js:

module.exports = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

headers is an async function that expects an array to be returned holding objects with source and headers properties:

source is the incoming request path pattern.

headers is an array of header objects with the key and value properties.