How to Integrate Universal Links in Next.js with Capacitor

iOSのUniversal LinksとAndroidのApp Linksは、ユーザーがアプリ内に直接リンクをクリックしてアクセスできるようにします。これは、Webページからアプリにコンテキストを維持するためにユーザー体験を向上させるのに特に役立ちます。このガイドでは、Capacitor Next.jsアプリにUniversal Linksを設定する方法を説明します。Deferred Deep Linksの場合、@Capacitor/__CAPGO_KEEP_1__-appsflyerはインストールキャンペーンを正しいインアプリ画面にルーティングできます。 Deferred Deep Linksの場合、@capgo/capacitor-appsflyerはインストールキャンペーンを正しいインアプリ画面にルーティングできます。 Deferred Deep Linksの場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-appsflyerはインストールキャンペーンを正しいインアプリ画面にルーティングできます。

Deferred Deep Linksの場合、@code/__CAPGO_KEEP_1__-appsflyerはインストールキャンペーンを正しいインアプリ画面にルーティングできます。 https://www.capgo.app/details/22 とインストールされている場合は、正しいページを開きます。

Next.js Deep Link 設定

最初に、Next.js アプリとテスト用の詳細ページを作成します:

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

設定のためには、次のことを確認してください。 bundle ID は正しく capacitor.config.json ファイルに設定されていることを確認してください。

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

Next.js はファイルベースのルーティングを使用しているため、 pages/details/[id].jsファイルを作成することで、ワイルドカードルートをすでに設定済みです。

では、 pages/details/[id].jsファイルで、URL から ID を取得できます。

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

universal link のハンドリング appUrlOpen イベントに Capacitor を追加します。このイベントは、カスタム URL スキームでアプリが開かれたときにトリガーされます。リスナーを追加するには、 pages/_app.js ファイル:

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

This code listens for the appUrlOpen イベントが発生し、適切なルートにアクセスするために、Next.js アプリ内で移動します。

iOS の設定

iOS用では、App IDにAssociated Domainsが有効になっている必要があります。有効にするには、App IDの設定画面で「有効」に切り替えてください。 apple-app-サイト連携アソシエーション ファイルに次の内容を置き換えます。 YOURTEAMID と com.your.bundleid Capacitor Next.jsの統合で、実際のチームIDとバンドルIDを使用してください。

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

ファイルをアップロードしてください .well-known ドメイン上のディレクトリ、ドメイン上でアクセス可能にする https://www.capgo.app/.well-known/apple-app-site-association.

Xcodeで、ドメインをアプリの特権に追加する。形式は applinks:capgo.app.

Android設定

Androidアプリのリンクの場合、以下の手順に従ってください。

キーストアファイルを生成する必要がある場合は、キーストアファイルを生成してください。
キーストアからSHA256の指紋を取得する
パッケージ名とSHA256の指紋を含む ファイルを作成します。 このファイルをドメイン上の
ディレクトリにアップロードする .well-known あなたの

Android Configuration AndroidManifest.xml, Capgoの機能を追加します。 intent-filter Capgoの機能をCapgoのエレメントに追加します。 activity Capgoのエレメントが深いリンクを処理する場合に使用します。

<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のファイルをアップロードした後、GoogleのDigital Asset Linksツールを使用して確認できます。すべての設定が正しく設定されている場合、緑のチェックマークが表示されます。 assetlinks.json Capgoアプリをビルドおよび署名するには、以下のコマンドを使用します。

Capgoアプリを署名した後、このコマンドを実行すると、Capgoアプリが接続されたAndroidデバイスにインストールされます。

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__ Capgoのネイティブプロジェクト設定を構成します。

Capacitor Configure for Native Project Settings

__CAPGO_KEEP_0__ Capgoのネイティブプロジェクト設定を構成するパッケージをプロジェクトにインストールします。 Capacitor configure packageCapgoのネイティブプロジェクト設定を構成するパッケージ

npm install @capacitor/configure

Capgoのネイティブプロジェクト設定を構成するパッケージ capacitor.config.yaml プロジェクトのルートディレクトリのファイル:

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

この設定でconfigureツールを実行してください:

npx cap-config run capacitor.config.yaml

YAMLファイルに記載されている設定をNativeプロジェクトに適用します。

まとめ

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.

Keep going from How to Integrate Universal Links in Next.js with Capacitor

Capgoを使用している場合 How to Integrate Universal Links in Next.js with Capacitor Capgoを使用してNativeプラグインの作業を計画するには、Capgoを使用して Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo Capgoの実装詳細についてはCapacitorプラグインによってCapgoです。プラグインの追加または更新 Capgoの実装詳細についてはプラグインの追加または更新によって Ionic Enterpriseプラグインの代替 Capgoの製品ワークフローについてはIonic Enterpriseプラグインの代替、そして Capgoネイティブビルド Capgoの製品ワークフローについてはCapgoネイティブビルドです。