S3 Content-Type header set incorrectly.

[JT-Bruch]

When our build is generated, there is a folder structure that looks like as follows:

However, the issue is that in the S3 bucket, the upload is setting the content-type header as application/emcascript on only the es page itself which is causing the page to be rendered as text instead of a website.

this is what our next.config.js looks like

const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([], {
  experimental: {
    externalDir: true,
  },
  i18n: {
    locales: ['en', 'es'],
    defaultLocale: 'en',
    localeDetection: false,
  },
  images: {
    domains: ['res.cloudinary.com'],
  },
  publicRuntimeConfig: {
    IS_DEV: process.argv.includes('dev'),
  },
  async headers() {
    return [
      {
        source: '/es',
        headers: [
          {
            key: 'Content-Type',
            value: 'text/html; charset=utf-8',
          },
        ],
      },
    ]
  },
  async rewrites() {
    return [
      {
        source: '/es',
        destination: '/es.html',
      },
    ]
  },

Solution:

I can manually go in and set the header to text/plain and then the page renders properly. Any ideas on how I can fix this?

Thanks!

[JT-Bruch]

If I can't get this to work, I am going to have to move our production from AWS -> Vercel, and I would rather not do that.

[ofhouse]

Hi, it looks like the mime-types package, we use internally for determining the content-type header, thinks that es is the file ending:

terraform-aws-next-js/packages/deploy-trigger/src/deploy-trigger.ts

Lines 88 to 90 in 69e41aa

	const mimeType = mimeLookup(fileName);
	const contentType =
	typeof mimeType === 'string' ? mimeContentType(mimeType) : false;

[ofhouse]

This has now been fixed in v0.11.4, thanks for reporting!