Cómo integrar enlaces universales en Next.js con Capacitor

Los enlaces universales en iOS y los enlaces de aplicación en Android permiten a los usuarios ser llevados directamente a tu 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 este guía, caminaremos por el proceso de configurar estos enlaces profundos para una aplicación Next.js utilizando Capacitor.

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 tu 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 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úrate de que tu ID 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].js, ya hemos configurado nuestra ruta wildcard.

En pages/details/[id].js, podemos recuperar el ID desde la URL utilizando el router integrado 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, manejemos 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 archivo: pages/_app.js Ahora, manejemos el

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 evento y navega hacia la ruta adecuada dentro de tu aplicación Next.js. appUrlOpen 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 y con tu ID de equipo y ID de paquete real: YOURTEAMID Sube este archivo a la com.your.bundleid carpeta en tu dominio, haciéndolo accesible en

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

En Xcode, agrega el dominio a las autorizaciones de tu aplicación utilizando el formato .well-known Configuración de Android https://www.capgo.app/.well-known/apple-app-site-association.

Configuración de Android applinks:capgo.app.

Configuración de Android

Para enlaces de aplicación de Android, sigue estos pasos:

1. Genera un archivo de keystore si no tienes uno.
2. Obtén la huella SHA256 del keystore.
3. Crea un archivo __CAPGO_KEEP_0__ con tu nombre de paquete y huella SHA256.
4. Sube este archivo a la .well-known __CAPGO_KEEP_1__

en tu dominio. AndroidManifest.xmlEn tu intent-filter , agrega un activity al 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 archivo, puede verificarlo utilizando la herramienta de enlaces de activos digitales de Google. Si todo está configurado correctamente, verá un signo de verificación verde. assetlinks.json Para verificar la configuración, use la herramienta de enlaces de activos digitales de Google.

Para construir y firmar su aplicación, utilice 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 su dispositivo Android conectado.

Capacitor Configura para Configuración de Proyecto Nativo

Para automatizar la configuración de proyectos nativos, considere utilizar el paquete de configuración Capacitor configure packageCree un archivo

npm install @capacitor/configure

en la raíz de su proyecto: capacitor.config.yaml Ejecute la herramienta de configuración con esta configuración:

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

Esto aplicará las configuraciones especificadas en el archivo YAML a sus proyectos nativos.

npx cap-config run capacitor.config.yaml

Para automatizar la configuración de proyectos nativos, considere utilizar el paquete de configuración de Capgo.

Conclusión

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