Capacitorを使用したNext.jsでのUniversal Links統合方法

Capacitor を使用して、iOS と Android 両方のプラットフォームで Next.js アプリに Universal Links を設定する手順をステップバイステップで解説します。

iOS の Universal Links と Android の App Links を使用すると、ユーザーはブラウザを経由せず、リンクから直接アプリに遷移できます。これは、ユーザー体験の向上や、ウェブページからアプリへのコンテキスト維持に非常に有効です。本ガイドでは、Capacitor を使用して Next.js アプリにこれらのディープリンクをセットアップする手順を解説します。アトリビューションやディファードディープリンクについては、 @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

ご利用の 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、Next.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

次に、 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

この code は appUrlOpen イベントをリッスンし、Next.js アプリ内の適切なルートへ遷移します。

iOSの設定

iOS では、Associated Domains を有効にした App ID が必要です。次の内容で apple-app-site-association ファイルを作成し、 YOURTEAMID と com.your.bundleid を実際の Team ID と Bundle ID に置き換えてください：

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

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

Xcode で、次の形式を使ってアプリの entitlements にドメインを追加します： applinks:capgo.app.

Androidの設定

Android App Links の場合は、次の手順に従ってください：

keystore ファイルがない場合は生成してください。
keystore から SHA256 フィンガープリントを取得します。
以下を作成： assetlinks.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

これにより、接続されているAndroidデバイスに署名済みアプリがインストールされます。

Capacitor Nativeプロジェクトの設定を行う

ネイティブプロジェクトの設定を自動化するには、 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

この設定でconfigureツールを実行します:

npx cap-config run capacitor.config.yaml

これにより、YAMLファイルで指定された設定がネイティブプロジェクトに適用されます。

まとめ

Next.jsアプリでCapacitorを使ってディープリンクをセットアップするには、iOSとAndroidの両方でドメインとプロジェクトを設定します。細かい点に注意が必要ですが、従来の方法よりシンプルで、追加のプラグインも不要です。ドメイン検証ファイルが正しく配信されているか確認し、各プラットフォームのツールでチェックしてください。セットアップが完了すれば、アプリはウェブリンクからシームレスに起動し、ユーザーはウェブからアプリへスムーズに移行できます。

続きは「Capacitorを使ったNext.jsでのUniversal Links統合」へ

使用している場合 Capacitorを使用したNext.jsでのUniversal Links統合方法 ネイティブプラグインの作業を計画するには、次と連携してください： Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、プラグインの追加または更新プラグインの追加または更新に関する実装詳細については、 Ionic Enterprise プラグインの代替案 Ionic Enterprise Plugin Alternatives のプロダクトワークフロー、および Capgo Native Build Capgo Native Builds のプロダクトワークフローについては、