Next.jsとCapacitorでUniversal Linksを統合する方法

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 インストールキャンペーンを正しいインアップスクリーンにルーティングすることができます。

デープリンクを設定するには、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

バンドル ID は正しく設定されていることを確認してください。 設定 capacitor.config.json __CAPGO_KEEP_1__.config.json

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

__CAPGO_KEEP_2__.config.json pages/details/[id].js__CAPGO_KEEP_3__.config.json

__CAPGO_KEEP_4__.config.json pages/details/[id].js__CAPGO_KEEP_5__.config.json

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_6__.config.json 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_8__.config.json

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_10__.config.json

__CAPGO_KEEP_11__.config.json

iOSでは、関連付けられたドメインを有効にしたアプリIDが必要です。アプリIDを作成し、 apple-app-site-association ファイルを作成し、以下の内容を置き換えてください。 YOURTEAMID と com.your.bundleid コンテキスト: Capgo マーケティングウェブサイト。役割: 短い UI ラベルまたはナビゲーションアイテム。ページ/エリア: page trust.astro。メッセージキー `and` (And)。

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

実際のチーム ID とバンドル ID を置き換えてください: .well-known このファイルをドメインの https://www.capgo.app/.well-known/apple-app-site-association.

ディレクトリにアップロードし、以下の URL でアクセスできるようにしてください。 applinks:capgo.app.

Xcode で、ドメインをアプリの特権に追加し、以下の形式で指定してください。

Android Configuration

Android アプリリンクの場合、以下の手順に従ってください。
キーストアファイルを作成する必要があります。キーストアファイルがない場合は、キーストアファイルを作成してください。
アプリケーションを作成して assetlinks.json __CAPGO_KEEP_0__のパッケージ名とSHA256の指紋を含むファイルを作成してください。
__CAPGO_KEEP_0__のファイルをあなたのドメインの .well-known ディレクトリにアップロードしてください。

あなたの AndroidManifest.xml,に intent-filter を追加してください。デープリンクを処理する要素: activity __CAPGO_KEEP_0__のファイルをアップロードした後、GoogleのDigital Asset 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>

アプリケーションをビルドして署名するには、以下のコマンドを使用してください: assetlinks.json protectedTokens

pagePath

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

Native Project Settingsを自動化するには、 Capacitor configureパッケージを使用することを検討してください。プロジェクトにインストールしてください:

npm install @capacitor/configure

プロジェクトのルートディレクトリにファイルを作成します: capacitor.config.yaml この設定ファイルでconfigureツールを実行します:

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

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

npx cap-config run capacitor.config.yaml

続けて、__CAPGO_KEEP_0__でNext.jsにデープリンクを統合する方法について

__CAPGO_KEEP_0__でNext.jsにデープリンクを統合する方法について

CapacitorでNext.jsにデープリンクを統合する方法について

Capgoを使用している場合 How to Integrate Universal Links in Next.js with Capacitor Capgoを使用して Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgoプラグインの実装詳細 Capgoプラグインの追加または更新 Capgoプラグインの実装詳細 Ionic Enterpriseプラグインの代替 Capgo Native Builds for the product workflow in Capgo Native Builds.