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 su sitio web y en su lugar le permite estructurar todo el contenido de su negocio y consultar donde quiera. Puede utilizar el estudio de sanity y la aplicación de código abierto React, que puede alojar donde quiera o implementar en nuestra infraestructura y configurar la mejor experiencia de edición para su equipo que tenga sentido para su flujo de trabajo y sus necesidades.

Trabajamos con muchas empresas grandes que desean aprovechar lo mejor de un conjunto de herramientas web moderno. Ahora, el problema que resolveremos 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 sus visitantes a medida que llegaban a cada página. Pero ahora, que construimos estáticamente muchas páginas de antemano y las servimos en CDNs distribuidas globalmente, esos archivos estáticos son exactamente iguales, entonces, ¿cómo envía un fragmento personalizado de datos 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 falso minorista de dulces en línea. Ahora, tu estudio puede 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.

Estos son los banners que vamos a mostrar a los visitantes a medida que llegan a la página, y dependerá del país en el que se encuentren. Estoy en el Reino Unido, así que quiero asegurarme de que vean este contenido aquí. En primer lugar, tenemos un menú desplegable aquí, que se rellena con una lista de países que provienen de un paquete npm, y este es el beneficio de contenido estructurado en archivos JavaScript, es que te permite crear un esquema casi infinitamente configurable.

Luego tenemos un campo de texto aquí para el título, un campo de texto para el contenido y un campo de imagen donde hemos incluido una encantadora imagen del Reino Unido de una fuente de activos de Unsplash. Así que ese es el banner que queremos mostrar a los visitantes, y veamos cómo se verá eso. 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í se me muestra ese banner porque aquí es donde estoy. Entonces, ¿cómo funciona esto? Vamos a ver un poco de código.

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

Ahora, aquí el componente de banner va a configurar un estado y también va a realizar un seguimiento utilizando este hook de estado pegajoso, que lo único que hace es asegurarse de registrar alguna información en el almacenamiento local. Y vamos a almacenar la fecha en que vi este banner. Y sería posible extender este componente para decir, si no he visto este banner durante, digamos, 24 horas, podría mostrarse nuevamente. Entonces, lo que vamos a hacer aquí cuando se monta el componente es primero obtener esta URL del banner. Y si el estado no es correcto, vamos a establecer que se ha visto el banner o si está vacío por alguna 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 se ha visto el banner. Y si no tenemos ningún data porque ya hemos visto esto antes o el fetch falló y no se devolvió ningún data, entonces este componente no hace nada. Sin embargo, si obtenemos data del banner, entonces tenemos un poco de animación y estilo para cargar ese componente en la vista con una bonita animación y estilo. Así que echemos un vistazo a nuestra ruta de API. Entonces, cuando llega la solicitud a esta ruta de API, primero se va a verificar qué información del país tenemos. Primero, se va a verificar, ¿hemos anulado esto manualmente? Tal vez haya 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 de NPM que te permiten hacer eso. Y muchos otros proveedores enviarán esa información junto con las solicitudes, como la ubicación del 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 data de Sanity. Nos permite realizar consultas realmente poderosas 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 del campo de país que la variable de país que estamos pasando a la consulta. Y puedes ver que también hay una función aquí para asegurarnos de transformar 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 estuviera escrito de manera diferente.

El segundo parámetro aquí en nuestro fetch es esa información del país que se pasa como una variable. Si no hay un banner para el país desde el que estamos visitando, no devolveremos nada, de lo contrario, devolvemos estos data. Y si echamos un vistazo a cómo se ve esa respuesta, este es el data que se envía de vuelta al componente. Podemos modificar esto para enviar menos data o data más relevante. Puedes ver aquí todo lo que se envió. La imagen se carga en realidad mediante una biblioteca de construcción de imágenes para no tener que recuperar toda la información de la imagen allí, sino solo la referencia y luego construir esa imagen a partir de ahí. Y así es como obtenemos estos banners en la página de inicio o en cualquier página donde queramos mostrarlos en realidad.

Entonces, eso es solo la punta del iceberg de la personalización simplemente utilizando la métrica de la localización. Pero es una demostración de que si tienes información sobre un visitante en el sitio web, como 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 comprender esas señales, entonces puedes escribir consultas dinámicamente que tomen las señales del comportamiento de tus usuarios y consulten contenido relevante para ellos. Si quieres saber más, puedes visitar sanity.io. Es posible que también puedas registrarte para un plan de inicio gratuito allí para comenzar y ver qué puedes hacer con Sanity.