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 su aplicación desde un enlace, evitando el navegador. Esto es particularmente útil para mejorar la experiencia del usuario y mantener el contexto desde una página web a una aplicación. En esta guía, exploraremos el proceso de configuración de estos enlaces profundos para una aplicación Next.js utilizando Capacitor. Para la atribución y los enlaces profundos diferidos, @capgo/capacitor-appsflyer puede redirigir las campañas de instalación a la pantalla correcta dentro de la aplicación.

Setting up deep links doesn’t require a lot of code, but it does involve some configuration. By the end of this guide, you’ll be able to click a link like https://www.capgo.app/details/22 Primero, crearemos una nueva aplicación Next.js y una página de detalles para probar:

Verifique que su

identificador de paquete

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

esté configurado correctamente en el Asegúrese de que su identificador de paquete capacitor.config.json archivo, 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 archivo, por lo que creando 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:

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

Ahora, vamos a manejar el appUrlOpen evento con Capacitor. Este evento se desencadena cuando la aplicación se abre mediante un esquema de URL personalizado. Agregue un escuchador 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 a la ruta adecuada dentro de tu aplicación de 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 context: 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 Sube este archivo a la https://www.capgo.app/.well-known/apple-app-site-association.

carpeta en tu dominio, haciéndolo accesible en applinks:capgo.app.

In Xcode, agrega el dominio a las autorizaciones de tu aplicación utilizando el formato

Configuración de Android

Para enlaces de aplicaciones de Android, sigue estos pasos:
Genera un archivo de clave de seguridad si no lo tienes.
Crear un archivo assetlinks.json con el nombre de tu paquete y la huella SHA256.
Subir este archivo a la .well-known carpeta en tu dominio.

En tu AndroidManifest.xmlagrega un intent-filter a la activity elemento que maneja enlaces profundos:

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

Después de subir el assetlinks.json archivo, puedes verificarlo utilizando la herramienta de enlaces digitales de Google. Si todo está configurado correctamente, verás un signo de verificación verde.

Para construir y firmar tu aplicación, utiliza los siguientes 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.apk

Esto instalará la aplicación firmada en tu dispositivo Android conectado.

Capacitor Configura para Configuración de Proyecto Nativo

Para automatizar la configuración de proyectos nativos, considera utilizar el Capacitor paquete de configuraciónInstálalo en tu proyecto:

npm install @capacitor/configure

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

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

npx cap-config run capacitor.config.yaml

Esto aplicará los ajustes especificados en el archivo YAML a tus proyectos nativos.

Conclusión

Configurar enlaces profundos con Capacitor para una aplicación de Next.js implica configurar tu dominio y ajustes de proyecto tanto para iOS como para Android. Si bien el proceso requiere atención a los detalles, está más simplificado en comparación con los métodos antiguos y no requiere plugins adicionales. Asegúrate de que los archivos de verificación de dominio se sirvan correctamente y los revises con las herramientas de plataforma correspondientes. Una vez configurado, tu aplicación se abrirá de manera fluida desde enlaces web, proporcionando una transición suave para tus usuarios desde la web a la aplicación.

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

If you are using Cómo Integrar Enlaces Universales en Next.js con Capacitor para planificar el trabajo del plugin nativo, conectarlo con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por 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 Compilaciones Nativas para el flujo de trabajo del producto en Capgo Nativas Builds.