DEV Community

Al-Amin Islam
Al-Amin Islam

Posted on

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)
}
Enter fullscreen mode Exit fullscreen mode

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,
      },
    ]
  },
}

Enter fullscreen mode Exit fullscreen mode

Test your app

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

Thanks for reading

Top comments (0)