Wrong MIME type returned for gzipped commons.js and main.js

[AlteredConstants]

• Next.js 2.0.0-beta.13
• Nginx 1.10
• Node 7.4.0

I have an Nginx reverse proxy serving the app at https://www.alteredconstants.com/. The proxy has the X-Content-Type-Options: nosniff header set so the commons.js and main.js scripts are not being loaded by the browser because those files are receiving a MIME type of application/octet-stream instead of application/javascript.

I verified this with curl:

$ curl -s -D - -o /dev/null -H "Accept-Encoding: gzip" https://www.alteredconstants.com/_next/commons.js
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 05 Jan 2017 04:53:29 GMT
Content-Type: application/octet-stream
Content-Length: 37771
Connection: keep-alive
Content-Encoding: gzip
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Thu, 05 Jan 2017 03:58:23 GMT
ETag: W/"938b-1596cc715fd"
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; img-src *; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; object-src 'none'; child-src https://www.youtube.com
Strict-Transport-Security: max-age=31536000

Without gzip, it works fine:

$ curl -s -D - -o /dev/null https://www.alteredconstants.com/_next/commons.js
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 05 Jan 2017 05:02:25 GMT
Content-Type: application/javascript; charset=utf-8
Content-Length: 119179
Connection: keep-alive
Vary: Accept-Encoding
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Thu, 05 Jan 2017 03:58:23 GMT
ETag: W/"1d18b-1596cc715ad"
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; img-src *; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; object-src 'none'; child-src https://www.youtube.com
Strict-Transport-Security: max-age=31536000

For what it's worth, the actual pages have the correct text/html type. Removing the X-Content-Type-Options "fixes" the problem, but that's not ideal.

[AlteredConstants]

I did a little digging and it looks like this is likely because of the send module used here: https://github.com/zeit/next.js/blob/master/server/render.js#L144-L170 It doesn't know that the .gz files should be given the content type of their source files (which seems fair). Maybe something like:

    const gzipPath = `${path}.gz`
    if (/\.js$/.test(path)) {
      res.setHeader('Content-Type', 'application/javascript')
    }
    res.setHeader('Content-Encoding', 'gzip')
    await serveStatic(req, res, gzipPath)

would suffice? (I hacked it into the prod version of the file and it seems to work.)

[arunoda]

Yep. We need to handle this. Currently we are doing some changes to compression logic. Once we took that PR, let's add this fix.