Deep Linking for Andriod and Apple in Next.js

Today I will discuss about how to create Android & Apple Deeplinking.

For Android

1. You have assetlinks.json file .
2. Create "assetlinks.json" file. Include the file inside public/.well-known folder .
3. The route is --> domainname/.well-known/assetlinks.json .

For Apple

1. Apple requires that your website has a file at the path /.well-known/apple-app-site-association on your URL.
2. Create an API route
3. Create a file at this in your project location:

pages/api/.well-known/apple-app-site-association.ts

import type { NextApiRequest, NextApiResponse } from 'next'

const BUNDLE_ID = 'YOUR-APPLE-APP-BUNDLE-ID' // replace with your bundle ID

const association = {
  applinks: {
    apps: [],
    details: [
      {
        appID: `${BUNDLE_ID}`,
        paths: ['*', "/"],
      },
    ],
  },
}

export default (_: NextApiRequest, response: NextApiResponse) => {
  return response.status(200).send(association)
}

Add a redirect

Finally, Apple expects this file to exist at the exact path yourdomain.com/.well-known/apple-app-site-association.

Since the file we created above is an API route, we need to create a redirect in next.config.js:

const nextConfig = {
  // ...
  async redirects() {
    return [
      {
        source: '/.well-known/:file',
        destination: '/api/.well-known/:file',
        permanent: false,
      },
    ]
  },
}

Test your app

First, you'll need to make sure you publish your website on the domain you used.

Thanks for reading