How to Integrate Universal Links in Next.js with Capacitor

iOS와 Android에서 사용자에게 앱으로 바로 이동할 수 있는 Universal links와 App Links를 사용하면, 사용자가 웹 페이지에서 앱으로 이동할 수 있습니다. 이 기능은 사용자 경험을 개선하고 웹 페이지에서 앱으로의 컨텍스트를 유지하는 데 유용합니다. 이 가이드에서는 Capacitor을 사용하여 Next.js 앱에 대한 이러한 깊은 링크를 설정하는 방법을 설명합니다. attribution 및 deferred deep links에 대해, @capgo/capacitor-appsflyer 설치 캠페인을 올바른 인앱 화면으로 라우팅할 수 있습니다.

깊은 링크를 설정하는 데는 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 가 올바르게 설정되어야 합니다. 이는 설정에 중요합니다: bundle ID capacitor.config.json file

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

Next.js는 파일 기반 라우팅을 사용하므로, 파일을 생성하여 pages/details/[id].js, wildcard route를 이미 설정했습니다.

Next.js의 built-in router를 사용하여 URL에서 ID를 가져올 수 있습니다: pages/details/[id].js이제, __CAPGO_KEEP_0__ 이벤트를 처리해 보겠습니다. 이 이벤트는 사용자 정의 URL scheme를 통해 앱이 열릴 때 발생합니다. __CAPGO_KEEP_0__에서 리스너를 추가하여:

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_0__는 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 iOS 설정

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 apple-app-site-association

파일을 생성하여

이미 설정했습니다. URL에서 ID를 가져올 수 있습니다: 파일에 다음 내용을 포함하고, YOURTEAMID 그리고 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 Configuration

Android 앱 링크를 위해 다음 단계를 따르십시오.

1. 키스토어 파일을 생성하십시오. 만약 키스토어 파일이 없다면.
2. 키스토어에서 SHA256 서명값을 얻으십시오.
3. 자산 링크 JSON 파일을 생성하십시오. assetlinks.json __CAPGO_KEEP_0__ 패키지 이름과 SHA256 지문으로 구성된 파일입니다.
4. __CAPGO_KEEP_0__에 업로드하세요. .well-known __CAPGO_KEEP_0__ 디렉토리에서 업로드하세요.

웹 앱에서 AndroidManifest.xml에 추가하세요. intent-filter deep link를 처리하는 요소에 activity 을 추가하세요.

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

__CAPGO_KEEP_0__ 파일을 업로드한 후, Google의 Digital Asset Links tool을 사용하여 확인할 수 있습니다. 모든 설정이 올바르게 구성되어 있다면, 녹색 체크 마크를 볼 수 있습니다. assetlinks.json 앱을 빌드하고 서명하려면 다음 명령어를 사용하세요:

이 명령어를 실행하면 연결된 Android 기기에 signed 앱을 설치합니다.

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__ 네이티브 프로젝트 설정을 구성하세요.

Capacitor

To native 프로젝트 설정을 자동화하기 위해 고려해 볼 수 있는 것은 __CAPGO_KEEP_0__ configure 패키지를 사용하는 것입니다. Capacitor configure 패키지를 설치하세요.프로젝트의 루트 폴더에 파일을 생성하세요.

npm install @capacitor/configure

이 config로 configure tool을 실행하세요. capacitor.config.yaml 이 설정은 YAML 파일에 명시된 설정을 native 프로젝트에 적용합니다.

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

결론

npx cap-config run capacitor.config.yaml

Next.js 앱에 __CAPGO_KEEP_0__를 사용하여 깊이 있는 링크를 통합하는 것은 iOS와 Android의 도메인 및 프로젝트 설정을 구성하는 것입니다. 프로세스는 세부 사항에 주의가 필요하지만 이전 방법에 비해 단순화되었으며 추가 플러그인을 설치할 필요가 없습니다. 도메인 확인 파일이 올바르게 제공되고 플랫폼별 도구와 확인하는 것을 확인하세요. 설정이 완료되면 앱은 웹 링크에서 원활하게 열리며, 사용자가 웹에서 앱으로 전환하는 데 있어MOOTH한 경험을 제공합니다.

다음 단계는 How to Integrate Universal Links in Next.js with __CAPGO_KEEP_0__에서 계속하세요.

Capacitor를 사용하는 경우

How to Integrate Universal Links in Next.js with Capacitor

__CAPGO_KEEP_0__ Capacitor native 플러그인 작업을 계획하기 위해, 그것을 Capgo 플러그인 디렉토리 제품 워크플로우에 대해 Capgo 플러그인 디렉토리에서 Capacitor 플러그인들에 의해 Capgo 제품 워크플로우에 대해 Capacitor 플러그인들에 의해 Capgo 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트 아이오닉 엔터프라이즈 플러그인 대체 제품 워크플로우에 대해 아이오닉 엔터프라이즈 플러그인 대체, Capgo 네이티브 빌드 제품 워크플로우에 대해 Capgo 네이티브 빌드.