Come integrare i collegamenti universali in Next.js con Capacitor

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. For attribution and deferred deep links, @capgo/capacitor-appsflyer puoi gestire le campagne di installazione nella schermata corretta dell'app.

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 e avere la tua app aperta sulla pagina corretta se è installata.

Configurazione dei collegamenti profondi Next.js

Prima, creeremo una nuova app Next.js e una pagina di dettagli per il testing:

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

Assicurati ID bundle is correttamente impostato nel capacitor.config.json file, poiché è fondamentale per la configurazione:

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

Per la routing, Next.js utilizza la routing basata sui file, quindi creando un file a pages/details/[id].js, abbiamo già impostato la nostra route wildcard.

In pages/details/[id].js, possiamo recuperare l'ID dall'URL utilizzando il router integrato di 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

Ora, gestiamo l' appUrlOpen evento con Capacitor. Questo evento viene attivato quando l'app viene aperta tramite un schema di URL personalizzato. Aggiungi un ascoltatore nel 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

Questo code ascolta l' appUrlOpen evento e naviga alla route appropriata all'interno della tua app Next.js.

Configurazione iOS

Per iOS, avrai bisogno di un ID app con i Domini associati abilitati. Crea un file apple-app-site-association con il seguente contenuto, sostituendo YOURTEAMID and com.your.bundleid con il tuo ID team reale e ID bundle:

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

directory sul tuo dominio, rendendolo accessibile a .well-known directory sul tuo dominio, rendendolo accessibile a https://www.capgo.app/.well-known/apple-app-site-association.

Aggiungi il dominio alle autorizzazioni del tuo'applicazione in Xcode utilizzando il formato applinks:capgo.app.

Configurazione Android

Genera un file keystore se non ne hai già uno.

1. Genera un file keystore se non ne hai già uno.
2. Ottieni il fingerprint SHA256 dal keystore.
3. Creare un assetlinks.json file con il tuo nome del pacchetto e il fingerprint SHA256.
4. directory sul tuo dominio. .well-known directory sul tuo dominio.

, aggiungi un AndroidManifest.xmlal intent-filter a activity elemento che gestisce i collegamenti profondi:

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

Dopo aver caricato il assetlinks.json Verifica il file utilizzando lo strumento di collegamento degli asset di Google. Se tutto è configurato correttamente, dovresti vedere un segno di spunta verde.

Per costruire e firmare il tuo app, utilizza i seguenti comandi:

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

Questo installerà l'app firmata sul tuo dispositivo Android connesso.

Capacitor Configura le impostazioni del progetto nativo

Per automatizzare le impostazioni del progetto nativo, considera l'uso del Capacitor pacchetto di configurazione. Installalo nel tuo progetto:

npm install @capacitor/configure

Crea un capacitor.config.yaml file alla radice del tuo progetto:

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

Run the configure tool with this config:

npx cap-config run capacitor.config.yaml

Questo applicherà le impostazioni specificate nel file YAML ai tuoi progetti nativi.

Conclusioni

Configurare i collegamenti profondi con Capacitor per un'app Next.js richiede la configurazione del tuo dominio e delle impostazioni del progetto sia per iOS che per Android. Sebbene il processo richieda attenzione ai dettagli, è più fluido rispetto ai metodi precedenti e non richiede plugin aggiuntivi. Assicurati che i file di verifica del dominio siano serviti correttamente e controllali con gli strumenti delle rispettive piattaforme. Una volta configurato, la tua app si aprirà in modo fluido dai collegamenti web, fornendo una transizione liscia per i tuoi utenti dal web all'app.

Continua da Come integrare i collegamenti universali in Next.js con Capacitor

Se stai utilizzando Come integrare i collegamenti universali in Next.js con Capacitor per pianificare il lavoro del plugin nativo, connettilo con Capgo Directory dei plugin per il workflow del prodotto nella Capgo Directory dei Plugin. Capacitor Plugin di Capgo per i dettagli di implementazione in Capacitor Plugin di Capgo Aggiungere o aggiornare i plugin per i dettagli di implementazione in Aggiungere o aggiornare i plugin Alternative per plugin di Ionic Enterprise per il flusso di lavoro del prodotto in alternative plugin Ionic Enterprise Costruzioni native Capgo per il workflow del prodotto in Costruzioni native Capgo.