Comment intégrer les liens universels dans Next.js avec Capacitor

Les liens universels sur iOS et les liens d'application sur Android permettent aux utilisateurs d'être redirigés directement dans votre application à partir d'un lien, en évitant le navigateur. Cela est particulièrement utile pour améliorer l'expérience utilisateur et maintenir le contexte d'une page web vers une application. Dans ce guide, nous allons passer en revue le processus de configuration de ces liens profonds pour une application Next.js en utilisant Capacitor. Pour l'attribution et les liens profonds différés @appsflyer-capgo-capacitor peut router les campagnes d'installation vers l'écran approprié dans l'application.

La configuration des liens profonds ne nécessite pas beaucoup de code, mais elle implique une certaine configuration. À la fin de ce guide, vous serez en mesure de cliquer sur un lien comme https://www.capgo.app/details/22 et avoir votre application s'ouvrir sur la page appropriée si elle est installée.

Configuration des liens profonds Next.js

Créons d'abord une nouvelle application Next.js et une page de détails pour tester.

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 de bundle est correctement défini dans le capacitor.config.json ce fichier, car il est crucial 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, donc en créant un fichier à pages/details/[id].js, nous avons déjà configuré notre route sauvage.

Dans pages/details/[id].js, nous pouvons récupérer l'ID à partir de l'URL à l'aide du 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, passons à la gestion de l' appUrlOpen événement avec Capacitor. Cet événement est déclenché lorsque l'application est ouverte via un schéma de URL personnalisé. Ajoutez un écouteur dans le pages/_app.js file:

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 l'événement et navigue vers la route appropriée dans votre application Next.js.

Configuration iOS

Pour iOS, vous aurez besoin d'un ID d'application avec les domaines associés activés. Créez un apple-app-site-association fichier avec le contenu suivant, en remplaçant YOURTEAMID et com.your.bundleid Avec votre ID d'équipe et votre ID de bundle réels.

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

Téléchargez ce fichier sur le .well-known répertoire sur votre domaine, le rendant accessible à https://www.capgo.app/.well-known/apple-app-site-association.

répertoire de votre domaine, le rendant accessible à l'adresse applinks:capgo.app.

Configuration Android

Suivez ces étapes pour les liens d'application Android.

1. Pour les liens d'application Android, suivez ces étapes : 
2. Obtenez la trace SHA256 à partir du coffre-fort.
3. Créez un assetlinks.json fichier avec votre nom de package et la trace SHA256.
4. Envoyez ce fichier dans le .well-known répertoire sur votre domaine.

Dans votre AndroidManifest.xml, ajoutez un intent-filter à l' activity élément qui gère les liens profonds :

<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 avoir envoyé le assetlinks.json Vous pouvez vérifier cela en utilisant l'outil de liens numériques d'Asset Google. Si tout est configuré correctement, vous devriez voir un signe de vérification vert.

Pour construire 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 Configurez les paramètres du projet natif

Pour automatiser les paramètres du projet natif, considérez l'utilisation du Capacitor package de configurationInstallez-le dans votre projet :

npm install @capacitor/configure

Créez un capacitor.config.yaml fichier au niveau 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

Exécutez l'outil de configuration avec cette configuration :

npx cap-config run capacitor.config.yaml

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

Conclusion

La mise en place des liens profonds avec Capacitor pour une application Next.js implique la configuration de votre domaine et des paramètres de projet pour les deux iOS et Android. Bien que le processus nécessite de l'attention, il est cependant plus fluide que les méthodes plus anciennes et ne nécessite pas d'extensions supplémentaires. Vérifiez que vos fichiers de vérification de domaine sont correctement servis et les vérifiez avec les outils des plateformes respectives. Une fois configuré, votre application s'ouvrira de manière fluide à partir des liens web, offrant une transition smooth pour vos utilisateurs de la web à l'application.

Continuez de là : Comment intégrer les liens universels dans Next.js avec Capacitor

Si vous utilisez Comment intégrer les liens universels dans Next.js avec Capacitor pour planifier le travail du plugin natif, connectez-l’avec Capgo Répertoire des plugins pour le flux de travail du produit dans Capgo Répertoire des plugins, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo, Ajouter ou Mettre à jour les plugins pour les détails d'implémentation dans Ajouter ou Mettre à jour les plugins, Alternatives de plugins Enterprise Ionic pour le flux de travail du produit dans les alternatives du plugin Enterprise Ionic Capgo Bâtiments natifs pour le flux de travail du produit dans Capgo Bâtiments natifs.