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

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

깊은 링크를 설정하는 데는 code가 많이 필요하지 않지만, 설정을 구성하는 데는 시간이 걸립니다. 이 가이드를 마치면, 앱이 설치된 경우 링크를 클릭하여 올바른 페이지로 앱이 열리는 것을 확인할 수 있습니다. https://www.capgo.app/details/22 Next.js 깊은 링크 설정

첫 번째로, 새로운 Next.js 앱과 테스트를 위한 details 페이지를 생성합니다.

__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가 올바르게 설정되어 있는지 확인하세요. 설정은 필수적입니다. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ capacitor.config.json __CAPGO_KEEP_3__

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

For routing, Next.js uses file-based routing, so by creating a file at __CAPGO_KEEP_0__ pages/details/[id].jswe’ve already set up our wildcard route.

In __CAPGO_KEEP_0__, we can retrieve the ID from the URL using Next.js’s built-in router: pages/details/[id].jsNow, let’s handle the __CAPGO_KEEP_0__ event with __CAPGO_KEEP_0__. This event is triggered when the app is opened via a custom URL scheme. Add a listener in the __CAPGO_KEEP_0__ file:

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

This __CAPGO_KEEP_0__ listens for the __CAPGO_KEEP_0__ event and navigates to the appropriate route within your Next.js app. 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 For iOS, you’ll need an app ID with Associated Domains enabled. Create an __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__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 파일에 다음 내용을 포함하여 대체하세요. 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 구성

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

1. 키 스토어 파일을 생성하세요. 만약 이미 키 스토어 파일이 있다면.
2. 키 스토어에서 SHA256 서명값을 얻으세요.
3. 자산 assetlinks.json 패키지 이름과 SHA256 해시값이 포함된 파일을 업로드하세요.
4. 이 파일을 .well-known 디렉토리에서 업로드하세요.

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

태그를 추가하세요. assetlinks.json 파일을 업로드한 후, Google의 Digital Asset Links tool을 사용하여 확인할 수 있습니다. 모든 설정이 올바르게 구성되어 있다면, 녹색 체크박스를 볼 수 있습니다.

앱을 빌드하고 서명하려면 다음 명령어를 사용하세요:

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

이 명령어를 실행하면 연결된 Android 기기에 서명된 앱을 설치할 수 있습니다.

Capacitor 네이티브 프로젝트 설정을 구성하세요.

__CAPGO_KEEP_0__ 프로젝트 설정을 자동화하기 위해 고려해 볼 수 있는 방법은 Capacitor 설정 패키지를 사용하는 것입니다.. 프로젝트에 설치하세요:

npm install @capacitor/configure

프로젝트의 루트 디렉토리에 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

__CAPGO_KEEP_0__ 설정 도구를 이 구성으로 실행하세요:

npx cap-config run capacitor.config.yaml

이러한 설정은 YAML 파일에 지정된 설정을 네이티브 프로젝트에 적용합니다.

결론

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

How to Integrate Universal Links in Next.js with Capacitor에서 계속 진행하세요.

__CAPGO_KEEP_0__를 사용하는 경우 How to Integrate Universal Links in Next.js with Capacitor native 플러그인 작업을 계획하기 위해 연결하세요. Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우를 위해 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항을 위해 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트하는 구현 세부 사항을 위해 Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체의 제품 워크플로우를 위해, 그리고 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우를 위해.