Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io

Así que bienvenidos a todos. Esto es Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity. Um, así que empecemos. Solo una pequeña introducción. Mi nombre es Natalia Iaffe. Soy una desarrolladora de software en RangleIO. Me especializo principalmente en el front-end. Y, uh, la mayor parte de mi trabajo ha sido colaborando con organizaciones para actualizar nuestras pilas técnicas a react y muchos proyectos trabajando, um, con arquitectura sin cabeza y, um, capacidad de edición de contenido con CMS como Sanity, Contentful, etc. Um, sí. Nancy. Sí. Hola a todos. Mi nombre es Nancy. Um, también trabajo en Rangle junto con Natalia. Soy directora asociada de estrategia digital. Um, pero en realidad soy solo una desarrolladora de profesión. He estado trabajando mucho en proyectos de CMS sin cabeza en el último año, año y medio. Um, mucho trabajo con Sanity y Contentful. Así que estoy muy emocionada de estar aquí hoy para compartir muchos de nuestros aprendizajes, um, con todos ustedes sobre cómo implementamos proyectos de CMS sin cabeza.

Sí. Entonces, espero que todos estén viendo mi pantalla. Um, avísenme si hay algún problema con el zoom, pero seguiré adelante y hablaré sobre, uh, una pequeña descripción general de lo que vamos a hacer hoy. Um, porque hay bastante. Um, primero hablaremos sobre qué estamos construyendo. Um, tienen el enlace que hemos enviado en el chat para echar un vistazo ahora mismo. Um, vamos a hablar de las plataformas que estamos utilizando: sanity, next, sell, um, así como storybook, um, y hablar un poco sobre arquitectura sin cabeza y por qué usarla. Um, vamos a configurar el repositorio. Así que habrá una pequeña pausa, uh, un descanso para ir al baño, lo que sea, si ya han configurado su repositorio, um, y les daremos los scripts para que puedan comenzar. Um, luego nos sumergiremos en sanity. Nos adentraremos en las partes que, um, uh, necesitan entender para trabajar con sanity. Um, y luego tendremos una pequeña pausa para configurar porque necesitarán una cuenta de sanity y todas esas cosas. Um, así que tendremos un poco de tiempo para configurar eso y luego haremos algunas actividades en grupos pequeños basadas en lo que hemos hablado, y Nancy y yo iremos entrando y saliendo de los grupos pequeños. Um, así que eso debería ser divertido. Um, luego hablaremos de next JS, que creo que algunos de ustedes ya tienen algo de experiencia, otros no. Hablaremos un poco de eso, el constructor de sitios, cómo impulsa nuestra aplicación. Y también haremos una pequeña actividad en grupos pequeños para, um, renderizar algunos de los componentes que tenemos en este repositorio en la página con Next. Y luego, finalmente, vamos a implementar en producción en Vercel. Um, también haremos actividades en grupos pequeños allí. Um, y luego espero que tengan una aplicación completa y funcional, um, un sitio web que puedan personalizar, um, a su gusto más tarde. Eso es lo que vamos a hacer. Y, um, tenemos algunos tiempos guiados aquí. Um, pero si las personas van más rápido o más lento, um, trabajaremos. Veremos cómo va. Um, así que hablemos de lo que estamos construyendo. Entonces, um, para confirmar a todos, Nancy, ¿mi pantalla se deslizó correctamente? Ok, genial. Entonces, um, todos deberían tener este enlace, pero, uh, este es el sitio web real que estamos construyendo. Esta es una organización ficticia llamada Pangea, um, para todas sus necesidades de jardinería. Um, así que estamos simplemente reflejando

un sitio web de una organización. Este sitio web ofrece varios servicios. Um, así que al final de este masterclass, tendrán todas las herramientas para crear esta aplicación completa. Um, la otra parte de esto es la experiencia real de autoría del CMS de Sanity, que se ve un poco así. Nos adentraremos más en esto más adelante. Um, pero esta es la experiencia de autoría que construiremos. También tengo algunas capturas de pantalla y diapositivas para ustedes, solo como referencia más adelante.

Pero adentrémonos en qué es la arquitectura sin cabeza. Um, si han trabajado con Contentful antes, es posible que sepan un poco sobre esto, pero si no, um, sin cabeza con arquitectura sin cabeza, um, bueno, es posible que hayan oído hablar de varios CMS como, uh, um, WordPress o, um, Squarespace, que son lo que llamamos como `con cabeza`, donde en la plataforma misma, construyes y creas componentes, um, así como editas contenido en la misma plataforma. A menudo tienen características que están vinculadas a esa plataforma y que debes usar con la arquitectura sin cabeza, que es más o menos con lo que vamos a trabajar. Esa capa visual de presentación está completamente separada de la capa de contenido, lo que significa que los datos, como los diferentes encabezados que deseas usar para varios componentes, cosas así, están completamente separados. Um, y los datos se sirven, um, a su sitio a través de una API desde el CMS. Entonces, en lugar de tener todo en una plataforma, está separado y simplemente conectado con una API. Así que hay dos partes en eso. Um, tenemos el CMS, um, donde gestionas tus datos, um, todo tu contenido, imágenes, todo eso. Um, algo como Sanity, que estamos usando hoy, o Contentful, como algunos de ustedes pueden tener experiencia con Contentful. Y luego tenemos una segunda parte, que es un constructor de sitios, en nuestro caso, incluye el uso de Next.js, pero puedes usar algo como Gatsby, si tienes experiencia con eso, um, una biblioteca de componentes y plantillas de página. Um, por lo que el constructor de sitios combinará tu contenido de tu CMS, um, con tus componentes de React, uh, en una aplicación Next.js realmente rápida. Um, por lo tanto, hay algunos beneficios de ir sin cabeza, um, en lugar de tener todo en una plataforma. En primer lugar, especialmente para nosotros, los desarrolladores, nos encanta que sea independiente del marco. Por lo tanto, puedes construir la capa de presentación o visual utilizando cualquier herramienta de tu elección. Entonces, si prefieres React, usa React, si prefieres Angular, usa Angular, Vue, etc. Por lo tanto, puedes construir todos tus componentes en el lenguaje que conoces o que conoce tu equipo de desarrollo. Um, es muy personalizable, puedes incorporar tus propios componentes, no estás limitado a lo que una plataforma específica, como WordPress o cualquier otra, te exige y puedes incorporar muchas bibliotecas de terceros para muchas características diferentes. Um, las herramientas de CMS sin cabeza están optimizadas para SEO y rendimiento. Um, y como la aplicación que estamos construyendo hoy, generalmente se aprovecha de la generación de sitios estáticos, lo que hace que la aplicación sea súper rápida. Um, y uno de los mayores beneficios también es que, um, dado que tus datos están completamente separados de la visualización, puedes utilizar el mismo contenido en diferentes tipos de canales y puntos de contacto digitales, como aplicaciones móviles, um, realidad virtual en el futuro, um, y simplemente aplicaciones web y sitios web. Um, porque todo se sirve a través de una API desde tu, um, desde tu CMS. Por lo tanto, esos son algunos beneficios realmente importantes de ir sin cabeza, um, solo rápidamente, a veces soy una persona muy visual. Entonces, visualizar cómo se ve este proceso es útil para mí. Entonces, en nuestro caso, yendo desde la izquierda, pueden ver nuestro círculo del CMS sin cabeza allí, los autores de Sanity, los editores de contenido, los especialistas en marketing ingresarán su contenido en esa plataforma de CMS y la interfaz del editor. Y luego esa API, um, la API del CMS envía esa información, um, como JSON a nuestro constructor de sitios. En nuestro caso, nuevamente, estamos usando Next.js. Entonces, el constructor de sitios recibe esos datos y, um, los combina con tu biblioteca de componentes para construir el front-end y luego empaqueta ese código, uh, y lo envía a tu plataforma de distribución. En nuestro caso, vamos a usar Vercel. Um, y al final, como sabemos, cuando implementamos, um, tu navegador solo ve el hermoso HTML con su JS y tu, um, aplicación realmente genial que construiste. Y luego, acercándonos un poco más, um, al flujo de trabajo del CMS sin cabeza comenzando desde la izquierda. Um, y veremos esto en práctica y también lo haremos en salas de grupos pequeños, pero un autor usará la interfaz del editor, um, para crear contenido, publicar contenido. Y nuevamente, todo ese contenido se envía a través de la API o se recupera de la API como JSON a Next. Por lo tanto, estos pequeños gráficos informativos pueden ser útiles en el futuro para echar un vistazo, ya que visualmente son un poco más útiles, al menos para mí. Um, por lo que podemos pasar directamente a las plataformas y herramientas que hemos mencionado. Um, primero hablaré de Sanity, que, um, algunos de ustedes mencionaron que no han usado antes, es un CMS sin cabeza basado en API. Um, puedes usar las API para manipular, como recuperar y manipular contenido. Um, y en nuestro caso, usaremos, um, React para renderizar todo nuestro contenido en hermosos componentes. Y luego, en Sanity, algo que realmente nos encanta es que tiene una funcionalidad de vista previa nativa para que un especialista en marketing o alguien que ingrese al CMS pueda ver el cambio que está haciendo antes de publicarlo. Um, y es muy fácil trabajar con Sanity con Next.js. Esta es solo una pequeña página de inicio de Sanity. Definitivamente puedes explorar si quieres. Um, Next.js, um, es lo que estamos usando para nuestro constructor de sitios. Um, es excelente para la generación de sitios estáticos, um, servidor

El renderizado del lado del servidor y el enrutamiento dinámico. Hablaremos un poco más sobre eso también. Um, y, uh, lo genial de Next.js y, uh, la generación de sitios estáticos es que, um, crea una aplicación realmente rápida porque todo se compila y se empaqueta en el momento de la construcción. Entonces, um, justo cuando implementas tu aplicación, lo que alguien ve ya ha sido construido de antemano. Así que es súper eficiente. Por eso nos encanta usarlo. Y luego profundizaremos un poco más en Vercel, pero funciona realmente, realmente bien con Next.js porque creo que en realidad son de la misma empresa matriz. Um, y, uh, tiene excelentes herramientas de monitoreo para el rendimiento, um, um, etc. Entonces, profundizaremos un poco más en eso más adelante. Um, y luego, por último, una de las herramientas, que espero que algunos de ustedes estén familiarizados. Pero si no, Storybook es un entorno de desarrollo realmente genial, um, Es interactivo, lo que puede mostrar un componente, como tus componentes de React que has construido en un entorno completamente aislado. Así que déjame mostrarte cómo se ve eso. Um, ya estoy sirviendo localhost, nuestro Storybook aquí. Entonces, um, puedes ver aquí que tenemos a la izquierda varios componentes que ya hemos construido para esta aplicación. Tenemos Main Hero, por ejemplo. Tenemos el Módulo de Medios con Imagen y Texto. Entonces, este es un lugar donde diferentes personas pueden ir y ver y jugar con componentes y todas las opciones configurables sin tener que estar en la aplicación. Entonces, puedes prototipar cosas muy rápidamente. Etcétera. Así que eso es Storybook. Empecemos. A menos que alguien tenga alguna pregunta inmediata. Lo que vamos a hacer ahora es configurar el repositorio. Hemos dejado los enlaces al repositorio en Discord y en el chat de Zoom. Por favor, avísanos si no puedes acceder a eso o no ves dónde está. Tal vez alguien pueda dejar caer ese repositorio de inicio una vez más en los chats. Y lo que haremos... también puedes acceder a él con este enlace de la presentación. Haremos un fork del repositorio y clonaremos esa versión bifurcada. Ejecuta NPM install. Y una vez que hayas hecho eso, puedes ejecutar tus scripts de desarrollo para tener Storybook, la aplicación y Sanity en funcionamiento. Sanity en realidad no funcionará completamente todavía porque aún no lo hemos configurado. Pero estos son los únicos scripts que necesitarás para que todo funcione. Veamos aquí. Así que dejamos el repositorio de inicio en el chat. Y luego, ¿por qué no todos en Discord levantan el pulgar cuando tengan su repositorio y sus scripts en funcionamiento? Déjame ver. Déjame agregar un poco... OK, acabo de dejar... Lo siento, adelante. Oh, solo quiero recordarles a todos que se aseguren de hacer un fork del repositorio y no solo clonarlo. Esto se debe principalmente a que eventualmente queremos poder implementar tu versión en Ursel. Entonces, hacer un fork de tu propia copia en tu propio GitHub y luego clonar eso localmente será realmente importante. OK, Nancy nos guiará después de esta pausa a través de Sanity. Así que voy a cambiar mi pantalla compartida contigo, Nancy, ahora. Sí, es totalmente normal ver un error 404 en este momento para tu aplicación porque aún no está configurada. Entonces, siempre y cuando tu Storybook esté funcionando, eso es lo único que debería estar funcionando en este momento. Aún no hemos configurado la aplicación ni nuestro portal de Sanity. Eso será nuestro próximo paso justo después de tener el repositorio listo localmente. Si no estás adelantado, será muy bueno echar un vistazo a los diferentes componentes que tenemos en Storybook. Vamos a trabajar específicamente con el módulo de medios hoy. Tenemos algunos, tenemos todos los

Hoy se completaron los componentes, por lo que no necesitarán crear nuevos componentes. Pero será bueno familiarizarse con algunos de los componentes con los que trabajaremos. Pasaré a la siguiente sección, que será la configuración de Sanity. Muy bien, parece que todos están listos. En esta sección en particular, en realidad estaremos creando la interfaz de Sanity. Antes de entrar en cómo hacer todo eso, echemos un vistazo rápido a cómo se verá la interfaz completa de Sanity.

Esta es nuestra plataforma de Sanity. Y para aquellos de ustedes que no están familiarizados con Sanity, en realidad es muy personalizable lo que se puede crear utilizando Sanity. Todo esto, lo que llaman una estructura de escritorio aquí con nuestra carpeta de páginas y carpeta global, todo esto es configurado por el desarrollador. Así que tienes la opción de crear estas estructuras y esta interfaz en función de las necesidades de tu proyecto. En nuestro caso particular, es una aplicación muy simple que estamos construyendo hoy. Así que solo tenemos nuestra carpeta de páginas y carpeta global. La sección global ya está configurada para ustedes. Y pueden ver aquí, tenemos algunos de nuestros elementos globales, como nuestra navegación y nuestro pie de página, que no está configurado por página. Es más bien configurado una vez a nivel global. La segunda carpeta que tenemos es la carpeta de páginas, que va a componer todas las páginas y rutas dentro de nuestra aplicación. Así que si hacemos clic en esta ruta raíz, esta página de inicio, verán que nuestra página está compuesta por un título, el slug donde se puede encontrar esta página, y todos los diferentes componentes y secciones de nuestra página. Como mencionó Natalia antes, SanityHacka viene con una vista previa integrada. Así que si presiono este botón de vista previa, si hago una pantalla dividida, puedo ver lo que estoy editando en el lado izquierdo y en el lado derecho, puedo abrir mi vista previa. Tomará un segundo cargarla, pero una vez que lo haga, pueden ver que la página de inicio se renderiza en el lado derecho aquí. Y mientras estoy editando el contenido en mi página aquí, podrán ver la actualización en vivo. Esto es realmente genial para los autores de contenido, porque les brinda un feedback inmediato sobre lo que están haciendo en la página. Pero cada uno de estos elementos dentro de nuestras secciones de Chef es uno de estos bloques de componentes que ven en la página, pueden agregar componentes adicionales a nuestra página y también reorganizar el orden según cómo deseen que se vea el diseño. Otras cosas que Sanity también proporciona es un sistema de gestión de activos integrado. Así que si van a la sección de medios, verán que aquí es donde tenemos todas nuestras imágenes almacenadas. Así que cuando estoy creando un nuevo componente aquí, puedo hacer referencia a esas imágenes almacenadas en mi medio.

Lo último que vamos a usar hoy, aunque no en este momento, es esta pestaña de visión. Así que si van a esta pestaña de visión, verán que es una especie de área de juego para consultar nuestro contenido de Sanity. Lo usaremos más adelante para jugar con la consulta de data, específicamente utilizando el lenguaje de consulta Grok que proporciona Sanity.

Genial. Volviendo a la configuración de todo esto para nosotros, antes de poder configurar nuestras experiencias, debemos nivelar cómo realmente construimos experiencias de autor en el espacio del CMS sin cabeza. Por lo general, hacemos esto con lo que llaman modelación de contenido, y un modelo de contenido es simplemente una forma de definir y modelar la interfaz que queremos. Todas las interfaces que estamos viendo aquí con todos nuestros campos y entradas están definidas por el desarrollador utilizando Sanity, lo que ellos llaman un esquema. Y veremos cómo se ve exactamente esa sintaxis. Pero el esquema actúa como un plano para decirle a Sanity cómo renderizar un modelo de contenido en particular. Y aunque los modelos de contenido no tienen tipos específicos dentro de Sanity o Contentful o cualquier otro CMS sin cabeza, los modelos de contenido son bastante ubicuos. No están definidos por páginas o modules de página. Puedes usarlos para modelar lo que quieras. En el contexto de construir una aplicación frontend, nos gusta pensar en estos tres tipos de modelos de contenido que ayudarán a estructurar nuestros data de una manera que tenga sentido para consumir en nuestra aplicación frontend. El primer tipo es el modelo de contenido de página, que reflejará nuestra estructura de página. Entonces, esto es lo que realmente estás viendo aquí. Por lo general, tiene dos tipos de contenido. Y profundizaremos en ellos. El segundo tipo es el módulo de página, que tiende a reflejar tus componentes. Y el último tipo, con el que no trabajaremos mucho hoy, es el objeto de data, que tiende a reflejar data miscelánea que no suele ser presentacional. Cosas como tus datos de SEO o tus configuraciones, normalmente quieres devolverlos y utilizarlos en forma de un objeto JSON, esta es una excelente manera de capturar cualquier otro contenido.

Entonces, profundizando un poco más en nuestro modelo de contenido de página, el modelo de contenido de página, como mencioné antes, en realidad refleja la información que necesitamos para crear una página. Entonces, los dos tipos de contenido que normalmente vemos aquí son metadatos, que son cosas como nuestro título o descripción meta o nuestro slug. Entonces, nada muy visual. Y el segundo es capturar nuestro diseño de página, por lo que esta es nuestra área de secciones aquí, que determinará el tipo de componente que queremos renderizar, el contenido que se va a renderizar en la página y también el orden en que se van a renderizar estos componentes.

El segundo tipo, el módulo de página, va a reflejar un componente individual. Entonces, aquí a la derecha, estás viendo el banner de llamada a la acción (CTA), que es uno de los componentes en nuestra biblioteca de componentes y también disponible en el CMS. Este tipo de modelo de contenido refleja todas las piezas de contenido que un autor puede ingresar para configurar un componente. Entonces, ¿cómo creamos realmente estos modelos de contenido? Como mencioné anteriormente, Sanity tiene una sintaxis muy específica cuando se trata de crear un esquema que define un modelo de contenido. Esta es la sintaxis que estás viendo aquí a la derecha. En su mayor parte, es prácticamente un objeto JSON con campos muy específicos que debes completar para decirle a Sanity qué es lo que realmente quieres renderizar. Entonces, aquí tenemos el nombre del esquema en la parte superior. Esto es casi como el equivalente de un ID para el modelo de contenido. Tenemos nuestro título aquí, que es lo que realmente se mostrará en la interfaz de Sanity. Entonces, volviendo a nuestro ejemplo aquí, tenemos nuestro banner de llamada a la acción (CTA). El título es lo que se muestra físicamente en la interfaz de usuario. Por lo general, es más legible para el usuario, para que sea una experiencia más amigable para los autores de contenido. Luego tenemos una lista de los diferentes campos, que es lo que ayuda a renderizar todas las diferentes secciones de campos que vemos en nuestra interfaz de usuario aquí. Una cosa a tener en cuenta aquí es que nos verás usar la función define field y define type. Esto es opcional, pero ayuda a proporcionar algunas comprobaciones de tipo para la forma del objeto que estás pasando. Por ejemplo, si olvidas agregar el tipo o el nombre, te proporcionará errores de tipo para ayudarte a guiarte. Pero si no quieres agregar el código de inicio, también puedes descartar todas las funciones y será una estructura de objeto plana con la que estás familiarizado. Entonces, lo último que quiero que sepan sobre el esquema es el tipo aquí. Puedes ver aquí que tenemos el tipo configurado como un objeto y hay un par de tipos diferentes de esquemas que podemos tener en Sanity. Los dos con los que realmente vamos a trabajar a nivel de esquema son el documento y el esquema de objeto, y eso nos ayudará a definir los tipos de contenido de página y módulo de página de los que acabamos de hablar. Cuando se trata de documentos, puedes pensar en ellos como un tipo de esquema principal. Todos los demás tipos de esquemas que vamos a crear, incluido el objeto, van a vivir dentro del documento muy similar a lo que estábamos viendo antes. Esta página se considerará un tipo de documento y puedes ver que todos estos componentes individuales, que son de tipo objeto, van a vivir dentro de la página misma. Es interesante destacar que los documentos son los únicos que se pueden consultar cuando se trata de obtener tus datos. Cosas como las páginas son cosas que queremos poder obtener todas las páginas, por lo que debe ser un tipo de documento. Entonces, cuando estamos modelando para un sitio web, el documento nuevamente es generalmente lo que crea el modelo de contenido de página que estamos viendo en comparación con el objeto. Esto se usa generalmente para definir tipos de campos personalizados, números, matrices y esto no es consultable. Entonces, aunque esto puede vivir dentro de un documento, puedes consultar específicamente, por ejemplo, todos nuestros banners de llamada a la acción (CTA). Y lo usamos para modelar todos nuestros componentes y los modelos de contenido de módulo de página de los que acabamos de hablar.

Sé que este tema puede ser un poco difícil de entender. ¿Alguna pregunta en este momento de alguien sobre lo que hemos hablado hasta ahora sobre la modelación de contenido?

De acuerdo, voy a seguir adelante, pero habrá oportunidades. Oh sí, por favor.

De acuerdo. Entonces, ¿qué sucede cuando quieres obtener contenido solo de un objeto? ¿Tienes que crear otra página para eso? Exactamente. Entonces, es muy importante pensar en cómo quieres usar tu contenido. Entonces, si sabes que el contenido debe ser consultable, entonces quieres que sea un tipo de documento. Por ejemplo, aquí sabemos con certeza que nuestras páginas, necesitamos poder consultar todas nuestras páginas. En ese caso, esto debe ser un tipo de documento. El banner de llamada a la acción (CTA) simplemente vive dentro de la página. No necesitamos consultar todos los banners de llamada a la acción (CTA) en todas nuestras páginas. Entonces, esto podría ser un tipo de objeto. Usando una lógica similar aquí con nuestra navegación, necesitamos poder consultar la navegación y el pie de página individualmente para renderizar nuestra navegación superior y el pie de página. Entonces, en este caso, todos estos deben ser tipos de documento. O no podremos obtener los datos para ellos. Muy bien. Entonces, profundizando un poco más para ver

Veamos cómo definimos cada uno de los campos. Entonces, los campos están determinados principalmente por el tipo de campo que ingreses. Sanity proporciona varios tipos diferentes que puedes utilizar. Y dependiendo de los tipos, se mostrarán entradas de texto, interruptores o incluso selectores de imágenes. Otras cosas que puedes configurar por campo son la validación del campo o los valores iniciales. Y esto será realmente útil para crear una interfaz de usuario amigable que brinde más orientación a los autores de contenido al ingresar contenido.

Aquí estoy compartiendo la documentación del esquema por si quieren echar un vistazo a todos los tipos de esquema disponibles. Volveré a proporcionar este enlace cuando lleguemos a la parte práctica donde tendrán que sumergirse un poco en la documentación y descubrir cómo crear un campo. Pero desglosemos un poco más el campo para ver qué renderiza cada una de estas propiedades. Aquí tenemos nuestra propiedad que está configurada como booleana, lo que mostrará nuestro interruptor proporcionado por Sanity. Tenemos nuestro título nuevamente aquí. Al igual que en nuestro nivel de esquema, se utiliza para mostrar esta etiqueta amigable para el usuario en la interfaz de Sanity. Mirando un segundo ejemplo, tenemos nuestro tipo de cadena aquí, que en lugar de un booleano, muestra una entrada de texto, y con nuestra validación agregada, verán que si el usuario deja este campo vacío, Sanity proporcionará este pequeño mensaje de error para indicar que este campo es obligatorio. Lo último que deben saber aquí al crear su propio esquema es que la nomenclatura de todos nuestros esquemas y campos es muy, muy importante, y volveremos a esto un poco más en la sección de Next.js para explicar por qué es muy crítico que coincida el nombre de sus campos con los nombres de las propiedades y el nombre de su esquema con el nombre de su componente. Pero por ahora, recuerden que debemos hacer esto al crear esquemas. Recuerden que distingue entre mayúsculas y minúsculas, por lo que si tienen camel case aquí para sus props, deben asegurarse de que ambos tengan la misma capitalización y la misma ortografía. En este punto, voy a pasarle la palabra a Natalia, quien va a presentar un ejemplo real utilizando el banner de llamada a la acción (CTA) en nuestro componente y guiará a través del proceso completo de armar un esquema en Sanity.

¡Genial, gracias, Nancy! Permíteme compartir mi pantalla aquí. 2023, post COVID, todavía tratando de descubrir cómo compartir pantallas de manera elegante. Nunca sucederá para mí, chicos. De acuerdo, espero que estén viendo todo mi escritorio. Sí, genial. Entonces lo que vamos a hacer ahora, después de haber aprendido un poco sobre algunos conceptos abstractos sobre la modelación de contenido y todo eso, es tratar de hacerlo un poco más concreto con el proyecto en el que estamos trabajando actualmente. Echemos un vistazo a la página de inicio de nuestro proyecto, donde tenemos esta imagen del banner CTA con un encabezado y un CTA. Así que sumergámonos en el código base y veamos cómo creamos un esquema para eso. Primero, espero que estén viendo algo de código en este momento. Gracias por confirmar. Vamos a ver nuestro archivo de componentes en nuestra carpeta aquí y vamos a ver el banner CTA. Así que si son desarrolladores de React, estarán muy familiarizados con un componente como este. Un componente de presentación que solo acepta props y las renderiza. Tenemos el banner CTA que acepta estas props, tenemos un encabezado, una imagen y el texto alternativo para la imagen y un CTA. Entonces, lo que Nancy mencionó sobre crear un esquema donde varios nombres coincidan con los de su componente es realmente importante. Así que notaremos que estos son los nombres de nuestras props y CTA banner es el nombre de nuestro componente. Así que voy a desplazarme hacia abajo en esta estructura de archivos hasta la carpeta de Sanity y abrir nuestros esquemas, donde estamos colocando todos nuestros esquemas. Nancy mencionó que hay objetos y documentos, donde un documento sería algo como una página que está aquí, y luego tenemos nuestros objetos que reflejan nuestros módulos de página o componentes, como mencionó Nancy. Voy a abrir el banner CTA aquí. Este es el esquema para el banner CTA y notaremos en primer lugar que el nombre de nuestro banner CTA coincide con el nombre de nuestro componente. Muy importante. Y, una vez que nos adentremos en la sección del constructor del sitio, les mostraremos por qué. Y nuevamente, distingue entre mayúsculas y minúsculas. Y también notaremos que el título es Banner CTA. Entonces, cuando realmente nos adentremos en Sanity, notaremos que cuando agregas un banner CTA, el nombre está aquí. Cuando lo editas, dice `editar banner CTA`. Todo esto se crea a partir del título aquí. Luego, echamos un vistazo a los campos del banner CTA. Notaremos que estos reflejan las props que el banner CTA requiere. Tenemos nuestro encabezado. Tenemos un CTA. Tenemos una imagen. El encabezado es de tipo cadena. La imagen es de tipo imagen. Es un tipo de imagen de Sanity. Ahora, si echamos un vistazo al CTA, el tipo de CTA, esto no es un tipo predeterminado de Sanity. Esto es una referencia a otro esquema que ya hemos creado. Entonces, si tienes otro, como tenemos otro objeto aquí llamado CTA, que tal vez queremos que otros módulos puedan incluir un CTA. Echa un vistazo a ese objeto. Tiene un par de campos booleanos y un par de campos de cadena. Su nombre es CTA, y así es como lo referenciamos aquí. Y luego, si volvemos a mirar ese esquema nuevamente, si abrimos, más adelante tendrán todo esto para revisar. Pero si abrimos el banner CTA, mencionamos que la creación de estos esquemas, estos modelos de contenido, todo eso es para crear los bloques de construcción de nuestra experiencia de autoría en la interfaz de Sanity. Entonces, eso es exactamente lo que hemos hecho. Hemos dicho que el CTA tiene dos campos booleanos. Se ve así.

Tiene dos campos de cadena. Se ve así. Encabezado e imagen. Entonces, hemos construido todo eso con nuestros esquemas. También tenemos aquí abajo, no profundizaremos demasiado en esta parte, pero este es un fragmento bastante personalizable de un esquema llamado vista previa. Y notarán aquí que estamos seleccionando un par de props, encabezado e imagen, y lo estamos preparando. Entonces, lo que refleja directamente es la experiencia de ver que has agregado un banner CTA en esta página, y tienes el encabezado, tienes el nombre del componente y la imagen. Entonces, la vista previa refleja directamente lo que realmente ves en esta lista cuando construyes, cuando agregas un banner CTA a la página.

La última parte después de haber construido tu esquema con tus campos es que quieres desplazarte hasta la parte inferior de esta estructura de archivos y verás un archivo sanity.config.ts. Entonces, esta es nuestra configuración de Sanity, como lo adivinaste por el nombre. En la parte superior, tenemos un montón de importaciones, incluyendo en la línea 25, un banner CTA de nuestra carpeta de objetos de esquemas. Entonces, lo importamos en la configuración de Sanity, y luego incluimos este banner CTA en nuestro objeto de configuración para nuestros esquemas aquí. Es súper importante asegurarse de agregarlo al objeto de esquemas, de lo contrario, Sanity no tendrá idea de que existe tu banner CTA. Has construido el esquema. No puedes usarlo. Entonces, agregarlo aquí en esta sección hace que el esquema esté disponible para su uso. También voy a entrar en la página. Oh, en realidad, aún no lo tenemos aquí. Más adelante, cuando entres en el esquema de la página, podrás agregar la capacidad para que un autor agregue el banner CTA a la página. Pero por ahora, asegúrate siempre de revisar la configuración de Sanity para asegurarte de haberlo agregado allí. Ahora que tienes configurado tu esquema de página y hemos creado algunas páginas. Es hora de echar un vistazo a cómo realmente podemos consultar nuestro contenido. Entonces, Sanity realmente te proporciona un par de herramientas útiles para hacer esto. Una de ellas es tener una idea de cómo se ve realmente la forma de los data. Puedes ir a esta sección de tres puntos y hacer clic en inspeccionar. Esto te mostrará cómo se verá este data de la página. Puedes ver que tenemos nuestro tipo. Tenemos todas nuestras secciones y nuestros componentes aquí con nuestro tipo igual al nombre que hemos dado al esquema y todos nuestros diferentes componentes, las propiedades y entradas que creamos, los campos con el nombre que hemos elegido. Entonces, la imagen de fondo,

el cuerpo y todas las secciones diferentes aquí. Entonces, para poder consultar este contenido, en realidad vamos a utilizar Grok para hacerlo. Entonces, para aquellos de ustedes que nunca han utilizado Sanity antes, Grok es en realidad el lenguaje de consulta open-source de Sanity. Es muy similar a GraphQL, pero diría que es aún más flexible y poderoso cuando se trata de poder consultar datos en la forma que realmente deseas. Entonces, en realidad podemos probar todas nuestras consultas de Grok dentro del estudio de Sanity. Entonces, si vas a la sección de visión que mostré antes, podemos ingresar nuestra consulta aquí y probar qué devuelve realmente nuestra consulta de Grok. Así que aquí compartí el enlace a las hojas de trucos de consulta. Cuando hagas clic allí, verás que hay muchas cosas diferentes que puedes hacer con tus consultas de Grok para poder ordenar, filtrar y realizar muchos cálculos complejos diferentes. Pero lo que vamos a utilizar hoy es bastante simple. Así que solo echando un vistazo a la anatomía de una consulta de Grok, lo que tenemos aquí es la sintaxis que vamos a utilizar para seleccionar todos los documentos. Y dentro de los corchetes cuadrados aquí es cómo vamos a filtrar qué tipo de documentos queremos seleccionar. Entonces, aquí quiero seleccionar todos los documentos que tienen el tipo de página. Es decir, todas las páginas que hemos creado. Y luego, dentro de los corchetes cuadrados o dentro de esas llaves onduladas aquí, muy similar a GraphQL para aquellos de ustedes que están familiarizados, en realidad podemos dictar la forma del contenido o la forma de lo que queremos recuperar exactamente. Entonces, aunque si volvemos a ver todos los datos que existen en nuestra página, verás que en realidad hemos mostrado este inspector antes. Cómo llegar aquí. Sí, es solo sí. Sí. Entonces, en esta sección aquí, podemos ver que hay muchos metadatos diferentes aquí, incluido uno de los campos que tenemos en la parte inferior, que es nuestro slug. Entonces, lo que podemos hacer aquí es, en lugar de devolver el objeto completo, en realidad podemos elegir devolver solo el campo slug dentro de este objeto de página. Y lo que también podemos hacer es cambiar su forma. Entonces, aunque este es un objeto slug que contiene el tipo y la URL, si solo queremos simplificar la estructura de esto para que devuelva solo nuestra URL como, una cadena plana, podemos hacer eso asignando slug.current a nuestro tipo de slug. Alternativamente, si miramos el segundo ejemplo, verás que podemos agregar filtros adicionales aquí. Entonces, no solo estamos seleccionando el tipo de página, también podemos seleccionar una página específica. Aquí estoy seleccionando solo un tipo de página que tiene el slug de nuestra página de inicio. Aquí, si no estamos interesados en seleccionar y manipular la forma de nuestros datos, en nuestro caso, muchas veces, solo queremos devolver todos los datos que el autor del contenido ha ingresado. Vamos a utilizar la notación de puntos suspensivos, que devolverá todos los valores dentro de tu documento. Entonces, devolverá todo lo que estás viendo aquí. Así que vamos a avanzar aquí bastante rápido, pero si quieres ver cómo se ve esto realmente, puedes ingresar a Visión. Aquí, por ejemplo, si solo selecciono esta consulta en particular, puedo ejecutarla e inmediatamente podemos ver la página que he creado que está en la página de inicio y todo el contenido aquí. De manera similar, si hicimos solo nuestro slug, verás aquí que ahora solo estamos devolviendo el campo slug.

Muy bien. Entonces, vamos a pasar a la parte de Next.js para finalmente conectar todo el contenido que acabamos de crear en nuestra plataforma de Sanity a nuestro repositorio de Next.js. Antes de entrar en eso, solo voy a mostrarles rápidamente dónde en la base de código vamos a estar principalmente. Estamos mirando la base de código aquí. Tenemos nuestra carpeta de páginas. Aquí es donde principalmente se encuentran todos nuestros diseños de página y navegación . Next.js utiliza una estructura de enrutamiento basada en archivos, lo que significa que la carpeta, cómo los nombramos y toda la estructura de archivos y carpetas es lo que determina la navegación en tu aplicación de Next.js. Es un poco diferente en React donde no tienes que configurar nada manualmente. Todo se trata de cómo estructuras y nombras tus archivos y carpetas. Inmediatamente ves este nombre de carpeta extraño. Hablaremos de eso un poco más tarde, pero esto es en realidad donde, esta es la plantilla que vamos a usar para crear cada una de nuestras páginas dentro de Next.js. Y es una ruta dinámica, esta es la sintaxis para una ruta dinámica. Entonces, con esta plantilla, vamos a poder generar todas nuestras rutas. Vas a ver algunas otras rutas aquí que realmente no vas a tocar en absoluto, tenemos esta ruta de API, que básicamente nos ayuda a generar nuestra vista previa de Sanity. Tenemos una ruta de estudio . Este es nuestro estudio de Sanity integrado. Entonces, cuando navegas a /studio, puedes acceder a Sanity porque tenemos todo nuestro contenido de Sanity bajo la ruta de estudio. Algunas otras cosas a tener en cuenta es este archivo app TSX. Entonces, este es uno de los archivos de Next.js que usamos para crear cualquier cosa que sea global para cada plantilla. Entonces, aquí, generalmente tenemos cosas como SEO. Tenemos cosas como nuestra navegación y pie de página. Y cualquier cosa que se coloque en app TSX se renderizará automáticamente en cada una de nuestras rutas. Lo bueno de esto es que ahora no tienes que agregar la navegación y el pie de página y todos esos elementos globales a cada una de tus plantillas. Si lo pones aquí, aparecerá en todas partes. La última área en la que realmente vamos a trabajar hoy es la carpeta utils. Entonces, dentro de la carpeta utils, verás una única función de utilidad de construcción de componentes. Esto va a ser nuestro constructor de páginas, y vamos a repasar qué hace todo este código. Pero esto es lo que nos ayudará a convertir todos nuestros datos JSON de Sanity en componentes de React que realmente podemos renderizar en la página. Volviendo a nuestro enrutamiento. Como mencioné, Next.js tiene un enrutador basado en el sistema de archivos. Entonces, cuando agregas nuevos archivos y carpetas al directorio de páginas, automáticamente están disponibles como una ruta en tu aplicación. Sin embargo, cuando se trata de rutas dinámicas, no puedes simplemente codificar el nombre del archivo. Entonces, la sintaxis para realmente lograr rutas dinámicas es con tu corchete cuadrado y el nombre del archivo dentro de él. Este es un segmento de ruta dinámica singular. Entonces, lo que eso significa es que te permitirá crear una ruta como /servicios porque es un segmento de URL singular, pero no te permite crear algo como una ruta anidada como /servicios /diseño de jardín porque ahora hay dos segmentos de archivo. Un ejemplo de cómo se vería es usando slug como nuestra variable. Tenemos nuestro corchete cuadrado, slug.tsx. Entonces, no se parece del todo a lo que tenemos aquí todavía. Y para poder capturar todos los segmentos de slug, necesitamos hacer un poco más. Entonces, para poder capturar todos los segmentos de slug, vamos a tener que extenderlo a un segmento de captura de todo. Y podemos hacer eso agregando los puntos suspensivos aquí. Entonces, de repente, no solo va a funcionar con servicios. También va a funcionar para servicios / diseño de jardín o la cantidad de segmentos de URL que quieras agregar. Una cosa muy importante a tener en cuenta aquí es que en realidad no va a capturar la ruta de la página de inicio porque solo funciona si tienes segmentos de ruta. Entonces, para capturar la ruta de inicio, que es el último tipo de ruta que necesitaremos crear en nuestra aplicación, queremos hacerla un segmento de captura de todo opcional. Y hacemos esto agregando el último corchete cuadrado aquí, que es el nombre de archivo real que estamos viendo con nuestra plantilla de página en nuestra base de código. Entonces, es posible que te preguntes, ¿qué significa eso realmente? Captura de todo versus captura de todo opcional. Con una captura de todo, solo podemos capturar rutas que tienen segmentos. Entonces, aquí tenemos tienda / A / AB y / AB y C, por lo que todos estos van a estar disponibles para ser creados con la ruta de captura de todo. Pero no va a poder crear una ruta que no tenga ninguna subruta. Cuando lo hacemos un captura de todo opcional, de repente permitimos que la ruta de inicio se cree sin ninguna subruta en ella.

Cuando queremos crear una ruta dinámica, necesitamos definir una lista de rutas que serán generadas estáticamente por Next.js. Podemos hacer esto utilizando una función incorporada que ya tiene Next.js llamada Get Static Paths. Esta función espera que devuelvas una lista de parámetros con el segmento de slug. Aquí puedes ver que si quiero crear la ruta 'about us', simplemente es 'about us'. Si quiero crear algo como 'services/diseño de jardín', porque son dos segmentos, en realidad tenemos un array con ambos segmentos de slug. Esta es más o menos la estructura que Next.js espera que devolvamos, pero muchas veces no codificaremos esto manualmente, ya que estas son rutas dinámicas que queremos crear en función del contenido que un autor de contenido ingresó en Sanity. En realidad, obtendremos toda la información de la ruta de la página directamente desde Sanity y la mapearemos a la estructura que esperamos. Para hacer eso, necesitamos consultar datos de Sanity. Para consultar datos en Sanity, no solo necesitamos tener las consultas de PREQ rock, que es lo que trabajamos anteriormente, también necesitamos tener alguna forma de obtener esos datos específicamente en Next. Para hacer eso, estamos utilizando una biblioteca auxiliar llamada next-sanity, que tiene esta función realmente útil llamada createClient. Como SDK, necesitaremos proporcionarle nuestro ID de proyecto o conjunto de datos, que ya está configurado en tu entorno local. Toda esta información la pasaremos a createClient para establecer nuestra conexión con la API de Sanity. Una vez que hayamos hecho eso, podremos crear nuestra función para obtener nuestra consulta de Grok. Aquí puedes ver que estamos llamando al cliente de Sanity y vamos a obtener una consulta que hemos creado para obtener todas las rutas de las páginas. De manera similar, una vez que hayamos creado todas las rutas, necesitaremos obtener todo el contenido de la página para cada ruta. Debido a que todo esto es dinámico, utilizaremos algo llamado getStaticProps, que es otra función incorporada de Next.js para pre-renderizar.

la página con todas las props que necesitaremos para crear esta página. Entonces, a la derecha aquí, verás un ejemplo de un get static props del código base. El contexto aquí te dará la URL en la que te encuentras actualmente. Por lo tanto, params.slug es el componente actual que se está construyendo. A partir de ahí, puedes usar esa información para obtener la página correcta data de Sanity. Entonces, verás aquí que estoy obteniendo algunas cosas diferentes de Sanity. Estoy obteniendo los datos de la página, estoy obteniendo los datos de la navegación, y los datos del pie de página. Entonces, con todos estos diferentes data, obtenidos y listos para ser utilizados, puedo devolverlos desde GetStaticProps y hacer que estén disponibles para ser utilizados dentro de nuestro componente React. Entonces, aquí estoy devolviendo un objeto global con la navegación y el pie de página y también nuestros datos de la página. Algo realmente interesante para tener en cuenta aquí es que cualquier cosa que se devuelva desde GetStaticProps estará disponible para ser accedida en ese archivo de aplicación subrayado. Entonces, cosas como nuestra navegación y pie de página, si estamos obteniendo este contenido en nuestra página, podemos acceder a toda esta información y renderizar la navegación y el pie de página utilizando los datos obtenidos aquí para cada página. De manera similar a lo que hicimos con la ruta, obtendremos todos estos datos de Sanity para mostrarlos. Por lo tanto, ninguno de esto estará codificado en duro.

Entonces, ahora que tenemos todos nuestros datos JSON, recordando cómo se ve eso, esta es más o menos la forma en que Sanity nos los envía, tenemos acceso a todo esto dentro de nuestro componente. Es hora de convertir realmente este JSON en componentes React. Y normalmente hacemos esto utilizando una función llamada construir componente. Así que recordando lo que teníamos en nuestra carpeta de utilidades, aquí es donde sucede la magia, donde el JSON se convertirá en algo que realmente podemos renderizar en el frontend.

Entonces, echemos un vistazo rápido a lo que realmente hace la función de construcción de componentes. Lo primero que hará es crear este mapeador de componentes. Recordando por qué insistimos tanto en nombrar el componente de cierta manera, esto es realmente el esquema de cierta manera porque aquí es donde necesita coincidir. Entonces, el nombre de su esquema, si mira el JSON que se devuelve, verá que el tipo será el nombre de su esquema. Realmente queremos poder hacer coincidir el nombre del esquema con el nombre real del componente en nuestro mapeador de componentes. Así que aquí vamos a importar todos nuestros módulos de CMS, hacerlos disponibles en el mapeador de componentes. Y luego, a medida que avanzamos en la función de construcción de componentes, verá que está haciendo algunas cosas. Tenemos algunas comprobaciones de nulos para asegurarnos de que los datos tengan el tipo de subrayado. Si tiene el tipo de subrayado, queremos seleccionar ese componente de nuestro mapeador de componentes. Así que en este punto deberíamos tener un componente válido aquí. Pero si por alguna razón olvidamos importar uno de nuestros componentes de CMS aquí o si nombramos las cosas incorrectamente, simplemente queremos lanzar un error. Los componentes aquí serán indefinidos. No podrá seleccionar un componente válido. Solo queremos lanzar un error para decir que no se ha registrado ningún componente. Pero si todo va bien, deberíamos poder devolver nuestros componentes seleccionados. Y según lo que estás notando aquí, aparte del tipo que se utiliza para seleccionar el componente, todas las demás propiedades dentro de nuestro JSON se utilizarán como props. Entonces, nuevamente, por qué es realmente importante que coincidamos el nombre de los campos con la propiedad dentro del componente. Aquí es donde entra en juego. Si por alguna razón no coincidiste el nombre, entonces tu componente no podrá recibir el contenido adecuado de Sanity porque los nombres no coincidirán aquí.

De acuerdo, eso fue mucha información. Pero espero que todo esto tenga un poco más de sentido una vez que ingreses al código base y comiences a conectar las cosas por tu cuenta. Entonces, solo para tener una idea de con qué estaremos trabajando hoy, lo primero que haremos será dirigirnos a nuestra plantilla Slug. Aquí es donde estaremos primero. Tomando la ruta, así que ya tenemos algunas consultas aquí configuradas. Ya estamos obteniendo todos los datos de Sanity. Solo vamos a tomar la ruta y asegurarnos de mapearla a la forma que Next.js espera. Si tienes tiempo extra, siéntete libre de intentar escribir tus propias consultas de Grok para poder consultar la ruta de la página y también el contenido de la página. Si no tienes tiempo, está bien. Ya lo tenemos escrito aquí. Lo siguiente que queremos hacer es dirigirnos al componente de construcción y asegurarnos de importar todos los módulos que necesitamos en nuestro mapeador de componentes. Una vez que tengamos todo listo, podremos ir a la línea 37 donde tenemos nuestro componente de página. Actualmente está vacío, por eso no ves nada renderizado en la página. Queremos usar nuestro componente de construcción, mapear todas nuestras secciones y generar todos nuestros componentes React para que todo se muestre en la página. Genial. ¿Alguna pregunta? Estamos listos para empezar.

Sí. ¿Queremos hacer un tiempo completo de 20 minutos? ¿Queremos hacer 10 y luego hacerlo juntos? Sí, tendremos que acotar un poco más el tiempo para poder llegar a la sección de implementación. Así que probablemente haremos 10-15 minutos para que las personas puedan probar algunas cosas por su cuenta. Y luego terminaremos el resto juntos. De acuerdo, genial. Voy a explicar lo que necesitaremos hacer para poder configurar la plantilla de página y renderizar nuestros componentes. Siguiendo algunos de los pendientes que tenemos en la página. Lo primero que debemos hacer es dirigirnos a nuestras Rutas estáticas. Así que aquí ya tenemos las rutas que vienen de Sanity. Lo que necesitamos hacer es mapear esas rutas a la forma que estamos buscando. Solo para recordar a todos,

esta es la forma en que Next.js espera que creemos. Y simplemente queremos seguir adelante y recorrer los datos de Sanity para que estemos creando, lo que estamos devolviendo es una lista de objetos de parámetros con nuestros slugs. El detalle aquí es recordar que los segmentos deben ser elementos de matriz separados aquí. Así que vamos a hacer una división aquí para poder crear los segmentos individuales para las rutas que requieren rutas de varios segmentos. Lo segundo que haremos es ingresar a nuestros componentes de construcción. Entonces, dentro de nuestros componentes de construcción, simplemente vamos a importar todos los componentes que vamos a usar en el CMS, el CTA, los elementos destacados, todo eso de nuestra carpeta de componentes, y luego los vamos a conectar a nuestro mapa de componentes. Una vez que hagamos eso, todos esos componentes estarán listos para sincronizarse con los esquemas que creamos en Sanity. No debería ser necesario hacer ninguna configuración adicional en la función de construcción de componentes. Todo debería funcionar una vez que hayas importado todos los componentes.

Una vez que hayamos terminado con eso, podemos dirigirnos nuevamente a nuestra plantilla de página, y aquí, ya tenemos todo configurado en las propiedades estáticas de invitado. Ya estamos obteniendo nuestro contenido de página, navegación y datos de pie de página, y lo estamos devolviendo en las props aquí. Así que deberíamos poder acceder a ello dentro de nuestra plantilla aquí. Así que tenemos nuestras props de página, y verás que tenemos nuestras páginas aquí. Entonces, lo que necesitamos hacer aquí es saber que todo lo relacionado con la interfaz de usuario que necesitaremos renderizar está en la matriz de secciones. Entonces, lo que queremos hacer es recorrer cada objeto dentro de nuestras secciones y construir nuestro componente utilizando la función de construcción de componentes y pasando los datos de la sección o los datos del componente a ella. Y lo que deberíamos obtener al final es nuestra aplicación completamente completa donde, según lo que hayas ingresado en tu propio CMS, deberías poder ver esos componentes renderizados. Para nosotros, tenemos bastantes componentes aquí renderizados y deberíamos poder ver todo ese contenido mostrado.

Bueno, ¿tienen alguna pregunta? Bueno, esta es una gran cantidad de información, con suerte, espero que también puedas consultar esta grabación cuando estés creando tus propios proyectos para comenzar. Sí, esto es algo en lo que deberías echar un vistazo un poco más de cerca después de la masterclass. Hay muchas piezas móviles diferentes aquí. Definitivamente será interesante ver si puedes crear tus propias consultas de Grok para algunas de estas áreas que necesitan consultar data. Sí, genial. Mientras tanto, pasaremos a nuestra última sección. Así que espero que a esta altura, tengamos todas nuestras páginas renderizadas para cada una de nuestras rutas. Lo que queremos hacer en este punto es poder implementarlo en producción a través de Vercel. Nance, ¿quieres encargarte? Claro, si quieres hacer lo mismo. De acuerdo, déjame descansar un poco. De acuerdo, vamos a repasar cómo es implementar en producción. Y anteriormente, hablamos sobre el uso de la herramienta Vercel para esto, para que podamos obtener todo nuestro Next.js y que aparezca en un navegador. Así que hay varios pasos. Así que te dejaremos hacer eso por tu cuenta después de esto, o podemos hacerlo juntos. Pero los pasos, en primer lugar, obviamente, necesitas obtener una cuenta de Vercel, siempre nos registramos con nuestro GitHub. Es mejor conectarse con GitHub. Y esta es una cuenta gratuita de hobby. Vercel tiene diferentes cuentas de pago, pero esto es solo por diversión. Así que ve con la cuenta de hobby. Y en Vercel, hay una forma de crear un nuevo proyecto. Y en ese nuevo proyecto, importas este repositorio de GitHub en el que estás trabajando. Si no te registraste a través de GitHub, deberás creo que conectar GitHub a Vercel. Por eso recomendamos encarecidamente registrarse solo con GitHub. Y luego deberás configurar algunas variables de entorno para que Vercel tenga todo lo que necesita para comprender el ID del producto y todas las cosas diferentes que lo conectan a sanity y desplegarlo. Así que no lo despliegues todavía. Configurando esas variables de entorno, todos ustedes las tienen en su archivo environment.local en este momento. Solo debes pegarlas todas en la sección de variables de entorno del proyecto de Vercel. Puedes pegarlas una por una y agregarlas todas o simplemente puedes pegar el archivo completo aquí en esta área. Y una vez que se hayan agregado, puedes hacer clic en desplegar. No queremos que el sitio web sea estático y nunca cambie. Así que queremos configurar, teóricamente, si estás construyendo el sitio web de una organización o algo así, ya sabes, alguien está ingresando a Sanity y creando nuevas cosas y actualizando las páginas, quieres configurar un gancho de implementación para que Vercel pueda reconstruir cada vez que un autor publique en Sanity. Así que digamos que cambias el nombre del sitio de Pangea a, ya sabes, el gran sitio web de Marianas, quieres publicarlo en Sanity y quieres que Vercel lo recoja. Entonces crearás un gancho de implementación en Vercel. Tenemos algunas instrucciones aquí sobre dónde encontrar eso

dentro de la configuración. Y simplemente dale cualquier nombre y establece el desencadenante en principal. Y ellos generarán para ti una URL para que la uses. Así que asegúrate de copiar esa URL y luego ve a Sanity y asegúrate de completar esa conexión.

En el lado de Sanity, hay una sección de API con ganchos web. Y quieres pegar esa URL que obtuviste de Vercel en su sección de ganchos web para completar esa conexión. Así que ahora Vercel y Sanity están trabajando juntos. Y solo algunos detalles aquí. Asegúrate de seleccionar los desencadenantes de creación, actualización y eliminación y guarda.

Así que definitivamente usa estas instrucciones aquí para seguir y conectar esto a Vercel. Y no sé. Supongo que podemos darte algo de tiempo para hacer eso. Y una vez que las cosas estén implementadas, si haces actualizaciones en tu sitio y haces actualizaciones con Sanity, podrás ver esos cambios en la URL en vivo que obtienes. Así que, sí. El resultado de esto es que tendrás un enlace implementado para tu proyecto y verás tus actualizaciones.

¿Qué pensamos? Supongo que nos quedaremos aquí si alguien tiene alguna pregunta mientras lo haces. Sería genial ver las cosas personalizadas y geniales que han construido. Después de esto, simplemente personaliza tu sitio web, agrega las imágenes que desees, usa la paleta de colores que quieras, cambia algo del texto que ves y crea algo personalizado para ti. Así que sí, por ahora solo configuraremos todo lo de Vercel y avísanos si tienes alguna pregunta sobre la conexión de Vercel con Sanity, cómo obtener esas variables de entorno, cualquier cosa de eso. Así que nos tomará, no sé, cinco, diez minutos para eso.

Sí, técnicamente nos quedan dos minutos más en la masterclass. Si alguien tiene alguna pregunta general que no necesariamente se refiera solo a las actividades sino a cualquier contenido que presentamos hoy, estaré encantado de responder preguntas si solo quieres más tiempo para trabajar en algunas cosas de implementación, nos quedaremos. Si hay algo en lo que tengas preguntas o si te encuentras con algún problema. Pero esto es más o menos el final de la masterclass, así que espero que todos hayan aprendido algo y puedan tener su propio sitio web implementado al final.

Bien por ti por controlar el tiempo, yo simplemente seguiría y seguiría. En caso de que alguien tenga que irse, estos son los últimos pasos que necesitaremos completar. ¿Alguien tiene preguntas finales, algún pensamiento, algún error con el que te hayas encontrado de inmediato, o en algún lugar anteriormente donde te hayas quedado atascado y no pudiste continuar, incluso si se trata de cosas de Sanity o rutas de Next.js? Estaremos encantados de responder esas preguntas ahora también.

De acuerdo, si no, realmente apreciamos que se unieran y que pasaran por toda esa información. Fue mucho. Una vez que te acostumbras a construir sitios como este, va muy, muy rápido. Y lo bueno ahora con este repositorio es que tienes una plantilla inicial muy buena para partir de aquí. Y hay muchas formas diferentes de configurar Sanity y la experiencia de autoría. Hay muchas formas diferentes de consultar data y usar el constructor. Así que diviértete con eso. Y sí, tienes algunas plantillas iniciales para comenzar. Así que sí, gracias a todos por unirse a nosotros. Nos vemos la próxima vez, supongo. Gracias, Nancy. Gracias a todos. Gracias, a todos. Nos quedaremos unos 10 minutos más en caso de que haya preguntas de último momento o algo así. Pero para aquellos que tengan que irse, nos vemos la próxima vez.