在 iOS 中的 Universal links 和 Android 中的 App Links 允许用户通过链接直接进入您的应用，绕过浏览器。这对于改善用户体验并在网页和应用之间保持上下文非常有用。在本指南中，我们将逐步介绍如何使用 Capacitor 为 Next.js 应用设置这些深度链接。
设置深度链接并不需要太多 code，但它确实需要一些配置。通过本指南的结束，您将能够点击类似于 https://www.capgo.app/details/22 的链接，并且如果您的应用已安装，则会打开到正确页面。
Next.js 深度链接设置
首先，我们将创建一个新的 Next.js 应用和一个用于测试的 details 页面：
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 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 文件中添加一个监听器：
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 事件并在你的 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.
在 Xcode 中，使用格式 applinks:capgo.app.
Android 配置
对于 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 到应用的平滑过渡。
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提供 产品工作流程在Capacitor插件由Capgo提供 添加或更新插件 产品工作流程在添加或更新插件中 Ionic企业插件替代品 产品工作流程在Ionic企业插件替代品中 Capgo原生构建 产品工作流程在Capgo原生构建中
