How to Integrate Universal Links in Next.js with Capacitor

iOSではUniversal links、AndroidではApp Linksを使用すると、ユーザーはリンクをクリックしてアプリに直接移動できるようになります。ブラウザを回避して、Webページからアプリにコンテキストを維持することができます。このガイドでは、Capacitorを使用してNext.jsアプリにこれらの深いリンクを設定するプロセスを説明します。AttributionとDeferred Deep Linksのために @capgo/capacitor-appsflyer インストールキャンペーンを正しいインアプリ画面にルーティングできます。

深いリンクを設定するにはcodeが必要ですが、設定にはいくつかの構成が必要です。このガイドの終わりまでに、次のようなリンクをクリックして、アプリが正しいページを開くことができます。 https://www.capgo.app/details/22 Next.jsの深いリンク設定

最初に、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

__CAPGO_KEEP_0__ bundle ID __CAPGO_KEEP_0__.config.json capacitor.config.json ルーティングのために、Next.jsはファイルベースのルーティングを使用します。したがって、ルーティングのワイルドカードルートを設定するには、

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

では、URLからIDを取得できます。Next.jsのルーターを使用して、 pages/details/[id].jsのイベントを処理してみましょう。

このイベントは、カスタムURLスキームでアプリを開いたときにトリガーされます。 pages/details/[id].js__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

ファイルにリスナーを追加してください。 appUrlOpen event with Capacitor. This event is triggered when the app is opened via a custom URL scheme. Add a listener in the 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

code appUrlOpen イベントを検知し、Next.jsアプリ内で適切なルートに移動します。

iOS設定

iOSの場合、App IDにAssociated Domainsを有効にする必要があります。次の内容でapple-app-site-associationファイルを作成し、とに実際のチームIDとバンドルIDを置き換えてください。 YOURTEAMID このファイルをドメイン上の com.your.bundleid ディレクトリにアップロードし、

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

でアクセス可能にします。 .well-known Xcodeで、ドメインをアプリの特権に追加します。次の形式を使用します。 https://www.capgo.app/.well-known/apple-app-site-association.

Android設定 applinks:capgo.app.

Androidアプリのリンクについては、次の手順に従ってください。

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__を生成する必要がある場合は、__CAPGO_KEEP_0__ファイルを作成してください。
__CAPGO_KEEP_0__からSHA256の指紋を取得してください。
__CAPGO_KEEP_1__を作成してください。 __CAPGO_KEEP_2__ファイルにパッケージ名とSHA256の指紋を記載してください。 このファイルをドメインの__CAPGO_KEEP_3__ディレクトリにアップロードしてください。
ドメインの__CAPGO_KEEP_4__にアクセスしてください。 .well-known ,に追加してください。

__CAPGO_KEEP_5__要素にdeep linkを処理するタグを追加してください。 AndroidManifest.xml__CAPGO_KEEP_0__をアップロードした後は、 intent-filter __CAPGO_KEEP_6__ activity __CAPGO_KEEP_7__

<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_8__ assetlinks.json Googleのデジタルアセットリンクツールを使用して、ファイルの有効性を確認できます。設定が正しくされている場合、緑のチェックマークが表示されます。

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

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

署名済みアプリを接続済みのAndroidデバイスにインストールします。

Capacitorネイティブプロジェクト設定の構成

ネイティブプロジェクト設定を自動化するには、以下のパッケージを考慮してください。 Capacitorネイティブプロジェクト設定の構成パッケージプロジェクトにインストールしてください。

npm install @capacitor/configure

プロジェクトのルートディレクトリにファイルを作成します。 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

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

npx cap-config run capacitor.config.yaml

まとめ

__CAPGO_KEEP_0__

Capacitorの設定アップで、CapacitorのためのiOSとAndroidのドメインとプロジェクト設定を構成することにより、Next.jsアプリの深いリンクを設定することに関係しています。iOSとAndroidの両方のドメインとプロジェクト設定を構成することにより、Next.jsアプリの深いリンクを設定することに関係しています。設定プロセスには注意が必要ですが、古い方法と比較してよりスムーズで、追加のプラグインが必要なく、設定プロセスはよりスムーズです。ドメインの検証ファイルが正しく提供され、各プラットフォームのツールで確認する必要があります。設定が完了すると、アプリはウェブリンクから平滑に開き、ウェブからアプリへのユーザーの移行を提供します。

How to Integrate Universal Links in Next.js with Capacitor

__CAPGO_KEEP_0__を使用している場合 How to Integrate Universal Links in Next.js with Capacitor __CAPGO_KEEP_0__を使用して Capgo Plugin Directory CapgoのためのCapgo Plugin Directory Capacitor Plugins by Capgo Capacitor Plugins by Capgoのための実装詳細 Adding or Updating Plugins Adding or Updating Pluginsのための実装詳細 Ionic Enterprise Plugin Alternatives Ionic Enterprise プラグイン代替の製品ワークフローについて、 Capgoネイティブビルド for the product workflow in Capgo Native Builds.