How to Integrate Universal Links in Next.js with Capacitor

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

デープリンクを設定するには、codeが必要ですが、設定にはいくつかの設定が必要です。このガイドの終わりまでに、次のようなリンクをクリックして、アプリが正しいページに開くことができるようになります。 https://www.capgo.app/details/22 Next.jsデープリンク設定

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

__CAPGO_KEEP_0__.config.jsonファイルで、

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 が正しく設定されていることを確認してください。これは設定の重要なステップです。 ルーティングでは、Next.jsはファイルベースのルーティングを使用するため、 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

のイベントを処理する 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 ファイル:

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 iOSの設定

iOSの場合、アプリIDにAssociated Domainsを有効にする必要があります。次の内容でapple-app-site-associationファイルを作成し、

と を置き換えます。 ファイル YOURTEAMID の com.your.bundleid __CAPGO_KEEP_0__と__CAPGO_KEEP_1__を実際のチーム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アプリのリンク設定

Androidアプリのリンク設定の場合、以下の手順に従ってください。
キーストアファイルを生成する場合は、以下の手順に従ってください。
キーストアファイルからSHA256の指紋を取得する場合は、以下の手順に従ってください。 __CAPGO_KEEP_2__アセットのリンク設定ファイルを作成します。ファイル名はassetlinks.jsonで、パッケージ名とSHA256の指紋を含めます。 このファイルをドメインの
ディレクトリにアップロードし、ドメインにアクセスできるようにしてください。 .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. Install it in your project:

npm install @capacitor/configure

Create a capacitor.config.yaml file at the root of your project:

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

Run the configure tool with this config:

npx cap-config run capacitor.config.yaml

This will apply the settings specified in the YAML file to your native projects.

Conclusion

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

If you are using How to Integrate Universal Links in Next.js with Capacitor to plan native plugin work, connect it with Capgo Plugin Directory 製品ワークフローについては、Capgo プラグインディレクトリを参照してください。 Capacitor プラグインは、Capgo によって提供されています。実装詳細については、Capacitor プラグインの Capgo を参照してください。プラグインの追加または更新実装詳細については、プラグインの追加または更新を参照してください。 Ionic Enterprise プラグインの代替製品ワークフローについては、Ionic Enterprise プラグインの代替を参照してください。 Capgo ネイティブビルド製品ワークフローについては、Capgo ネイティブビルドを参照してください。