Cómo localizar y personalizar contenido con Sanity.io y Next.js

Rate this content
Bookmark

Estructurar tu contenido con Sanity.io significa que puedes consultar el contenido basado en señales de tus visitantes, como su ubicación. La personalización es un problema complicado con sitios estáticos y el jamstack, esta demostración te mostrará cómo se puede hacer con Sanity.io, Next.js y Vercel.

8 min
25 Oct, 2021

Video Summary and Transcription

Sanity.io proporciona una plataforma de contenido para contenido estructurado que reemplaza a los CMS tradicionales. Su solución permite a las empresas estructurar y consultar contenido en cualquier lugar utilizando el estudio de Sanity y la aplicación de React de código abierto. La charla se centra en resolver el desafío de enviar datos personalizados a los usuarios en un entorno de sitio web estático utilizando Next.js Vercel para el alojamiento y Sanity para la consulta y entrega de contenido. El estudio de Sanity permite modelar páginas, artículos y banners, mostrando banners a los visitantes según su país. La solución implica el uso de consultas Grok para obtener el banner correcto según la información del país, demostrando la personalización basada en la localización y la consulta de contenido dinámico.

Available in English

1. Introducción a Sanity y el Problema

Short description:

Hola, soy Simeon, un ingeniero de soluciones en sanity.io. Proporcionamos una plataforma de contenido para contenido estructurado que reemplaza a los CMS tradicionales. Nuestra solución le permite estructurar y consultar el contenido de su negocio en cualquier lugar, utilizando el estudio de sanity y la aplicación de código abierto React. Trabajamos con grandes empresas para aprovechar lo mejor del conjunto de herramientas web moderno. Hoy, resolveremos el desafío de enviar datos personalizados a los usuarios en un entorno de sitio web estático. Nuestra solución involucra Next.js Vercel para el alojamiento y Sanity para la consulta y entrega de contenido. Vamos a explorar la solución que hemos construido.

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.

2. Sanity Studio y Componente de Banner

Short description:

El estudio de Sanity te permite modelar páginas, artículos y banners. Los banners se muestran a los visitantes según su país. El componente de banner obtiene la URL del banner utilizando una ruta de API. Configura el estado y realiza un seguimiento de la fecha en que se ve el banner. La ruta de API verifica la información del país, permitiendo la anulación manual o la verificación de encabezados e información de IP.

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.

3. Consulta Grok para la Recuperación de Banners

Short description:

Si tenemos información del país, utilizamos una consulta Grok para obtener el banner correcto. Grok permite consultas poderosas y expresivas. Verificamos los documentos de banner con el mismo campo de país que la variable pasada. Los datos de respuesta se modifican para enviar datos relevantes, incluyendo una referencia a la imagen. Esto demuestra la personalización basada en la localización y la capacidad de consultar dinámicamente el contenido basado en el comportamiento 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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
Vue.js London 2023Vue.js London 2023
28 min
A Saga of Web Rendering Woes
This talk will look at the evolution of web rendering modes and what the Jamstack movement is all about. We will build a demo project to show how a static site generator and a Headless CMS can be combined to create dynamic and engaging stories while maintaining a static site's performance and scalability benefits.You will learn about the advantages and limitations of each rendering mode and gain a deeper understanding of how to use Jamstack to build powerful and dynamic storytelling experiences.

Workshops on related topic

React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.