Cómo Integrar Enlaces Universales en Next.js con Capacitor

Los enlaces universales en iOS y los enlaces de la aplicación en Android permiten a los usuarios ser llevados directamente a tu aplicación desde un enlace, evitando el navegador. Esto es especialmente útil para mejorar la experiencia del usuario y mantener el contexto desde una página web a una aplicación. En este guía, caminaremos por el proceso de configurar estos enlaces profundos para una aplicación Next.js utilizando Capacitor. Para la atribución y los enlaces profundos diferidos, @capgo/capacitor-appsflyer pueden redirigir las campañas de instalación a la pantalla correcta en la aplicación.

Configurar enlaces profundos no requiere mucho code, pero sí implica algunas configuraciones. Al final de esta guía, podrás hacer clic en un enlace como https://www.capgo.app/details/22 y tener su aplicación abierta en la página correcta si está instalada.

Configuración de enlaces profundos de Next.js

Primero, crearemos una nueva aplicación de Next.js y una página de detalles para probar:

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

asegúrese de que su identificador de paquete esté configurado correctamente en el archivo capacitor.config.json ya que es crucial para la configuración:

{
  "appId": "com.capgo.deeplinks",
  "appName": "capgoLinks",
  "webDir": "out",
  "bundledWebRuntime": false
}

Para la ruta, Next.js utiliza la ruta basada en archivos, por lo que al crear un archivo en pages/details/[id].jsya hemos configurado nuestra ruta wildcard.

En pages/details/[id].jspodemos recuperar el ID desde la URL utilizando el router de Next.js incorporado:

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

Now, vamos a manejar el appUrlOpen evento con Capacitor. Este evento se desencadena cuando la aplicación se abre mediante un esquema de URL personalizado. Agrega un oyente 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 MyApp

Este code escucha el appUrlOpen evento y navega hacia la ruta adecuada dentro de tu aplicación Next.js.

Configuración de iOS

Para iOS, necesitarás un ID de aplicación con Dominios Asociados habilitados. Crea un archivo apple-app-site-association con el siguiente contenido, reemplazando YOURTEAMID y com.your.bundleid contexto: Página/área: Sitio web de marketing de Capgo. Rol: Etiqueta de interfaz de usuario corta o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `y` (Y).

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "YOURTEAMID.com.your.bundleid",
        "paths": ["*"]
      }
    ]
  }
}

con tu ID de equipo y ID de paquete real: .well-known carpeta en tu dominio, haciéndolo accesible en https://www.capgo.app/.well-known/apple-app-site-association.

En Xcode, agrega el dominio a las autorizaciones de tu aplicación utilizando el formato applinks:capgo.app.

Configuración de Android

Para enlaces de aplicaciones de Android, sigue estos pasos:

Genera un archivo de keystore si no lo tienes.
Obtén la huella SHA256 del archivo de keystore.
Crear un archivo archivo de assetlinks.json con tu nombre de paquete y huella SHA256.
Sube este archivo a la .well-known carpeta en tu dominio.

En tu AndroidManifest.xml, agregar un intent-filter al elemento que maneja enlaces profundos: activity A continuación, sube el archivo y verifica su configuración utilizando la herramienta de enlaces digitales de Google. Si todo está configurado correctamente, verás un signo de verificación verde.

<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>

Para construir y firmar tu aplicación, utiliza los siguientes comandos: assetlinks.json Esto instalará la aplicación firmada en tu dispositivo Android conectado.

__CAPGO_KEEP_0__ Configura para Configuración de Proyecto Nativo

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

Para automatizar la configuración de proyectos nativos, considera utilizar el paquete de configuración:

Capacitor Configure for Native Project Settings

Crear un Capacitor configure packageEste paquete te permite automatizar la configuración de proyectos nativos.

npm install @capacitor/configure

Para instalarlo, ejecuta el siguiente comando: 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_NAME

Ejecuta la herramienta de configuración con esta configuración:

npx cap-config run capacitor.config.yaml

Esta acción aplicará los ajustes especificados en el archivo YAML a tus proyectos nativos.

Conclusión

Setting up deep links with Capacitor for a Next.js app involves configuring your domain and project settings for both iOS and Android. While the process requires attention to detail, it’s streamlined compared to older methods and doesn’t require additional plugins. Ensure your domain verification files are correctly served and check them with the respective platform tools. Once set up, your app will seamlessly open from web links, providing a smooth transition for your users from web to app.

Keep going from How to Integrate Universal Links in Next.js with Capacitor

Si estás utilizando How to Integrate Universal Links in Next.js with Capacitor para planificar el trabajo de plugin nativo, conectalo con Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo para los detalles de implementación en Capacitor Plugins por Capgo Agregar o Actualizar Plugins para los detalles de implementación en Agregar o Actualizar Plugins Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Builds Nativos para el flujo de trabajo del producto en Capgo Builds Nativos.