Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor

Tautan universal pada iOS dan App Links pada Android memungkinkan pengguna untuk dibawa langsung ke aplikasi Anda dari sebuah tautan, menghindari browser. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna dan mempertahankan konteks dari halaman web ke aplikasi. Dalam panduan ini, kami akan menjelajahi proses pengaturan tautan dalam aplikasi Next.js menggunakan Capacitor.

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.

Pengaturan Tautan dalam Next.js

Pertama, kami 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 Anda ID Paket terbuka dengan benar di capacitor.config.json file, karena sangat penting untuk pengaturan:

{
  "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].js, kami telah mengatur route wildcard.

Di pages/details/[id].js, kami 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

Dengan code, kami mendengarkan appUrlOpen event dan menavigasi ke rute yang tepat dalam aplikasi Next.js Anda.

Konfigurasi iOS

Untuk iOS, Anda memerlukan ID aplikasi dengan Domains Terkait diaktifkan. Buatlah file apple-app-site-association dengan konten berikut, menggantikan YOURTEAMID dan com.your.bundleid dengan ID tim dan ID paket Anda yang sebenarnya:

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

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

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

Konfigurasi Android

Untuk Android App Links, ikuti langkah-langkah berikut:

Membuat file keystore jika Anda tidak memiliki salah satu.
Mendapatkan tanda tangan SHA256 dari keystore.
Buatlah assetlinks.json file dengan nama paket Anda dan tanda tangan SHA256.
Unggah file ini ke .well-known di domain Anda.

Pada AndroidManifest.xml, tambahkan intent-filter ke activity elemen yang menghandle deep link:

<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 Andai Anda masih ragu, Anda dapat memverifikasi itu menggunakan alat Tautan Aset Digital Google. Jika semuanya sudah terkonfigurasi dengan benar, Anda akan melihat tanda centang hijau.

Untuk membangun 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 Konfigurasi untuk Pengaturan Proyek Asli

Untuk mengautomatisasi pengaturan proyek asli, pertimbangkan menggunakan Capacitor paket konfigurasi. Pasangnya di proyek Anda:

npm install @capacitor/configure

Buat sebuah capacitor.config.yaml 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

Ini akan menerapkan pengaturan yang ditentukan di file YAML ke proyek-proyek asli Anda.

Kesimpulan

Untuk mengatur tautan yang dalam dengan Capacitor untuk aplikasi Next.js melibatkan mengkonfigurasi domain dan pengaturan proyek untuk kedua iOS dan Android. Meskipun proses ini memerlukan perhatian detail, namun prosesnya lebih sederhana dibandingkan dengan metode yang lebih tua dan tidak memerlukan plugin tambahan. Pastikan file verifikasi domain Anda disajikan dengan benar dan periksa mereka dengan alat-alat platform yang relevan. Setelah terkonfigurasi, aplikasi Anda akan membuka dengan lancar dari tautan web, memberikan transisi yang halus untuk 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 pekerjaan plugin native, hubungkannya dengan Capgo Plugin Directory untuk alur kerja produk di Capgo Plugin Directory, Capacitor Plugins oleh Capgo untuk detail implementasi di Capacitor Plugins oleh Capgo, Mengambah atau Mengupdate Plugin untuk detail implementasi di Mengambah atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Ionic Enterprise Plugin Alternatif, dan Capgo Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.

How to Integrate Universal Links in Next.js dengan Capacitor