Creating apple-app-site-association File in Next.js

I'm having a lot of trouble with serving an apple-app-site-association file in the Next.js project.

Keep in mind that:

• The apple-app-site-association JSON file must not have a .json file extension.
• It has to be on "/apple-app-site-association" or "./well-known/apple-app-site-association" links on the website.
• I can't use a redirect to another page/link.

The solution is to place the apple-app-site-association file in your Next.js project's public folder named public/apple-app-site-association.

Then open your config file next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    async headers() {
        return [
            {
                // Match all API routes
                source: "/apple-app-site-association",
                headers: [
                    {
                        key: "Content-Type",
                        value: "application/json",
                    },
                ],
            },
        ];
    },
}

Now to check open localhost:3000/apple-app-site-association

This setup allows you to serve the apple-app-site-association file in your Next.js project.

Hope it will work for you! Let me know if you need further assistance!