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 de 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 de Next.js utilizando Capacitor.

No se requiere mucho code para configurar los enlaces profundos, 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 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úrate de que tu ID de paquete esté configurado correctamente en el 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 archivos, por lo que al crear un archivo en pages/details/[id].jsya hemos configurado nuestra ruta wildcard.

Inicialmente, podemos recuperar el ID desde la URL utilizando el router integrado de Next.js: pages/details/[id].jsA continuación, manejem el evento con __CAPGO_KEEP_0__. Este evento se desencadena cuando la aplicación se abre mediante un esquema de URL personalizado. Agregue un escuchador en el archivo:

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

Este __CAPGO_KEEP_0__ escucha el evento y navega hacia la ruta adecuada dentro de su aplicación Next.js. appUrlOpen event with Capacitor. This event is triggered when the app is opened via a custom URL scheme. Add a listener in the pages/_app.js Para iOS, necesitará un ID de aplicación con Dominios Asociados habilitados. Crea un 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

This code listens for the appUrlOpen con el siguiente contenido, reemplazando

y

Configuración de iOS Para iOS, necesitará un ID de aplicación con Dominios Asociados habilitados. Crea un archivo apple-app-site-association YOURTEAMID con el siguiente contenido, reemplazando y com.your.bundleid con su ID de equipo y ID de paquete reales:

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

Subir este archivo a la .well-known carpeta en su dominio, haciéndolo accesible en https://www.capgo.app/.well-known/apple-app-site-association.

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

Configuración de Android

Para los enlaces de aplicación de Android, siga estos pasos:

1. Genere un archivo de clave de seguridad si no tiene uno.
2. Obtenga la huella SHA256 del archivo de clave de seguridad.
3. Cree un archivo de enlaces de activos con su nombre de paquete y huella SHA256. Subir este archivo a la
4. Generate a keystore file if you don’t have one. .well-known directorio en tu dominio.

En tu AndroidManifest.xml, agrega 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 de activos digitales de Google. Si todo está configurado correctamente, verás un signo de verificación verde.

Para compilar 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 proyecto nativo, considera utilizar el Capacitor paquete de configuración. Instálalo en tu proyecto:

npm install @capacitor/configure

Crear 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 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, se ha simplificado en comparación con métodos anteriores y no requiere plugins adicionales. Asegúrate de que los archivos de verificación de dominio se estén sirviendo correctamente y revisalos con las herramientas de plataforma correspondientes. Una vez configurado, tu aplicación 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

Si estás utilizando Cómo Integrar Enlaces Universales en Next.js con Capacitor para planificar el trabajo de plugin nativo, conectalo con Capgo Directorio de Plugin para el flujo de trabajo del producto en el directorio de plugins Capgo Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, Agregar o actualizar plugins para el detalle 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 Compilaciones nativas.