How to Integrate Universal Links in Next.js with Capacitor

Universal links on iOS and App Links on Android allow users to be taken directly into your app from a link, bypassing the browser. This is particularly useful for improving user experience and maintaining the context from a web page to an app. In this guide, we’ll walk through the process of setting up these deep links for a Next.js app using Capacitor. For attribution and deferred deep links, @capgo/capacitor-appsflyer インストールキャンペーンを正しいインアプリ画面にルーティングすることができます。

Setting up deep links doesn’t require a lot of code, but it does involve some configuration. By the end of this guide, you’ll be able to click a link like https://www.capgo.app/details/22 とインストールされている場合は、正しいページを開くようにアプリを設定します。

Next.js Deep Link 設定

最初に、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__.config.json ファイル内の bundle ID capacitor.config.json 設定はこのファイルに依存しているためです:

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

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

ここで、URL から ID を取得できます。 pages/details/[id].jsNext.js の組み込みルーターを使用します:

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 pages/_app.js このイベントは、カスタムURLスキームを介してアプリが開かれたときにトリガーされます。

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 __CAPGO_KEEP_0__

この

イベントを待ち受け、Next.jsアプリケーション内で適切なルートに移動します。 iOSの設定 iOSの場合、アプリIDにAssociated Domains機能が有効になっている必要があります。 YOURTEAMID apple-app-site-association com.your.bundleid 以下の内容でファイルを作成し、

{
  "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アプリのリンクの場合、以下の手順に従ってください。

キーストアファイルを生成する必要がある場合は、キーストアファイルを生成してください。
キーストアファイルからSHA256の指紋を取得する。
__CAPGO_KEEP_0__ パッケージ名とSHA256の指紋を含むassetlinks.jsonファイルを作成する。 このファイルをドメイン内の
ドメイン内にディレクトリを作成し、ドメイン内にアクセス可能にする .well-known ドメイン

ドメイン AndroidManifest.xml, add an intent-filter を activity element that handles deep links:

<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 アプリをビルドして署名するには、以下のコマンドを使用してください:

このコマンドは、接続されているAndroidデバイスに署名済みのアプリをインストールします。

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

__CAPGO_KEEP_0__ Native Project Settingsを設定する

Capacitor Configure for Native Project Settings

__CAPGO_KEEP_0__ configureパッケージ Capacitor configure package作成

npm install @capacitor/configure

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

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

まとめ

CapacitorのNext.jsアプリにデープリンクを設定するには、iOSとAndroidの両方のドメインとプロジェクト設定を構成する必要があります。プロセスには細かい注意が必要ですが、古い方法と比べると簡素化されており、追加のプラグインが必要ありません。ドメインの検証ファイルが正しく配信されていることを確認し、各プラットフォームのツールで確認してください。設定が完了すると、アプリはウェブからアプリへの移行をスムーズに実現するようになります。

Capacitorの「How to Integrate Universal Links in Next.js」から続けてください。

__CAPGO_KEEP_2__を使用している場合 Capacitorの「How to Integrate Universal Links in Next.js」 __CAPGO_KEEP_0__を「__CAPGO_KEEP_0__ Plugin Directory」に接続してください。「Capgo Plugin Directory」で「Capgo」の製品ワークフローを設定してください。 Capgo「__CAPGO_KEEP_1__」によって提供されている「Capgo」プラグイン Capacitor Plugins by Capgo 実装詳細については Capacitor プラグインの Capgo を参照してください。プラグインの追加または更新実装詳細についてはプラグインの追加または更新を参照してください。 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについては、 Capgo ネイティブビルド製品ワークフローについては、Capgo ネイティブビルドを参照してください。