Los Universal Links en iOS y los App Links en Android permiten llevar al usuario directamente a tu app desde un enlace, saltándose el navegador. Esto es clave para mejorar la UX y mantener el contexto de la web a la app. En esta guía, veremos cómo configurar estos deep links para una app de Next.js usando Capacitor. Para atribución y deferred deep links, @capgo/capacitor-appsflyer puede dirigir las campañas instaladas a la pantalla correcta dentro de la app.
Configurar deep links no requiere mucho code, pero sí algo de configuración. Al terminar esta guía, podrás hacer clic en un enlace como https://www.capgo.app/details/22 y que tu app se abra en la página correcta si ya está instalada.
Configuración de Deep Links en Next.js
Primero, crearemos una nueva app de Next.js y una página de detalles para las pruebas:
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 androidAsegúrate de que tu bundle ID esté configurado correctamente en el archivo archivo capacitor.config.json , ya que es crucial para la configuración:
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
}Para el enrutamiento, Next.js usa file-based routing, así que al crear un archivo en pages/details/[id].js, ya habremos configurado nuestra ruta wildcard.
En pages/details/[id].js, podemos obtener el ID de la URL usando el router nativo de 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 DetailsPageAhora, gestionemos el appUrlOpen evento con Capacitor. Este evento se dispara cuando se abre la app mediante un custom URL scheme. Añade un listener en el pages/_app.js archivo:
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 MyAppEste code escucha el appUrlOpen evento y navega a la ruta correspondiente en tu app de Next.js.
Configuración de iOS
Para iOS, necesitarás un app ID con Associated Domains habilitado. Crea un apple-app-site-association archivo con el siguiente contenido, reemplazando YOURTEAMID y com.your.bundleid con tu team ID y bundle ID reales:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Sube este archivo a .well-known directorio en tu dominio, haciéndolo accesible en https://www.capgo.app/.well-known/apple-app-site-association.
En Xcode, añade el dominio a los entitlements de tu app usando el formato applinks:capgo.app.
Configuración de Android
Para Android App Links, sigue estos pasos:
- Genera un archivo keystore si no tienes uno.
- Obtén la huella digital SHA256 del keystore.
- Crea un assetlinks.json archivo con tu nombre de paquete y la huella SHA256.
- Sube este archivo al
.well-knowndirectorio de tu dominio.
En tu AndroidManifest.xml, añade un intent-filter al activity elemento que gestione deep links:
<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>After uploading the assetlinks.json archivo, puedes verificarlo con la herramienta Digital Asset Links de Google. Si todo está bien configurado, verás un check verde.
Para hacer el build y firmar tu app, usa estos comandos:
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.apkEsto instalará la app firmada en tu dispositivo Android conectado.
Capacitor Configuración de Native Project Settings
Para automatizar la configuración del proyecto nativo, considera usar el Capacitor paquete de configuración. Instálalo en tu proyecto:
npm install @capacitor/configureCrea un capacitor.config.yaml archivo en la raíz de tu proyecto:
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_NAMEEjecuta la herramienta de configuración con esta config:
npx cap-config run capacitor.config.yamlEsto aplicará los ajustes especificados en el archivo YAML a tus proyectos nativos.
Conclusión
Configurar deep links con Capacitor en una app de Next.js requiere configurar tu dominio y los ajustes del proyecto tanto para iOS como para Android. Aunque el proceso requiere atención al detalle, es más ágil que los métodos antiguos y no necesita plugins adicionales. Asegúrate de que los archivos de verificación de dominio se sirvan correctamente y verifícalos con las herramientas de cada plataforma. Una vez configurado, tu app se abrirá sin problemas desde enlaces web, ofreciendo una transición fluida para tus usuarios de la web a la app.
Continúa con Cómo integrar Universal Links en Next.js con Capacitor
Si estás usando Cómo integrar Universal Links en Next.js con Capacitor para planificar el trabajo con plugins nativos, conéctalo con Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para el detalle de implementación en los Plugins de Capacitor por Capgo, Añadir o actualizar plugins para el detalle de implementación en Agregar o actualizar plugins, Alternativas a plugins de Ionic Enterprise para el flujo de trabajo en Alternativas a plugins de Ionic Enterprise, y Native Builds de Capgo para el flujo de trabajo del producto en Capgo Native Builds.
