在 iOS 上的 Universal links 和 Android 上的 App Links 允许用户通过点击链接直接进入您的应用程序，而无需浏览器。这对于改善用户体验并在网页和应用程序之间保持上下文非常有用。在本指南中，我们将逐步介绍如何使用 Capacitor 为 Next.js 应用程序设置这些深度链接。对于 attribution 和延迟深度链接， @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中，我们可以从 URL 中检索 ID 使用 Next.js 的内置路由：
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 监听 appUrlOpen event 和导航到您的 Next.js 应用程序中的适当路由中。
iOS 配置
对于 iOS，您需要一个具有 Associated Domains 启用的应用 ID。创建一个 apple-app-site-association 文件，内容如下，替换 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.
可访问。 applinks:capgo.app.
在 Xcode 中，使用格式
Android 配置应用链接步骤：
- 如果您没有一个，请生成一个密钥库文件。
- 从密钥库中获取SHA256指纹。
- 创建一个 assetlinks.json 文件，包含您的包名和SHA256指纹。
- 将此文件上传到您的域名上的
.well-known目录中。
在您的 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>上传文件后 assetlinks.json 使用 Google 的数字资产链接工具来验证文件。如果设置正确，你应该会看到一个绿色的勾选标记。
要构建和签署你的应用，请使用以下命令：
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 配置本地项目设置
为了自动化本地项目设置，考虑使用 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使用此配置运行配置工具：
npx cap-config run capacitor.config.yaml这将应用 YAML 文件中指定的设置到你的本地项目中。
结论
在设置深度链接时，Capacitor与Next.js应用程序相关涉及配置您的域名和项目设置，适用于iOS和Android。虽然该过程需要细致的注意，但它比旧方法更流畅，并不需要额外的插件。确保您的域名验证文件正确服务，并使用相应平台工具检查它们。设置完成后，应用程序将从Web链接中无缝打开，为您的用户从Web到应用程序提供smooth的过渡。
继续阅读《如何在Next.js中集成Universal Links》中的Capacitor
如果您正在使用 《如何在Next.js中集成Universal Links》中的Capacitor 与 Capgo Plugin Directory 集成Capgo Plugin Directory Capacitor Plugins by Capgo 查看Capacitor Plugins by Capgo 添加或更新插件 查看添加或更新插件 Ionic Enterprise Plugin Alternatives 为 Ionic Enterprise Plugin Alternatives 的产品工作流程， Capgo 原生构建 为 Capgo 原生构建 的产品工作流程。
