Next.js에서 Capacitor을 통합하는 방법

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 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 는 capacitor.config.json 파일에 정확히 설정되어야 합니다.

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

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

Next.js의 내장 라우터를 사용하여 URL에서 ID를 가져올 수 있습니다. pages/details/[id].jsNext.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

이제, 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 __CAPGO_KEEP_0__이벤트는 사용자가 앱을 커스텀 URL scheme으로 열 때 발생합니다.

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

이벤트를 감지하고 Next.js 앱 내의 적절한 경로로 이동합니다.

iOS 설정 iOS에서는 앱 ID에 Associated Domains 기능이 활성화된 상태여야 합니다. apple-app-site-association YOURTEAMID 이 파일의 내용은 다음과 같습니다. com.your.bundleid team ID와 bundle ID를 실제로 입력하세요.

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

이 파일을 .well-known __CAPGO_KEEP_0__ https://www.capgo.app/.well-known/apple-app-site-association.

__CAPGO_KEEP_0__ applinks:capgo.app.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ .well-known __CAPGO_KEEP_0__

__CAPGO_KEEP_0__ AndroidManifest.xml, 앱에 intent-filter 을 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>

파일을 업로드한 후, 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

을 생성하세요. 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

이 config로 configure tool을 실행하세요:

npx cap-config run capacitor.config.yaml

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

결론

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

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

Next.js에 __CAPGO_KEEP_0__를 사용하는 경우 How to Integrate Universal Links in Next.js with Capacitor Next.js 앱의 __CAPGO_KEEP_0__ 플러그인 작업을 계획하는 경우 __CAPGO_KEEP_0__와 연결하세요. Capgo 플러그인 디렉토리에서 Capgo 제품 워크플로우를 확인하세요. Capgo 플러그인 디렉토리에서 __CAPGO_KEEP_1__의 Capgo를 확인하세요. Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, 플러그인 추가 또는 업데이트 __CAPGO_KEEP_0__ 플러그인에 대한 구현 세부 정보 아이오닉 엔터프라이즈 플러그인 대안 __CAPGO_KEEP_0__ 제품 워크플로우 Capgo 네이티브 빌드 for the product workflow in Capgo Native Builds.