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

設定を完了するには、次の条件を満たしてください。 bundle ID __CAPGO_KEEP_0__.config.json capacitor.config.json ルーティングの設定では、ファイルベースのルーティングを使用します。

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

ファイルを pages/details/[id].jsに作成することで、ワイルドカード ルートを設定することができます。

ここで pages/details/[id].jsURLから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 __CAPGO_KEEP_0__

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 は、イベントを検出して、適切なルートにアクセスするための Next.js アプリ内でナビゲートします。 appUrlOpen iOS 設定

iOS の場合、App ID に Associated Domains を有効にする必要があります。Apple の

apple-app-site-association ファイルを作成し、以下の内容に置き換えてください。 チーム ID とバンドル ID を実際のものに置き換えてください。 YOURTEAMID このファイルをアップロードしてください。 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アプリのリンクの場合、以下の手順に従ってください。

1. キーストアファイルを生成する必要がある場合は、キーストアファイルを生成してください。
2. キーストアファイルからSHA256の指紋を取得する必要がある場合は、キーストアファイルからSHA256の指紋を取得してください。
3. パッケージ名とSHA256の指紋を含むアセットリンクのJSONファイルを作成する必要がある場合は、パッケージ名とSHA256の指紋を含むアセットリンクのJSONファイルを作成してください。 ドメイン内にアップロードする必要があるファイルは、ファイルをドメイン内にアップロードしてください。 ドメイン内にアップロードする必要があるファイルは、ファイルをドメイン内にアップロードしてください。
4. ドメイン内にアップロードする必要があるファイルは、ファイルをドメイン内にアップロードしてください。 .well-known ドメイン内にアップロードする必要があるファイルは、ファイルをドメイン内にアップロードしてください。

ドメイン内にアップロードする必要があるファイルは、ファイルをドメイン内にアップロードしてください。 AndroidManifest.xml, add an intent-filter を追加します。 activity to the

<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 element that handles deep 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

After uploading the

Capacitor Configure for Native Project Settings

file, you can verify it using Google’s Digital Asset Links tool. If everything is set up correctly, you’ll see a green checkmark. Capacitor configure packageTo build and sign your app, use the following commands:

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ファイルに記載されている設定をNativeプロジェクトに適用します。

まとめ

Setting up deep links with Capacitor for a Next.js app involves configuring your domain and project settings for both iOS and Android. While the process requires attention to detail, it’s streamlined compared to older methods and doesn’t require additional plugins. Ensure your domain verification files are correctly served and check them with the respective platform tools. Once set up, your app will seamlessly open from web links, providing a smooth transition for your users from web to app.

Keep going from How to Integrate Universal Links in Next.js with Capacitor

Capgoを使用している場合 How to Integrate Universal Links in Next.js with Capacitor Nativeプラグインの作業を計画する場合、Capgoを使用してNext.jsアプリのUniversal Linksを統合する方法については、ここから続きます。 Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo 実装詳細については Capacitor プラグインの Capgo を参照してください。 プラグインの追加または更新 実装詳細についてはプラグインの追加または更新を参照してください。 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについては、 Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフローについては。