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

iOS에서 Universal Links, Android에서 App Links를 사용하면 사용자가 링크를 클릭하여 앱으로 바로 이동할 수 있습니다. 이 기능은 사용자 경험을 개선하고 웹 페이지에서 앱으로의 컨텍스트를 유지하는 데 유용합니다. 이 안내서에서는 Capacitor를 사용하여 Next.js 앱에 이러한 깊은 링크를 설정하는 방법을 설명합니다.

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

https://github.com/nextjs/next/tree/canary/examples/with-capacitor

첫 번째로, 새로운 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

__CAPGO_KEEP_0__.config.json __CAPGO_KEEP_0__.config.json 파일에 있는 capacitor.config.json 에서 ID를 URL에서 가져올 수 있습니다.

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

이벤트를 처리하기 위해 pages/details/[id].js이벤트는 앱이 커스텀 URL 스키마를 통해 열릴 때 트리거됩니다. __CAPGO_KEEP_0__에서 리스너를 추가하세요.

__CAPGO_KEEP_0__ pages/details/[id].js__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 Capacitor 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은 이벤트를 감지하고 Next.js 앱 내에서 적절한 경로로 이동합니다. appUrlOpen iOS 설정

iOS에서는 앱 ID에 Associated Domains 기능이 활성화된 상태여야 합니다. Associated Domains 기능이 활성화된 앱 ID를 생성한 후,

apple-app-site-association 파일을 생성하여 다음 내용을 입력합니다. team ID와 bundle ID를 실제로 입력하세요. 이 파일을 도메인에 있는 YOURTEAMID 디렉토리에 업로드하여 com.your.bundleid In Xcode, 도메인을 앱의 권한에 추가하세요. 다음 형식으로 입력하세요.

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

In Xcode, 도메인을 앱의 권한에 추가하세요. 다음 형식으로 입력하세요. .well-known In Xcode, 도메인을 앱의 권한에 추가하세요. 다음 형식으로 입력하세요. https://www.capgo.app/.well-known/apple-app-site-association.

In Xcode, 도메인을 앱의 권한에 추가하세요. 다음 형식으로 입력하세요. applinks:capgo.app.

Android 설정

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

1. 키 스토어 파일을 생성하세요. 키 스토어 파일이 없다면.
2. SHA256 서명으로부터 SHA256 서명 값을 얻으세요.
3. 자신의 패키지 이름과 SHA256 서명 값을 포함하는 assetlinks.json 파일을 생성하세요.
4. 자신의 도메인에 있는 .well-known 디렉토리에 이 파일을 업로드하세요.

자신의 AndroidManifest.xml,에 다음을 추가하세요. intent-filter 태그 activity URL을 처리하는 요소:

<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 To build and sign your app, use the following commands:

이 명령을 실행하면 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__ Native Project Settings을 구성하려면

Capacitor Configure for Native Project Settings

__CAPGO_KEEP_0__ configure package Capacitor configure package프로젝트의 루트 폴더에

npm install @capacitor/configure

파일을 생성하세요: capacitor.config.yaml 이 config로 configure tool을 실행하세요:

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

이 tool을 사용하여 프로젝트 설정을 자동화하세요.

npx cap-config run capacitor.config.yaml

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

결론

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