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

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

デープリンクを設定するには、codeが必要ですが、設定にはいくつかの設定が必要です。このガイドの終わりまでに、インストールされている場合にアプリを開くための正しいページにアプリが開くようにクリックできるリンクを作成できます。 https://www.capgo.app/details/22 Next.jsデープリンク設定

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

__CAPGO_KEEP_0__.config.jsonファイルに、bundle IDが正しく設定されていることを確認してください。これは設定のために重要です。

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

ルーティングでは、Next.jsはファイルベースのルーティングを使用するため、ファイルを に作成することで、ワイルドカードルートをすでに設定済みです。 __CAPGO_KEEP_0__ capacitor.config.json __CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__ pages/details/[id].js__CAPGO_KEEP_0__

In pages/details/[id].js, we can retrieve the ID from the URL using Next.js’s built-in router:

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

Now, let’s handle the 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 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

This code listens for the appUrlOpen event and navigates to the appropriate route within your Next.js app.

iOS Configuration

For iOS, you’ll need an app ID with Associated Domains enabled. Create an apple-app-site-association file with the following content, replacing YOURTEAMID and 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 アプリリンクの場合、以下の手順に従ってください。

キーストアファイルを生成する必要があります。
キーストアから SHA256 の指紋を取得する必要があります。
パッケージ名と SHA256 の指紋を含む assetlinks.json ファイルを作成します。
このファイルを .well-known ドメイン内のディレクトリ。

あなたの AndroidManifest.xmlに、 intent-filter を追加してください。 activity URLの深いリンクを処理する

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

Capacitor Configure for Native Project Settings

__CAPGO_KEEP_0__ configureパッケージを考慮してください Capacitor.プロジェクトにインストールする:

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

まとめ

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.

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

Capgoを使用している場合、ネイティブプラグインの作業を計画するときは、__CAPGO_KEEP_0__ Plugin Directoryと接続してください。 How to Integrate Universal Links in Next.js with Capacitor Capgoを使用している場合、ネイティブプラグインの作業を計画するときは、Capacitor Plugin Directoryと接続してください。 Capgo Plugin Directory 製品ワークフローについての情報は、Capgo プラグインディレクトリで確認できます。 Capacitor プラグインは、Capgo によって提供されています。実装詳細についての情報は、Capacitor プラグインによってCapgoで提供されています。プラグインの追加または更新実装詳細についての情報は、プラグインの追加または更新で提供されています。 Ionic Enterprise プラグインの代替製品ワークフローについての情報は、Ionic Enterprise プラグインの代替で確認できます。 Capgo ネイティブビルド製品ワークフローについての情報は、Capgo ネイティブビルドで確認できます。