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 à une application. Dans ce guide, nous passerons en revue le processus de configuration de ces liens profonds pour une application Next.js en utilisant Capacitor. Pour les liens profonds différés et les attributions, @capgo/capacitor-appsflyer peut router les campagnes d'installation dans la bonne écran de l'application.

La configuration des liens profonds ne nécessite pas beaucoup de code, mais cela implique une 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 bonne page si elle est installée.

Configuration de l'implémentation de liens profonds Next.js

Tout 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 que votre ID de l'application est correctement configuré dans le fichier capacitor.config.json car il est crucial pour la configuration :

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

Pour la navigation, Next.js utilise la navigation basée sur les fichiers, donc en créant un fichier à pages/details/[id].jsnous avons déjà configuré notre route sauvage.

Dans pages/details/[id].jsnous 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, traitons l'événement avec __CAPGO_KEEP_0__. appUrlOpen event with Capacitor. This event is triggered when the app is opened via a custom URL scheme. Add a listener in the pages/_app.js Ajoutez un écouteur dans le 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

Cette code écoute l'événement et navigue vers la route appropriée dans votre application Next.js. appUrlOpen Configuration iOS

Pour iOS, vous aurez besoin d'un ID d'application avec les domaines associés activés.

Créez un fichier apple-app-site-association avec le contenu suivant, en remplaçant et par votre ID d'équipe et votre ID de bundle réels : YOURTEAMID Envoyez ce fichier vers le com.your.bundleid Upload this file to the

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

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

Dans Xcode, ajoutez le domaine aux autorisations de votre application sous la forme applinks:capgo.app.

Configuration Android

Pour les liens d'application Android, suivez ces étapes :

Générez un fichier de clé de journal si vous n'en avez pas un.
Obtenez la empreinte SHA256 du fichier de clé de journal.
Créez un fichier assetlinks.json avec votre nom de package et l'empreinte SHA256. Envoyez ce fichier dans le
répertoire sur votre domaine. .well-known Dans votre

app AndroidManifest.xml, ajoutez un intent-filter à l'élément qui gère les liens profonds : activity Après avoir téléchargé le

<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>

fichier, vous pouvez le vérifier à l'aide de l'outil de liens numériques d'actifs de Google. Si tout est configuré correctement, vous verrez un signe de vérification vert. assetlinks.json Pour construire et signer votre application, utilisez les commandes suivantes :

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

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

__CAPGO_KEEP_0__ Configurez les paramètres du projet natif

Capacitor Configure for Native Project Settings

__CAPGO_KEEP_0__ package de configuration Capacitor configure packageCréez un

npm install @capacitor/configure

package capacitor.config.yaml file à 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

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

npx cap-config run capacitor.config.yaml

Cette opération 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 une attention aux détails, 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 vérifiez-les avec les outils de plateforme correspondants. Une fois configuré, votre application s'ouvrira de manière fluide à partir de liens web, offrant une transition smooth pour vos utilisateurs de la web à l'application.

Continuez de la section suivante : 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 des plugins natifs, connectez-le avec Répertoire des plugins Capgo pour le flux de travail du produit dans Répertoire des plugins Capgo Plugins Capacitor par Capgo pour les détails d'implémentation dans les 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 d'Entreprise Ionic pour le flux de travail du produit dans Alternatives de Plugins d'Entreprise Ionic, et Capgo Builds Natives pour le flux de travail du produit dans Capgo Builds Natives.