Bagaimana Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor

Tautan universal di iOS dan Tautan Aplikasi di Android memungkinkan pengguna untuk dibawa langsung ke aplikasi Anda dari sebuah tautan, menghindari browser. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna dan menjaga konteks dari sebuah 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 mengatur kampanye instalasi ke layar yang benar di dalam aplikasi.

Mengatur tautan dalam tidak memerlukan banyak code, tetapi melibatkan beberapa pengaturan. Setelah membaca panduan ini, Anda akan dapat mengklik sebuah 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 sebuah aplikasi Next.js baru dan sebuah halaman detail untuk pengujian:

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 terkonfigurasi dengan benar di capacitor.config.json file, karena hal ini 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].jskita telah mengatur wildcard route.

Dalam pages/details/[id].jskita dapat mengambil ID dari URL menggunakan router Next.js yang sudah ada:

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

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

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

Konfigurasi iOS

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

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

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

di direktori pada domain Anda, membuatnya dapat diakses di applinks:capgo.app.

Konfigurasi Android

For Android App Links, follow these steps:

1. Untuk Android App Links, ikuti langkah-langkah berikut:
2. Olehkan fingerprint SHA256 dari keystore.
3. Buat sebuah assetlinks.json Unggah file ini ke direktori di domain Anda.
4. Upload file ini ke .well-known direktori di domain Anda.

In your AndroidManifest.xmlTambahkan sebuah intent-filter kepadanya activity elemen yang mengatur 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>

__CAPGO_KEEP_2__ assetlinks.json Anda dapat memeriksa file tersebut menggunakan alat Tautan Aset Digital Google. Jika semua pengaturan sudah benar, Anda akan melihat tanda centang hijau.

Untuk membangun dan menandatangani aplikasi Anda, gunakan 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

Membangun dan menandatangani aplikasi Anda, gunakan perintah-perintah berikut:

Capacitor Configure for Native Project Settings

Gunakan Capgo untuk mengautomatisasi pengaturan proyek native. Capacitor Configure for Native Project Settings__CAPGO_KEEP_0__ Konfigurasi untuk Pengaturan Proyek Asli

npm install @capacitor/configure

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

Aplikasi pengaturan yang ditentukan dalam file YAML ke proyek-proyek asli Anda.

Conclusion

Setting up deep links with Capacitor for a Next.js app involves configuring your domain and project settings for both iOS and Android. While the process requires attention to detail, it’s streamlined compared to older methods and doesn’t require additional plugins. Ensure your domain verification files are correctly served and check them with the respective platform tools. Once set up, your app will seamlessly open from web links, providing a smooth transition for your users from web to app.

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 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 kerja produk di Alternatif Plugin Enterprise Ionic, dan Buat Capgo Build Nativ untuk alur kerja produk di Capgo Build Nativ.