NextJS serve static file as application/json

user_6690145 0
Viewed 37

I have a webapp developped in NextJS with the domain quinck.io ( https://www.quinck.io/ ).

I have the need to serve a static JSON file from the path quinck.io/apple-app-site-association with the header Content-Type: application/json.

Right now I've inserted the file apple-app-site-association, which is a JSON file without the .json ( it is a requirement from Apple ), right now Chrome will download the file since it's not served as application/json ( try it from https://quinck.io/apple-app-site-association )

It is possible to achieve the same returning the JSON content ( example: https://reddit.com/apple-app-site-association )

What I've tried:

Custom headers for that path but it still being served as application/octet-stream

  async headers() {
    return [
      {
        source: '/apple-app-site-association',
        locale: false,
        headers: [
          {
            key: 'Content-Type',
            value: 'application/json',
          }
        ],
      },
    ]
  }

Rerouting to custom API endpoint returning JSON response

  async rewrites() {
    return [
      {
        source: '/apple-app-site-association',
        destination: '/api/apple-app-site-association'
      }

    ]
  }

None of this above solution did work.

next.js json
1 Answers
  async rewrites() {
   return [
    {
      source: '/apple-app-site-association',
      destination: '/api/apple-app-site-association'
  }]

This is the correct solution. It didn't work before because I had the file apple-app-site-associationinside the public folder.

Right now it only works locally, cannot fully understand why. When I upload it on Amplify it doesn't work anymore.

user_66901450
Related