Serving Static Files without a file extension, prevent download?

[maitham]

I'm trying to serve my apple-app-site-association using the next server. I place the file in the public folder but rather than it being served, it gets downloaded. Is there a way to serve it without using a custom server?

I'm assuming this is down to the fact that there is no file extension so the next-server doesn't know what content type to add to the header, so it defaults to document. Is there a way to change the headers, or another way to serve this.

[Timer]

Next.js uses the extension to automatically detect the content-type of the file. Since the file is extensionless, it's served as binary content—this should be compatible with Apple's verification.

If Apple requires specific headers, you can overwrite this type:

// next.config.js
module.exports = {
  experimental: {
    headers() {
      return [
        {
          source: "/.well-known/apple-app-site-association",
          headers: [{ key: "content-type", value: "application/json" }]
        }
      ];
    }
  }
};

[maitham]

Do I need to do anything special to enable experimental features? I've updated next this still causes a download of the file.

[ijjk]

Hi, you need to be on the latest canary of Next.js for this feature to work properly v9.2.3-canary.17. To verify the header is being set start next with yarn next and check for the header in the output of curl -v http://localhost:3000/.well-known/apple-app-site-association

[maitham]

Yea apologies was testing in dev. Works once it's built. Thanks!

[mhtamun]

This works for me in the local, but not in production @Timer

[ekimcem]

I think when you use export build the headers are not applied in next config

[barclayd]

Using next.js 9.5, it can be achieved in 2 steps:

1. Put your apple-app-site-assocation within /public/.well-known/apple-app-site-assocation
2. Add the following next.config.js:

module.exports = {
  async headers() {
    return [
      {
        source: '/.well-known/apple-app-site-association',
        headers: [
          {
            key: 'Content-Type',
            value: 'application/json',
          },
        ],
      },
    ];
  },
};

The browser will now render the apple-app-site-association as json without downloading it. Can also be verified by doing this command within the terminal:
curl -v http://localhost:3000/.well-known/apple-app-site-association - looking for the response body returned and Content-Type header in the respnse

[aliosmanerkan]

@tgwow solution works well for me and @mhtamun fix this by serving his next.js app using an express server in the production.

[peter-stuart-turner]

also doesn't work on production for us - this is quite urgent for us

[bas080]

Are you using next export on production? In that case you need to use the tool that serves the static files to set headers.

[peter-stuart-turner]

Have gotten it working using this in vercel.json:
{
"headers": [
{
"source": "/.well-known/apple-app-site-association",
"headers": [
{
"key": "Content-Type",
"value": "application/json"
}
]
}
]
}

[meetmakwana7396]

Thanks! This worked for me.

[bhandanyan-nomad]

Is there any plan to support .well-known/* as a special metadata files within the app router?