Bagaimana Mencampurkan Tautan Universal di Next.js dengan Capacitor

Tautan universal di iOS dan Tautan Aplikasi di Android memungkinkan pengguna untuk langsung masuk ke aplikasi Anda dari tautan, menghindari browser. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna dan menjaga konteks dari halaman web ke aplikasi. Dalam panduan ini, kami akan menjelajahi proses pengaturan tautan dalam yang dalam untuk aplikasi Next.js menggunakan Capacitor. Untuk atribusi dan tautan dalam yang tertunda, @capgo/capacitor-appsflyer dapat mengarahkan kampanye instalasi ke layar yang benar dalam aplikasi.

Pengaturan tautan dalam tidak memerlukan banyak code, tetapi melibatkan beberapa pengaturan. Setelah membaca panduan ini, Anda akan dapat mengklik tautan seperti https://www.capgo.app/details/22 dan memiliki aplikasi Anda membuka halaman yang benar jika sudah terinstal.

Konfigurasi Tautan Deep Next.js

Pertama, kita akan membuat aplikasi Next.js baru dan halaman detail untuk tes:

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

Pastikan ID Paket ID benar ditetapkan di file capacitor.config.json karena sangat penting untuk konfigurasi:

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

Untuk routing, Next.js menggunakan routing berbasis file, sehingga dengan membuat file di pages/details/[id].jskita sudah mengatur wildcard route.

Dalam pages/details/[id].jskita dapat mengambil ID dari URL menggunakan router bawaan 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

Sekarang, mari kita tangani appUrlOpen event dengan Capacitor. Event ini dipicu ketika aplikasi dibuka melalui skema URL kustom. Tambahkan listener di 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

code ini mendengarkan acara dan menavigasi ke jalur yang tepat di dalam aplikasi Next.js Anda. appUrlOpen event dan menavigasi ke jalur yang tepat di dalam aplikasi Next.js Anda.

Konfigurasi iOS

Untuk iOS, Anda memerlukan ID aplikasi dengan Domains Terkait diaktifkan. Buatlah dengan konten berikut, menggantikan isi file dengan konten berikut, menggantikan YOURTEAMID and com.your.bundleid dengan ID tim Anda yang sebenarnya dan ID paket:

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

Unggah file ini ke direktori .well-known pada domain Anda, membuatnya dapat diakses di https://www.capgo.app/.well-known/apple-app-site-association.

In Xcode, tambahkan domain ke hak istimewa aplikasi Anda menggunakan format applinks:capgo.app.

Konfigurasi Android

Untuk Android App Links, ikuti langkah-langkah berikut:

1. Jika Anda belum memiliki satu, buat file keystore.
2. Ambil fingerprint SHA256 dari file keystore.
3. Buat sebuah assetlinks.json berkas dengan nama paket dan tanda tangan SHA256.
4. Upload file ini ke .well-known direktori di domain Anda.

di domain Anda. AndroidManifest.xmltambahkan sebuah intent-filter ke menuju activity ke elemen yang mengelola tautan dalam:

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

Setelah mengunggah assetlinks.json file, Anda dapat memverifikasi menggunakan alat Tautan Aset Digital Google. Jika semua sudah terkonfigurasi dengan benar, Anda akan melihat tanda centang hijau.

Untuk membuat dan menandatangani aplikasi Anda, gunakan perintah-perintah berikut:

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

Ini akan menginstal aplikasi yang ditandatangani pada perangkat Android yang terhubung Anda.

Capacitor Configure for Native Project Settings

Gunakan Capgo untuk mengautomatisasi pengaturan proyek native. Capacitor configure packageBuat file di root proyek Anda:

npm install @capacitor/configure

Buat capacitor.config.yaml Buat file di root proyek Anda:

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

Jalankan alat konfigurasi dengan konfigurasi ini:

npx cap-config run capacitor.config.yaml

Langkah ini akan menerapkan pengaturan yang ditentukan dalam file YAML ke proyek native Anda.

Kesimpulan

Mengatur tautan dalam untuk aplikasi Next.js dengan Capacitor melibatkan mengonfigurasi domain dan pengaturan proyek untuk kedua iOS dan Android. Meskipun proses ini memerlukan perhatian detail, namun prosesnya lebih sederhana dibandingkan dengan metode lama dan tidak memerlukan plugin tambahan. Pastikan file verifikasi domain Anda disajikan dengan benar dan periksa dengan alat-alat platform yang relevan. Setelah terkonfigurasi, aplikasi Anda akan membuka dengan lancar dari tautan web, memberikan transisi yang halus bagi pengguna Anda dari web ke aplikasi.

Teruskan dari Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor

Jika Anda menggunakan Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor Untuk merencanakan kerja plugin native, hubungkan dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Mengambah atau Mengupdate Plugin untuk detail implementasi di Mengambah atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur produk di Alternatif Plugin Enterprise Ionic, dan Capgo Bangun Nadi Asli untuk alur produk di Capgo Bangun Nadi Asli.