Capacitor를 사용한 Next.js에서 Universal Links 통합 방법

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

깊은 링크를 설정하는 데 code가 많이 필요하지 않지만, 설정을 구성해야 합니다. 이 가이드를 마치면, 링크를 클릭하여 앱으로 이동할 수 있습니다. https://www.capgo.app/details/22 __CAPGO_KEEP_0__.config.json파일에서

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파일에서 Next.js는 파일 기반 라우팅을 사용하므로

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

__CAPGO_KEEP_0__.config.json파일에서 pages/details/[id].js__CAPGO_KEEP_0__.config.json파일에서

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 pages/_app.js 이벤트를 처리해 보겠습니다. 이 이벤트는 사용자가 커스텀 URL 스키마를 통해 앱을 열 때 발생합니다. __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

This code listens for the appUrlOpen __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

iOS 설정 iOS에서는 앱 ID에 Associated Domains 기능이 활성화된 상태여야 합니다. Associated Domains 기능이 활성화된 앱 ID를 생성하세요. 다음 내용으로 apple-app-site-association 파일을 생성하세요. __CAPGO_KEEP_1__ 와 __CAPGO_KEEP_2__ 를 실제 팀 ID와 번들 ID로 대체하세요. 이 파일을 Cloudflare에 업로드하세요. YOURTEAMID __CAPGO_KEEP_3__ com.your.bundleid __CAPGO_KEEP_4__

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

__CAPGO_KEEP_5__ .well-known 도메인 내에 디렉토리, 이를 도메인 내에 접근 가능하게 만듭니다. https://www.capgo.app/.well-known/apple-app-site-association.

Xcode에서 앱의 권한에 도메인을 추가하세요. 형식은 다음과 같습니다. applinks:capgo.app.

Android 설정

Android 앱 링크를 위해 다음 단계를 따르세요.

키스토어 파일을 생성하세요. 만약 이미 키스토어 파일이 있다면 생략하세요.
키스토어에서 SHA256 서명값을 획득하세요.
패키지 이름과 SHA256 서명값을 포함한 assetlinks.json 파일을 생성하세요. 이 파일을 도메인 내의 디렉토리에 업로드하세요. Xcode에서
도메인 내의 디렉토리 .well-known Android Configuration

Android 앱 링크를 위해 다음 단계를 따르세요. AndroidManifest.xml, add an intent-filter to activity element이 deep 링크를 처리하는 것을 처리합니다.

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

Capacitor Configure for Native Project Settings

__CAPGO_KEEP_0__ configure 패키지를 고려하세요. Capacitor configure package생성

npm install @capacitor/configure

element이 deep 링크를 처리하는 것을 처리합니다. 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 프로젝트에 적용합니다.

결론

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

Next.js에서 Universal 링크를 통합하는 방법에 대해 Capacitor를 계속 진행하세요.

__CAPGO_KEEP_0__를 사용하는 경우 Next.js에서 Universal 링크를 통합하는 방법에 대해 Capacitor를 사용하세요. __CAPGO_KEEP_0__를 사용하여 Native 플러그인 작업을 계획하고 연결하세요. Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 __CAPGO_KEEP_1__로 연결하세요. Capgo에서 Capacitor 플러그인 Capacitor 플러그인 구현 세부 사항에 대해 Capgo에서 설명합니다. 플러그인 추가 또는 업데이트 __CAPGO_KEEP_0__ 플러그인 구현 세부 사항에 대해 설명합니다. Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체에 대한 제품 워크플로입니다. Capgo 네이티브 빌드 Capgo 네이티브 빌드에 대한 제품 워크플로입니다.

Next.js에서 Capacitor를 사용하여 Universal Links를 통합하는 방법

Next.js Deep Link 설정

__CAPGO_KEEP_0__

Android 설정

Capacitor Configure for Native Project Settings

결론

Next.js에서 Universal 링크를 통합하는 방법에 대해 Capacitor를 계속 진행하세요.