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

How to Integrate Universal Links in Next.js with Capacitor

Next.js 앱에 Universal Links를 설정하는 방법에 대해 단계별로 배울 수 있습니다. iOS와 Android 플랫폼에서 Capacitor를 사용하여.

작성 기사

마틴 도나뒤

작가

발레리아

리뷰어

조던

편집자

Universal links on iOS and App Links on Android allow users to be taken directly into your app from a link, bypassing the browser. This is particularly useful for improving user experience and maintaining the context from a web page to an app. In this guide, we’ll walk through the process of setting up these deep links for a Next.js app using Capacitor. For attribution and deferred deep links, @capgo/capacitor-앱플라이어 설치 캠페인을 올바른 인앱 화면으로 라우팅할 수 있습니다.

설정하는 데 필요한 code가 많지 않지만, 설정하는 데는 몇 가지 구성이 필요합니다. 이 가이드를 완료하면 링크를 클릭하여 앱이 올바른 페이지로 열리도록 할 수 있습니다. https://www.capgo.app/details/22 Next.js 심도 있는 링크 설정

첫 번째로, 새로운 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__ 정확하게 설정되어 있는 capacitor.config.json 파일에서 설정하는 것이 중요합니다.

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

Next.js는 파일 기반 라우팅을 사용하므로, pages/details/[id].js파일을 생성하여 와일드카드 루트를 설정했습니다.

Next.js의 pages/details/[id].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 file:

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은 링크를 감지하여 앱을 열 수 있습니다. appUrlOpen __CAPGO_KEEP_0__는 이벤트를 듣고 Next.js 앱 내의 적절한 루트로 이동합니다.

iOS 설정

iOS 앱에 대한 앱 ID가 필요하며, Associated Domains 기능이 활성화되어 있어야 합니다. 앱 ID를 생성하여 apple-app-site-association 파일에 다음 내용을 포함하고, YOURTEAMID 과 com.your.bundleid your actual team ID and bundle ID:

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

이 파일을 .well-known 디렉토리에 업로드하고, https://www.capgo.app/.well-known/apple-app-site-association.

애플리케이션의 권한에 도메인을 추가하세요. applinks:capgo.app.

Android 설정

안드로이드 앱 링크를 위한 다음 단계를 따르세요.

키스토어 파일을 생성하세요. (만약 없다면)
SHA256 지문 값을 키 스토어에서 얻으세요.
Create an 파일을 생성하세요. 이 파일을
에 업로드하세요. .well-known 웹사이트의

에서 AndroidManifest.xml을 추가하세요. 이 intent-filter to the 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 __CAPGO_KEEP_0__

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

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

이러한 명령어를 실행하면 연결된 안드로이드 기기에 서명된 앱을 설치합니다.

Capacitor Native 프로젝트 설정 구성

자연스러운 링크를 통합하는 데 도움이 되는 __CAPGO_KEEP_0__ configure 패키지를 사용하는 것을 고려하세요. Capacitor configure 패키지를 설치하려면:프로젝트의 루트 디렉토리에 파일을 생성하세요:

npm install @capacitor/configure

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

결론

npx cap-config run capacitor.config.yaml

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

__CAPGO_KEEP_0__

Capacitor

Keep going from How to Integrate Universal Links in Next.js with Capacitor

Capgo를 사용 중이라면 How to Integrate Universal Links in Next.js with Capacitor Capgo와 연동하여 Capgo 플러그인 디렉토리 Capacitor 제품 워크플로우에서 Capgo 플러그인 디렉토리. Capacitor 플러그인들에 의해 Capgo Capacitor Next.js에 Universal Links를 통합하는 구현 세부 사항은 Capacitor 플러그인에 의해 Capgo으로 수행됩니다. Capgo 플러그인 Capgo 플러그인 Capgo 플러그인 Capgo 플러그인 Capgo 원시 빌드 Capgo Native Builds