How to Integrate Universal Links in Next.js with Capacitor

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

Deep linksを設定するには、codeが必要ですが、設定には少量のもので済みます。このガイドの終わりまでに、次のようなリンクをクリックして、アプリが正しいページに開くことができます。 https://www.capgo.app/details/22 Next.js Deep Link Setup

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

__CAPGO_KEEP_0__.config.jsonファイルに、

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 が正しく設定されていることを確認してください。これは、設定のために重要です。 __CAPGO_KEEP_0__.config.json capacitor __CAPGO_KEEP_1__

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

ルーティングの場合、Next.jsはファイルベースのルーティングを使用するので、ファイルを次の場所に作成することでルーティングを設定できます。 pages/details/[id].jsすでにワイルドカードルートを設定済みです。

Next.jsのルーターを使用してURLからIDを取得できます。 pages/details/[id].jsURLスキームを使用してアプリを開いたときに発生するイベントを処理するには、まず__CAPGO_KEEP_0__を使用します。

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

このイベントは、カスタムURLスキームを使用してアプリを開いたときに発生します。__CAPGO_KEEP_0__を使用してリスナーを追加します。 appUrlOpen CapacitorはURLスキームを使用してアプリを開いたときに発生するイベントをリスンし、適切なルートにナビゲートします。 pages/_app.js iOSの設定

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 apple-app-site-association

apple-app-site-association

apple-app-site-association apple-app-site-association ファイルに以下の内容を含む、置き換え YOURTEAMID と com.your.bundleid チームIDとバンドルIDを入力してください

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

アップロードするファイルを .well-known ドメインのディレクトリにアップロードし、以下のURLでアクセスする https://www.capgo.app/.well-known/apple-app-site-association.

Xcodeで、ドメインをアプリの特権に追加します。フォーマットは applinks:capgo.app.

Android設定

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

キーストアファイルを生成する
キーストアからSHA256の指紋を取得する
アセットリンクの アセットリンクのJSONファイル パッケージ名とSHA256のハッシュ値が含まれたファイル。
このファイルを .well-known ドメイン上の

でアップロードしてください。 AndroidManifest.xmlの intent-filter に activity を追加してください。

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

が深いリンクを処理する要素です。 assetlinks.json アップロードした

ファイルを使用して、GoogleのDigital Asset Linksツールで検証できます。設定が正しく行われている場合、緑のチェックマークが表示されます。

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

アプリをビルドして署名するには、以下のコマンドを使用してください。

Capacitor Native Project Settingsの設定を構成する

自動化のためのネイティブプロジェクト設定を実現するには、 Capacitor を使用した設定パッケージを検討してください。__CAPGO_KEEP_0__ をプロジェクトにインストールしてください。

npm install @capacitor/configure

プロジェクトのルートディレクトリにファイルを作成してください。 capacitor.config.yaml __CAPGO_KEEP_0__ の設定ツールを実行してください。

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

この設定ファイルを使用して、YAMLファイルに記載されている設定をネイティブプロジェクトに適用します。

npx cap-config run capacitor.config.yaml

まとめ

__CAPGO_KEEP_0__ を使用して Next.js アプリでデープリンクを設定するには、iOS と Android の両方のドメインとプロジェクト設定を構成する必要があります。

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 を使用して Next.js でデープリンクを統合する方法を参照してください。 How to Integrate Universal Links in Next.js with Capacitor native プラグインの作業を計画するには、 Capgo プラグインディレクトリに接続します。 Capgo プラグインディレクトリにおける製品ワークフロー Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ プラグイン __CAPGO_KEEP_1__ プラグインの追加または更新 __CAPGO_KEEP_0__ プラグイン Capgo Native Builds for the product workflow in Capgo Native Builds.

Next.jsでCapacitorを使用してユニバーサルリンクを統合する方法