Wie man Universal 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.

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.

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

Stelle sicher, dass dein Bündel-ID korrekt in dem capacitor.config.json Datei eingestellt ist, da dies für die Einrichtung entscheidend ist:

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

Für die Routenverwaltung verwendet Next.js Dateibasierte Routenverwaltung, daher haben wir bereits unsere Wildcard-Routen mit der Erstellung einer Datei an pages/details/[id].jseingestellt.

In pages/details/[id].js, wir können die ID aus der URL mithilfe von Next.js' eingebautem Router 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. 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:

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, indem Sie YOURTEAMID und com.your.bundleid mit Ihrem tatsächlichen Team- und Bundle-Id:

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

Hängen Sie dieses Datei auf Ihrem Domain-Verzeichnis hoch, machen Sie es auf .well-known In Xcode fügen Sie die Domain zu Ihren App-Eigenschaften hinzu, im Format https://www.capgo.app/.well-known/apple-app-site-association.

Android-Konfiguration applinks:capgo.app.

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

Erstellen Sie ein Keystore-Datei, wenn Sie keine haben.

1. Erhalten Sie die SHA256-Fingerprint aus dem Keystore.
2. Erstellen Sie ein
3. assetlinks.json Datei mit Ihrem Paketnamen und SHA256-Fingerprint. Hängen Sie diese Datei auf Ihrem Domain-Verzeichnis hoch,
4. Upload this file to the .well-known Verzeichnis auf Ihrem Domain.

In Ihrem AndroidManifest.xml, fügen Sie ein intent-filter zum Element hinzu, das tiefgreifende Links verarbeitet: activity Nach dem Hochladen des

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

Dateien können Sie diese 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 erstellen 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 Configure for Native Project Settings

__CAPGO_KEEP_0__ Konfigurationspaket verwenden Capacitor. Install it in your project:

npm install @capacitor/configure

Erstelle ein capacitor.config.yaml Datei an der Wurzel deines 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ühre das Konfigurationswerkzeug mit dieser Konfiguration aus:

npx cap-config run capacitor.config.yaml

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

Zusammenfassung

Die Einrichtung von tiefen Links mit Capacitor für eine Next.js-App beinhaltet die Konfiguration deiner Domain 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 gestreamlinert und erfordert keine zusätzlichen Plugins. Stelle sicher, dass deine Domain-Verifizierungsdateien korrekt bereitgestellt werden und überprüfe sie mit den entsprechenden Plattform-Tools. Sobald die Einrichtung abgeschlossen ist, wird deine App problemlos von Web-Links geöffnet, was eine glatte Übergang für deine Benutzer von Web zu App ermöglicht.

Weitermachen von How to Integrate Universal Links in Next.js mit Capacitor

Wenn du How to Integrate Universal Links in Next.js mit Capacitor für die Planung von native Plugin-Arbeiten verwendest, verbinde es mit Capgo Plugin Directory 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