Wie Universal Links in Next.js mit Capacitor zu integrieren

Universal links auf iOS und App Links auf Android ermöglichen es Benutzern, direkt in Ihre App zu gelangen, wenn sie auf einen Link klicken, ohne den Browser zu verwenden. Dies ist besonders nützlich, um die Benutzererfahrung zu verbessern und den Kontext von einer Web-Seite zu einer App zu erhalten. In diesem Leitfaden werden wir durch den Prozess der Einrichtung dieser tiefen Links für eine Next.js-App mit Capacitor führen. Für die Attribution und die verzögerte tiefen Links, @capgo/capacitor-appsflyer können Installationskampagnen in die richtige App-Bildschirmroute geleitet werden.

Die Einrichtung von tiefen Links erfordert nicht viel code, aber sie erfordert einige Konfiguration. Am Ende dieses Leitfadens werden Sie in der Lage sein, auf einen Link wie https://www.capgo.app/details/22 und Ihre App wird sich öffnen, um den richtigen Bildschirm anzuzeigen, wenn sie installiert ist.

Next.js-Setup für tiefen Links

Zuerst erstellen wir eine neue Next.js-App und eine Details-Seite für die Testung:

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

Stellen Sie sicher, dass Ihr Bündel-ID korrekt in der capacitor.config.json Datei eingestellt ist, da dies für die Einrichtung von entscheidender Bedeutung ist:

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

Für die Routensteuerung verwendet Next.js eine Dateibasierte Routensteuerung, also können Sie durch die Erstellung einer Datei bei pages/details/[id].js, haben wir bereits unsere Wildcard-Routen eingerichtet.

In pages/details/[id].js, können wir die ID aus der URL mithilfe der eingebauten Router von Next.js abrufen:

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

Jetzt lassen Sie uns das appUrlOpen ereignis mit Capacitor behandeln. Dieses Ereignis wird ausgelöst, wenn die App über eine benutzerdefinierte URL-Scheme geöffnet wird. Fügen Sie einen Listener in der pages/_app.js Datei hinzu:

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

Dieser code hört auf das appUrlOpen Ereignis und navigiert zur entsprechenden Route innerhalb Ihrer Next.js-Anwendung.

iOS-Konfiguration

Für iOS benötigen Sie ein App-ID mit Associated Domains aktiviert. Erstellen Sie ein apple-app-site-association Datei mit dem folgenden Inhalt, ersetzen Sie YOURTEAMID und com.your.bundleid mit Ihrem tatsächlichen Team- und Bundle-ID:

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

Hochladen Sie diese Datei auf das .well-known Verzeichnis auf Ihrem Domain, damit es auf https://www.capgo.app/.well-known/apple-app-site-association.

In Xcode fügen Sie die Domain zu den Berechtigungen Ihres Apps mit der Formatierung applinks:capgo.app.

Android-Konfiguration

Für Android-App-Links, folgen Sie diesen Schritten:

Erstellen Sie ein Keystore-File, wenn Sie kein haben.
Erhalten Sie die SHA256-Fingerprint aus dem Keystore.
Erstellen Sie ein assetlinks.json Datei mit Ihrem Paketnamen und SHA256-Fingerprint.
Hochladen Sie diese Datei auf den .well-known Verzeichnis auf Ihrem Domain.

In Ihrem AndroidManifest.xml, fügen Sie ein intent-filter zur activity Element, das tiefgreifende Links verarbeitet:

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

Nach dem Hochladen der assetlinks.json Datei können Sie sie mit Google’s Digital Asset Links-Tool überprüfen. Wenn alles korrekt eingerichtet ist, sehen Sie ein grünes Häkchen.

Um Ihre App zu erstellen und zu signieren, verwenden Sie die folgenden Befehle:

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

Dies installiert die signierte App auf Ihrem verbundenen Android-Gerät.

Capacitor Konfigurieren Sie für Native-Projekt-Einstellungen

Um native Projekt-Einstellungen automatisieren zu können, sollten Sie das Capacitor-Konfigurationspaketinstallieren. Fügen Sie es Ihrem Projekt hinzu:

npm install @capacitor/configure

Erstellen Sie ein capacitor.config.yaml Verzeichnis am Wurzelort Ihres Projekts:

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

Führen Sie das Konfigurationswerkzeug mit dieser Konfiguration aus:

npx cap-config run capacitor.config.yaml

Dadurch werden die in der YAML-Datei angegebenen Einstellungen auf Ihre native Projekte angewendet.

Zusammenfassung

Die Einrichtung von tiefen Links mit Capacitor für eine Next.js-Anwendung beinhaltet die Konfiguration Ihres Domains und Projekt-Einstellungen sowohl für iOS als auch für Android. Während der Prozess Aufmerksamkeit erfordert, ist er im Vergleich zu älteren Methoden jedoch gestreamt und erfordert keine zusätzlichen Plugins. Stellen Sie sicher, dass Ihre Domain-Verifizierungsdateien korrekt bereitgestellt werden und überprüfen Sie sie mit den jeweiligen Plattform-Tools. Sobald die Einrichtung abgeschlossen ist, öffnet sich Ihre App reibungslos aus Web-Links, was eine glatte Übergang für Ihre Benutzer von Web zu App ermöglicht.

Weitermachen Sie mit Wie Sie Universal Links in Next.js mit Capacitor integrieren

Wenn Sie Wie Sie Universal Links in Next.js mit Capacitor integrieren für die Planung von native Plugin-Arbeiten, verbinden Sie es mit Capgo Plugin-Verzeichnis für den Produktworkflow in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds für den Produktworkflow in Capgo Native Builds

How to Integrate Universal Links in Next.js with Capacitor