Come integrare i collegamenti universali in Next.js con Capacitor

I collegamenti universali su iOS e i collegamenti per l'app su Android consentono agli utenti di essere portati direttamente nel tuo app da un collegamento, bypassando il browser. Ciò è particolarmente utile per migliorare l'esperienza utente e mantenere il contesto da una pagina web a un'app. In questo guide, passeremo in rassegna il processo di configurazione di questi collegamenti profondi per un'app Next.js utilizzando Capacitor.

La configurazione dei collegamenti profondi non richiede molto code, ma richiede alcune configurazioni. Alla fine di questa guida, potrai cliccare su un collegamento come https://www.capgo.app/details/22 e avere il tuo app aperto alla pagina corretta se è installato.

Configurazione dei collegamenti profondi di Next.js

In primo luogo, 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 che il tuo ID di bundle sia impostato correttamente nel file capacitor.config.json poiché è cruciale 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 in 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 custom URL scheme. Aggiungi un ascoltatore nella 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'evento e si reindirizza alla rotta appropriata all'interno della tua app Next.js. appUrlOpen 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 e YOURTEAMID con il tuo ID team e ID bundle effettivi: com.your.bundleid Carica questo file nella directory

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

sul tuo dominio, rendendolo accessibile a .well-known In Xcode, aggiungi il dominio alle autorizzazioni dell'app utilizzando il formato https://www.capgo.app/.well-known/apple-app-site-association.

targetLanguage applinks:capgo.app.

Configurazione Android

Per i collegamenti dell'app Android, segui questi passaggi:

1. Genera un file keystore se non ne hai uno.
2. Ottieni la firma SHA256 dal keystore.
3. Crea un file assetlinks.json con il tuo nome del pacchetto e la firma SHA256. Carica questo file nella
4. directory sul tuo dominio. .well-known Nel tuo

, aggiungi un AndroidManifest.xmlalla intent-filter directory on your domain. 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 file, puoi verificarlo utilizzando lo strumento di collegamenti digitali di Google. Se tutto è configurato correttamente, vedrai 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'utilizzo del Capacitor pacchetto di configurazione. Installalo nel tuo progetto:

npm install @capacitor/configure

Crea un capacitor.config.yaml file nella 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

Esegui lo strumento di configurazione con questa configurazione:

npx cap-config run capacitor.config.yaml

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

Conclusioni

La configurazione dei collegamenti profondi con Capacitor per un'app Next.js prevede la configurazione del tuo dominio e delle impostazioni del progetto sia per iOS che per Android. Sebbene il processo richieda attenzione ai dettagli, è semplificato rispetto ai metodi precedenti e non richiede plugin aggiuntivi. Assicurati che i file di verifica del dominio vengano 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.