在iOS上使用universal links和在Android上使用App Links允许用户从链接直接进入您的应用程序，而不需要浏览器。这对于改善用户体验并在网页和应用程序之间保持上下文非常有用。在本指南中，我们将逐步介绍如何使用Capacitor为Next.js应用程序设置这些深度链接。对于归因和延迟深度链接 @capgo/capacitor-appsflyer 可以将安装营销活动路由到正确的应用程序屏幕。
设置深度链接并不需要很多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 在 capacitor.config.json 文件中正确设置，因为它对于设置至关重要：
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
}对于路由，Next.js 使用基于文件的路由，因此通过在 pages/details/[id].js中创建一个文件，我们已经设置了通配符路由。
在 pages/details/[id].js中，我们可以使用 Next.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 事件与 Capacitor。这个事件在应用程序通过自定义 URL 方案打开时触发。添加一个监听器在 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，您需要一个具有 Associated Domains 启用的应用 ID。创建一个
apple-app-site-association 文件，以下内容，替换 和 YOURTEAMID 您的实际团队 ID 和包 ID： com.your.bundleid 将此文件上传到
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}iOS 配置 .well-known 在您的域名下创建一个目录，使其可在 https://www.capgo.app/.well-known/apple-app-site-association.
在 Xcode 中，使用格式 applinks:capgo.app.
Android 配置
为 Android App Links，遵循以下步骤：
- 如果您没有一个，请生成一个密钥库文件。
- 从密钥库中获取 SHA256 指纹。
- 创建一个 assetlinks.json 文件，包含您的包名和 SHA256 指纹。
- 将此文件上传到您的
.well-known目录。
在您的 AndroidManifest.xml, 添加一个 intent-filter 到处理深度链接的元素： activity 上传文件后，您可以使用 Google 的数字资产链接工具验证它。如果设置正确，您将看到一个绿色的勾选标记。
<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 这将在您的连接的 Android 设备上安装已签名的应用。
__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 配置包
。在您的项目中安装它： Capacitor configure packagea
npm install @capacitor/configureto 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 文件中指定的设置到你的原生项目中。
结论
在 Next.js 应用中使用 Capacitor 设置深度链接涉及配置你的域名和项目设置，适用于 iOS 和 Android。虽然这个过程需要注意细节，但它比以前的方法要流畅得多，并不需要额外的插件。确保你的域名验证文件正确服务，并使用相应平台工具检查它们。一旦设置完成，你的应用将从 web 链接中无缝打开，提供了从 web 到应用的smooth过渡给你的用户。
Keep going from How to Integrate Universal Links in Next.js with Capacitor
如果你正在使用 How to Integrate Universal Links in Next.js with Capacitor 来规划原生插件工作，连接它与 Capgo 插件目录 为 Capgo 插件目录中的产品工作流程 Capacitor 由 Capgo 提供 for the implementation detail in Capacitor Plugins by Capgo, 添加或更新插件 对于在添加或更新插件中实现的细节 Ionic 企业插件替代品 对于 Ionic 企业插件替代品中的产品工作流程 Capgo 本机构建 对于 Capgo 本机构建中的产品工作流程
