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

iOSのユニバーサルリンクとAndroidのAppリンクを使用すると、ユーザーはブラウザを経由せずに直接アプリに移動することができます。これは特にユーザーエクスペリエンスを向上させ、Webページからアプリへのコンテキストを維持するのに役立ちます。このガイドでは、Capacitorを使用したNext.jsアプリのディープリンクの設定プロセスについて説明します。

ディープリンクの設定には多くのコードは必要ありませんが、いくつかの設定が必要です。このガイドの最後には、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

設定に重要なため、capacitor.config.jsonファイルでバンドルIDが正しく設定されていることを確認してください：

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

次に、CapacitorでappUrlOpenイベントを処理しましょう。このイベントは、カスタム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

このコードはappUrlOpenイベントをリッスンし、Next.jsアプリ内の適切なルートにナビゲートします。

iOS設定

iOSの場合、関連ドメインが有効になっているアプリIDが必要です。apple-app-site-associationファイルを作成し、YOURTEAMIDとcom.your.bundleidを実際のチーム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アプリリンクについてはこれらのステップに従ってください：

keystoreファイルがない場合は生成します。
keystoreからSHA256フィンガープリントを取得します。
パッケージ名とSHA256フィンガープリントを含むassetlinks.jsonファイルを作成します。
このファイルをドメインの.well-knownディレクトリにアップロードします。

AndroidManifest.xmlで、ディープリンクを処理するactivity要素にintent-filterを追加します：

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

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

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

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

npx cap-config run capacitor.config.yaml

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

結論

Next.jsアプリでCapacitorを使用したディープリンクの設定には、iOSとAndroid両方のドメインとプロジェクト設定が必要です。このプロセスは細かい注意が必要ですが、以前の方法と比べて簡素化されており、追加のプラグインは必要ありません。ドメイン検証ファイルが正しく提供されていることを確認し、それぞれのプラットフォームツールでチェックしてください。設定が完了すると、アプリはWebリンクからシームレスに開き、ユーザーにWebからアプリへのスムーズな移行を提供します。