Next.jsで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-アプリフライヤー インストールキャンペーンを正しいインアプリ画面にルーティングすることができます。

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 __CAPGO_KEEP_0__

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

設定のために、 バンドル ID は正しく capacitor.config.json ファイルに設定されていることを確認してください。

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

ルーティングでは、Next.js はファイルベースのルーティングを使用します。 pages/details/[id].jsファイルを

In pages/details/[id].jsで、URL から 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

Next.js の組み込みルーターを使用します。 appUrlOpen Capacitorイベント。このイベントは、カスタムURLスキームでアプリを開いたときにトリガーされます。カスタムURLスキームでアプリを開いたときにトリガーされるイベントを追加します。 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の場合、App IDにAssociated Domainsを有効にする必要があります。次の内容でapple-app-site-associationファイルを作成し、

と に置き換えてください。 チームIDとバンドルIDを実際のものに置き換えてください。 YOURTEAMID and com.your.bundleid ディレクトリにアップロードし、ドメイン上でアクセス可能なようにします。

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

apple-app-site-association .well-known iOS Configuration https://www.capgo.app/.well-known/apple-app-site-association.

In Xcode, app の特権にドメインを追加してください。形式は applinks:capgo.app.

Android 設定

Android App Links については、以下の手順に従ってください。

1. keystore ファイルを生成する必要があります。
2. SHA256 の fingerprint を取得する必要があります。
3. Create an このファイルをドメインの ディレクトリにアップロードする必要があります。
4. の .well-known に、

の AndroidManifest.xmlを追加する必要があります。 intent-filter Capgo activity Capacitor

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

Capacitor assetlinks.json Capacitor

Capacitor

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

Capacitor

Capacitor ネイティブプロジェクト設定を構成する

Capacitor Capacitor を設定するパッケージCapacitor

npm install @capacitor/configure

Capacitor capacitor.config.yaml Capacitor

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のツールをこの設定で実行してください:

npx cap-config run capacitor.config.yaml

この設定は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.

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

Capgoを使用している場合 How to Integrate Universal Links in Next.js with Capacitor Capgoのプラグインディレクトリと接続する Capgo プラグインディレクトリ for the product workflow in Capgo Plugin Directory, Capacitor プラグインは Capgo によって提供されます。 Capacitor Next.js の実装詳細は Capacitor プラグインによって Capgo で管理されます。 プラグインの追加または更新 プラグインの追加または更新の実装詳細について イオニック エンタープライズ プラグインの代替 イオニック エンタープライズ プラグインのワークフローについて Capgo ネイティブ ビルド Capgo ネイティブ ビルドのワークフローについて