How to Integrate Universal Links in Next.js with Capacitor

Universal links auf iOS und App Links auf Android ermöglichen es Benutzern, direkt in Ihre App zu gelangen, indem sie einen Link anklicken, ohne den Browser zu verwenden. Dies ist besonders 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 Zuschreibung und die verzögerte tiefen Links @capgo/capacitor-appsflyer kann Installationskampagnen in die richtige In-App-Anzeige routen.

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

Next.js-Tiefenlink-Einrichtung

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 Bündel-ID korrekt in der capacitor.config.json Datei eingestellt ist, da sie 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, sodass 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:

1. Eine Keystore-Datei erstellen, wenn Sie keine haben.
2. Den SHA256-Fingerprint aus der Keystore-Datei erhalten.
3. Eine assetlinks.json-Datei Datei mit Ihrem Paketnamen und SHA256-Fingerprint.
4. Hochladen Sie diese Datei auf den .well-known Verzeichnis auf Ihrem Domain.

In Ihrem AndroidManifest.xmlfügen Sie ein intent-filter zum Element, das tiefgreifende Links verarbeitet: 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

Konfigurieren Sie für Native-Projekt-Einstellungen __CAPGO_KEEP_0__

Capacitor Configure for Native Project Settings

To automatisieren Sie native Projekt-Einstellungen, sollten Sie das Capacitor Konfigurationspaketinstallieren. Installieren Sie es in Ihrem Projekt:

npm install @capacitor/configure

Erstellen Sie ein 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

Führen Sie die Konfigurationswerkzeug mit dieser Konfiguration aus:

npx cap-config run capacitor.config.yaml

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

Fazit

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 Sie eingerichtet haben, öffnet sich Ihre App reibungslos von Web-Links, was eine glatte Übergang für Ihre Benutzer von Web zu App ermöglicht.

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

Wenn Sie Wie Sie Universal Links in Next.js mit Capacitor integrieren um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis zur Produktionsablauf in Capgo Plugin-Verzeichnis Capacitor Plugins von Capgo zur Implementierungsdetail in Capacitor Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins zur Implementierungsdetail in Hinzufügen oder Aktualisieren von Plugins Ionic Enterprise Plugin Alternativen zur Produktionsablauf in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds zur Produktionsablauf in Capgo Native Builds.