Wie man Universelle Links in Next.js mit Capacitor integriert

Universal links auf iOS und App Links auf Android ermöglichen es Benutzern, direkt in Ihre App weitergeleitet zu werden, ohne den Browser zu verwenden. Dies ist insbesondere nützlich, um die Benutzererfahrung zu verbessern und den Kontext von einer Web-Seite in eine 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 in-App-Anzeige weitergeleitet werden.

Die Einrichtung von tiefen Links erfordert nicht viel code, aber sie erfordert einige Konfiguration. Am Ende dieses Leitfadens wirst du in der Lage sein, auf einen Link wie https://www.capgo.app/details/22 und deine App wird sich öffnen, um die richtige Seite, wenn sie installiert ist.

Einrichten von tiefen Links in Next.js

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

Stelle sicher, dass dein Bundle-Id korrekt in dem 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
}

For die Routenverwaltung verwendet Next.js Dateibaumbasierte Routen, sodass Sie durch die Erstellung eines Dateis bei pages/details/[id].js, bereits eine Wildcard-Routen eingerichtet haben.

In pages/details/[id].js, können wir die ID aus der URL mithilfe des eingebauten Routern 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

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

This code hört auf das appUrlOpen ereignis und navigiert zur entsprechenden Route innerhalb Ihrer Next.js App.

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 in das .well-known Verzeichnis auf Ihrem Domain, damit sie auf https://www.capgo.app/.well-known/apple-app-site-association.

In Xcode, fügen Sie die Domain zu den Berechtigungen Ihres Apps im Format 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.
Hängen Sie diese Datei auf Ihrem .well-known Verzeichnis auf Ihrem Domain.

In Ihrem AndroidManifest.xml, fügen Sie ein intent-filter Element hinzu, das sich um tiefgreifende Links kümmert: activity Nach dem Hochladen der

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

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. assetlinks.json Um Ihre App zu bauen und zu signieren, verwenden Sie die folgenden Befehle:

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

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__ Konfigurieren Sie für Native Projekt-Einstellungen

Capacitor

To automatisieren Sie native Projekt-Einstellungen, überlegen Sie, ob Sie das Capacitor Konfigurationspaket verwenden möchten. Installieren Sie es in Ihrem Projekt:

npm install @capacitor/configure

Eine capacitor.config.yaml Datei an der Wurzel 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

Mit dieser Konfiguration ausführen Sie das Konfigurationswerkzeug:

npx cap-config run capacitor.config.yaml

Dies wird die in der YAML-Datei angegebenen Einstellungen auf Ihre native Projekte anwenden.

Zusammenfassung

Die Einrichtung von tiefen Links mit Capacitor für eine Next.js-Anwendung beinhaltet die Konfiguration Ihres Domains und Projekt-Einstellungen für iOS und 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 entsprechenden Plattform-Tools. Sobald Sie eingerichtet haben, wird Ihre App problemlos von Web-Links geöffnet, was eine glatte Übergang für Ihre Benutzer von Web zu App bietet.

Fortsetzen Sie von How to Integrieren Universal Links in Next.js mit Capacitor

Wenn Sie How to Integrieren Universal Links in Next.js mit Capacitor für die native Plugin-Arbeit zu planen, 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.

Wie man Universal Links in Next.js mit Capacitor integriert