Universal links on iOS and App Links on Android allow users to be taken directly into your app from a link, bypassing the browser. This is particularly useful for improving user experience and maintaining the context from a web page to an app. In this guide, we’ll walk through the process of setting up these deep links for a Next.js app using Capacitor.
Setting up deep links doesn’t require a lot of code, but it does involve some configuration. By the end of this guide, you’ll be able to click a link like
https://www.capgo.app/details/22 and have your app open to the correct page if it’s installed.
Next.js Deep Link Setup
First, we’ll create a new Next.js app and a details page for testing:
Ensure your bundle ID is correctly set in the capacitor.config.json file, as it’s crucial for the setup:
For routing, Next.js uses file-based routing, so by creating a file at
pages/details/[id].js, we’ve already set up our wildcard route.
pages/details/[id].js, we can retrieve the ID from the URL using Next.js’s built-in router:
Now, let’s handle the
appUrlOpen event with Capacitor. This event is triggered when the app is opened via a custom URL scheme. Add a listener in the
This code listens for the
appUrlOpen event and navigates to the appropriate route within your Next.js app.
For iOS, you’ll need an app ID with Associated Domains enabled. Create an apple-app-site-association file with the following content, replacing
com.your.bundleid with your actual team ID and bundle ID:
Upload this file to the
.well-known directory on your domain, making it accessible at
In Xcode, add the domain to your app’s entitlements using the format
For Android App Links, follow these steps:
- Generate a keystore file if you don’t have one.
- Obtain the SHA256 fingerprint from the keystore.
- Create an assetlinks.json file with your package name and SHA256 fingerprint.
- Upload this file to the
.well-knowndirectory on your domain.
AndroidManifest.xml, add an
intent-filter to the
activity element that handles deep links:
After uploading the
assetlinks.json file, you can verify it using Google’s Digital Asset Links tool. If everything is set up correctly, you’ll see a green checkmark.
To build and sign your app, use the following commands:
This will install the signed app on your connected Android device.
Capacitor Configure for Native Project Settings
To automate native project settings, consider using the Capacitor configure package. Install it in your project:
capacitor.config.yaml file at the root of your project:
Run the configure tool with this config:
This will apply the settings specified in the YAML file to your native projects.
Setting up deep links with Capacitor for a Next.js app involves configuring your domain and project settings for both iOS and Android. While the process requires attention to detail, it’s streamlined compared to older methods and doesn’t require additional plugins. Ensure your domain verification files are correctly served and check them with the respective platform tools. Once set up, your app will seamlessly open from web links, providing a smooth transition for your users from web to app.