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