Comment intégrer les Universal Links dans Next.js avec Capacitor

Les Universal Links sur iOS et les App Links sur Android permettent d'ouvrir directement votre app depuis un lien, sans passer par le navigateur. C'est particulièrement utile pour améliorer l'expérience utilisateur et conserver le contexte d'une page web jusqu'à l'app. Dans ce guide, nous allons voir comment configurer ces deep links pour une app Next.js avec Capacitor. Pour l'attribution et les deep links différés, @capgo/capacitor-appsflyer peut router les campagnes d'installation vers le bon écran dans l'app.

Configurer des deep links ne demande pas beaucoup de code, mais implique un peu de configuration. À la fin de ce guide, vous pourrez cliquer sur un lien comme https://www.capgo.app/details/22 et que votre application s’ouvre sur la bonne page si elle est installée.

Configuration des deep links avec Next.js

D’abord, nous allons créer une nouvelle application Next.js et une page de détails pour les tests :

npx create-next-app@latest capgoLinks
cd capgoLinks
mkdir pages/details
touch pages/details/[id].js
npm run build
npx cap add ios
npx cap add android

Assurez-vous ID du bundle est correctement défini dans le capacitor.config.json , car c’est essentiel pour la configuration :

{
  "appId": "com.capgo.deeplinks",
  "appName": "capgoLinks",
  "webDir": "out",
  "bundledWebRuntime": false
}

Pour le routage, Next.js utilise le routage basé sur les fichiers ; en créant un fichier dans pages/details/[id].js, nous avons déjà configuré notre route wildcard.

Dans pages/details/[id].js, nous pouvons récupérer l’ID depuis l’URL grâce au routeur intégré de Next.js :

import { useRouter } from 'next/router'

function DetailsPage() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <p>My ID: {id}</p>
    </div>
  )
}

export default DetailsPage

Maintenant, gérons l’ appUrlOpen événement avec Capacitor. Cet événement est déclenché lorsque l’app est ouverte via un schéma d’URL personnalisé. Ajoutez un listener dans le pages/_app.js fichier :

import { useEffect } from 'react'
import { App } from '@capacitor/app'

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    App.addListener('appUrlOpen', (event) => {
      const slug = event.url.split('.app').pop()
      if (slug)
        window.location.href = slug

    })
  }, [])

  return <Component {...pageProps} />
}

export default MyApp

This code listens for the appUrlOpen événement et navigue vers la route appropriée dans votre application Next.js.

Configuration iOS

Pour iOS, vous aurez besoin d’un app ID avec Associated Domains activé. Créez un apple-app-site-association fichier avec le contenu suivant, en remplaçant YOURTEAMID et com.your.bundleid par votre ID d’équipe et votre bundle ID réels :

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "YOURTEAMID.com.your.bundleid",
        "paths": ["*"]
      }
    ]
  }
}

Envoyez ce fichier dans le .well-known répertoire de votre domaine, afin qu’il soit accessible à l’adresse https://www.capgo.app/.well-known/apple-app-site-association.

Dans Xcode, ajoutez le domaine aux entitlements de votre application en utilisant le format applinks:capgo.app.

Configuration Android

Pour les App Links Android, suivez ces étapes :

Générez un fichier keystore si vous n’en avez pas.
Récupérez l’empreinte SHA256 depuis le keystore.
Créez un fichier assetlinks.json fichier contenant votre nom de package et l’empreinte SHA256.
Envoyez ce fichier dans le .well-known répertoire de votre domaine.

Dans votre AndroidManifest.xml, ajoutez un intent-filter aux activity élément qui gère les deep links :

<activity ...>
  <intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="capgo.app" />
  </intent-filter>
</activity>

Après l’upload du assetlinks.json fichier, vous pouvez le vérifier à l’aide de l’outil Digital Asset Links de Google. Si tout est correctement configuré, vous verrez une coche verte.

Pour compiler et signer votre application, utilisez les commandes suivantes :

cd android
./gradlew assembleRelease
cd ..
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android/app/build/outputs/apk/release/app-release-unsigned.apk alias_name
zipalign -v 4 android/app/build/outputs/apk/release/app-release-unsigned.apk capgo.apk
adb install capgo.apk

Cela installera l’application signée sur votre appareil Android connecté.

Capacitor Configurer les paramètres du projet natif

Pour automatiser la configuration du projet natif, envisagez d'utiliser le paquet de configuration Capacitor. Installez-le dans votre projet :

npm install @capacitor/configure

Créer un capacitor.config.yaml fichier à la racine de votre projet :

vars:
  BUNDLE_ID: com.capgo.deeplinks
  PACKAGE_NAME: com.capgo.deeplinks
platforms:
  ios:
    targets:
      App:
        bundleId: $BUNDLE_ID
    entitlements:
      - com.apple.developer.associated-domains: ['applinks:capgo.app']
  android:
    packageName: $PACKAGE_NAME

Lancez l'outil de configuration avec cette config :

npx cap-config run capacitor.config.yaml

Cela appliquera les paramètres spécifiés dans le fichier YAML à vos projets natifs.

Conclusion

Configurer des deep links avec Capacitor pour une application Next.js implique de paramétrer votre domaine et les réglages de votre projet pour iOS et Android. Le processus exige de la rigueur, mais il est bien plus simple que les anciennes méthodes et ne nécessite aucun plugin supplémentaire. Vérifiez que vos fichiers de vérification de domaine sont correctement servis et contrôlez-les avec les outils de chaque plateforme. Une fois la configuration en place, votre application s'ouvrira de manière transparente depuis les liens web, pour une transition fluide de vos utilisateurs du web vers l'app.

Continuez la lecture : Comment intégrer les Universal Links dans Next.js avec Capacitor

Si vous utilisez Comment intégrer les Universal Links dans Next.js avec Capacitor pour planifier le travail sur les plugins natifs, connectez-l’à Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Adding or Updating Plugins, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, et Capgo Native Build pour le workflow produit dans Capgo Native Builds.