Cómo Localizar y Personalizar Contenido con Sanity.io y Next.js

Hola, soy Simeon, un ingeniero de soluciones aquí en sanity.io. Sanity es una plataforma de contenido para contenido estructurado y reemplaza la necesidad de un CMS tradicional para tu sitio web y en su lugar te permite estructurar todo el contenido de tu negocio y consultarlo donde quieras. Puedes usar el estudio de Sanity y la aplicación de React de código abierto, que puedes alojar donde quieras o desplegar en nuestra infraestructura y realmente configurar la mejor experiencia de edición para tu equipo que tenga sentido para tu flujo de trabajo y tus necesidades.

Trabajamos con muchas grandes empresas que quieren aprovechar lo mejor de una pila web moderna. Ahora, el problema que vamos a resolver hoy es que antes de que Jamstack se apoderara del mundo entero, solíamos servir sitios web desde servidores y esos servidores contenían mucha información sobre tus visitantes a medida que llegaban a cada página. Pero ahora que construimos estáticamente muchas páginas con anticipación y las servimos en CDNs distribuidas globalmente, esos archivos estáticos son exactamente los mismos, entonces ¿cómo envías un dato personalizado a un usuario basado en alguna información que tenemos? Bueno, hoy tenemos una solución que creemos que es bastante ordenada. Involucra Next.js Vercel para el alojamiento y Sanity, por supuesto, para la consulta y entrega de contenido, pero esta es una idea que podría funcionar en muchas plataformas diferentes y hosts de funciones sin servidor. Así que echemos un vistazo a la solución tal como la hemos construido hoy.

Aquí tenemos el estudio de Sanity de un minorista de dulces en línea ficticio. Ahora, tu estudio podría verse algo diferente al nuestro, pero este es el que hemos modelado con páginas, artículos, pero lo más importante, echemos un vistazo a los banners.

Ahora, estos son los banners que vamos a mostrar a los visitantes a medida que llegan a la página, y va a depender de en qué país se encuentren. Estoy en el Reino Unido, así que quiero asegurarme de que vean este contenido aquí. Primero, tenemos un menú desplegable aquí, que se llena con una lista de países que viene de un paquete npm, y este es el beneficio del contenido estructurado en archivos de JavaScript, ya que te permite hacer esquemas casi infinitamente configurables.

Luego tenemos un campo de cadena aquí para el título, un campo de texto para el contenido, y un campo de imagen donde hemos traído una encantadora imagen del Reino Unido aquí de una fuente de activos de Unsplash. Así que ese es el banner que queremos servir a los visitantes, y echemos un vistazo a cómo va a lucir. Ya he visitado esta página antes, así que no me envían ese banner, pero si entro en una nueva ventana de incógnito, aquí me sirven ese banner porque es donde estoy. Entonces, ¿cómo funciona esto? Vamos a sumergirnos en algo de código.

Vamos a echar un vistazo muy rápido a esto. Los conceptos aquí son bastante sencillos, y quizás podamos hacer que este código esté disponible también. Pero aquí está el componente de banner que estamos viendo. Así que puedes ver en la parte superior, el get banner URL aquí va a dispararse a la ruta api. Las rutas API son una forma de ejecutar lógica del lado del servidor en un sitio web de Next.js. Pero nuevamente, la mayoría de las tecnologías JAMstack tienen conceptos similares sobre la ejecución de funciones sin servidor para modificar páginas. Y he incorporado un respaldo aquí que durante el desarrollo, simplemente puedo establecer el país en una cadena de consulta, o de lo contrario, si estoy en producción, ir y golpear esa ruta API de get banner directamente.

Ahora, un componente de banner aquí va a configurar algún estado, y también va a rastrear usando este hook de estado pegajoso, que todo lo que hace es asegurarse de que registremos alguna información en el almacenamiento local. Y vamos a almacenar la fecha de cuando vi este banner. Y sería posible extender este componente para decir, si no he visto este banner durante, digamos, 24 horas, podría servirse nuevamente. Así que lo que vamos a hacer aquí cuando el componente se monte es primero obtener esta URL del banner. Y si el estado no es correcto, vamos a establecer que el banner ha sido visto o si está vacío por cualquier razón, no queremos hacer eso. Pero si la información del banner se devuelve correctamente, entonces queremos establecer eso en el componente y luego establecer que el banner ha sido visto. Y si no tenemos ningún dato porque hemos visto esto antes o la obtención falló y no devolvió datos, entonces este componente no hace nada. Sin embargo, si obtenemos datos del banner, entonces tenemos algo de frame of motion y algo de tailwind para estilizar ese componente que se carga en la vista allí con una agradable animación y estilo. Así que echemos un vistazo a nuestra ruta API. Así que a medida que la solicitud llega a esta ruta API, va a verificar primero, qué información del país tenemos. Primero, va a verificar, ¿lo anulamos manualmente? Quizás habría casos de uso para establecer manualmente el país aquí. De lo contrario, podemos verificar los encabezados en ciertos planes. En Vercel, obtienes información sobre el país basada en la IP. También hay paquetes NPM que te permiten hacer eso. Y muchos otros proveedores enviarán esa información con las solicitudes, como dónde está el usuario.

Entonces, nuevamente, si no tenemos el país, queremos salir de esa solicitud. Sin embargo, si tenemos información del país, aquí está nuestra consulta Grok para poder obtener el banner correcto. Grok es el lenguaje de consulta creado para consultar datos de Sanity. Nos permite hacer consultas realmente potentes y expresivas. Y en este caso, es bastante sencillo.

Estamos buscando cualquier documento del tipo banner, y vamos a verificar de todos los documentos de banner, cuáles tienen la misma información de campo de país que la variable de país que estamos pasando en la consulta. Y puedes ver que hay una función aquí también para asegurarnos de que transformamos ambos a mayúsculas para ayudar con el proceso de coincidencia en caso de que obtengamos información en minúsculas o si el documento se escribió de una manera diferente.

El segundo parámetro aquí en nuestra obtención es esa información del país que se pasa como una variable. Si no hay un banner para el país del que estamos visitando, no devolveremos nada, de lo contrario, devolvemos estos datos. Y si echamos un vistazo a cómo se ve esa respuesta, estos son los datos que regresan al componente. Podemos modificar esto para enviar menos datos o datos más relevantes. Puedes ver aquí que esto es todo lo que se envió. La imagen se carga realmente por una biblioteca de construcción de imágenes por lo que no tenemos que ir y recuperar toda la información de la imagen allí, sino solo la referencia y luego construir esa imagen desde allí. Y así es como obtenemos estos banners en la página de inicio o en cualquier página donde queramos servirlos realmente.

Así que eso es como raspar la superficie de la personalización solo usando la métrica de localización. Pero es una demostración de si tienes información sobre un visitante en el sitio web, digamos el artículo que están leyendo o los artículos en los que han hecho clic o en qué han pasado más tiempo mirando, y tu contenido está estructurado para entender esas señales, entonces puedes escribir consultas dinámicamente que toman las señales del comportamiento de tus usuarios y luego consultan contenido que es relevante para ellos. Si deseas saber más, puedes visitar sanity.io.