How to Integrate Universal Links in Next.js with Capacitor

iOSのユニバーサルリンクとAndroidのApp Linksは、ユーザーをアプリに直接導き、ブラウザを回避することができます。これは、ユーザー体験を向上させ、Webページからアプリまでのコンテキストを維持するために特に便利です。このガイドでは、Capacitorを使用してNext.jsアプリのデープリンクを設定するプロセスについて説明します。

デープリンクを設定するには、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の設定を確実にするために __CAPGO_KEEP_0__.config.jsonファイルの に正しく設定されていることを確認してください。 capacitor.config.json Next.jsはファイルベースのルーティングを使用するため、

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

でファイルを作成することで、ワイルドカードルートをすでに設定済みです。 pages/details/[id].jsNext.jsの組み込みルーターを使用して、

URLからIDを取得できます。 pages/details/[id].jsカスタムURLスキームでアプリを開いたときにトリガーされる

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

__CAPGO_KEEP_0__ 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 __CAPGO_KEEP_0__.file

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 ファイルを作成し、以下の内容を置き換えてください。 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.

でアクセス可能にします。 applinks:capgo.app.

Xcode では、ドメインをアプリの特権に追加します。フォーマットは「」で、以下の内容を入力してください。

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

キーストアファイルを生成する必要がある場合は、以下の手順に従ってください。
キーストアファイルからSHA256の指紋を取得する必要があります。
パッケージ名とSHA256の指紋を含む assetlinks.json ファイルを作成します。
このファイルをドメインの .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>

アップロードしたファイルを確認するには、GoogleのDigital Asset Linksツールを使用してください。設定が正しくされている場合、緑のチェックマークが表示されます。 assetlinks.json すべての設定が正しくされている場合、緑のチェックマークが表示されます。

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

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 Project Settingsを設定する

ネイティブプロジェクトの設定を自動化するには、 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ファイルに指定された設定をネイティブプロジェクトに適用します。

まとめ

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

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

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

iOS 設定

Xcode では、ドメインをアプリの特権に追加します。フォーマットは「」で、以下の内容を入力してください。

Capacitor Native Project Settingsを設定する

まとめ