在 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 androidbundle ID 在 __CAPGO_KEEP_0__.config.json capacitor.config.json 对于路由，Next.js 使用基于文件的路由，因此通过创建一个文件在
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
},我们已经设置了我们的通配符路由。 pages/details/[id].js__CAPGO_KEEP_0__
In 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 DetailsPageNow, let’s处理 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 事件并导航到适当的路由在您的Next.js应用程序中。
iOS配置
对于iOS，您需要一个应用程序ID与关联域名启用。创建一个 apple-app-site-association 文件，替换 YOURTEAMID 和 com.your.bundleid With您的实际团队ID和bundle ID：
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}将此文件上传到您的域名上的 .well-known 目录，使其在 https://www.capgo.app/.well-known/apple-app-site-association.
In Xcode中，使用格式 applinks:capgo.app.
Android配置
对于Android App Links，请遵循以下步骤：
- 如果您没有，请生成一个keystore文件。
- 从keystore中获取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>上传后，您可以使用 Google 的数字资产链接工具验证该文件。如果设置正确，您将看到一个绿色的勾选标记。 assetlinks.json 要构建并签署您的应用，请使用以下命令：
这将在您的连接的 Android 设备上安装已签名的应用。
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__ 配置本机项目设置
Capacitor Configure for Native Project Settings
__CAPGO_KEEP_0__ 配置包 Capacitor configure package. 安装它到你的项目中：
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 文件中指定的设置到你的原生项目中。
结论
在 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 为Capacitor插件的实现细节在Capgo 添加或更新插件 为添加或更新插件的实现细节 Ionic企业插件替代品 为产品工作流程在Ionic企业插件替代品中 Capgo原生构建 为产品工作流程在Capgo原生构建中
