Rápido y Furioso - ¡Volviéndose headless con Nuxt.js!

¡Hola a todos, cómo están hoy? Espero que estén disfrutando mucho de la conferencia hasta ahora, o que estén disfrutando de la grabación de la conferencia. Si están viendo esto, probablemente estén viendo la grabación porque tal vez no pude asistir a la conferencia. De todos modos, esta es mi charla. Se llama Headless con Next y vamos a explorar el mundo headless y el mundo JAMstack y cómo funciona con Next. Básicamente, lo construiremos desde cero hasta el punto en que puedas implementar un sitio web o tu aplicación con Next. Y esto, como dije, es una experiencia práctica. Mi nombre es Samuel Snopko y estoy hablando con ustedes porque también soy un headless de relaciones de desarrollo en Storyblock, que es uno de los CMS headless. Me encantan los CMS headless en general. He estado trabajando con ellos durante varios años y definitivamente he estado usando Next durante unos cinco años. Así que creo que es la mejor combinación y me da mucho poder para crear muchos sitios web y también para hacer todos los proyectos que quiero. Estoy tuiteando en Samuel Snopko y sería genial si me siguen. Así que solo vayan allí y busquen a Snopko y pueden seguirme, en caso de que tengan alguna pregunta durante esta charla, solo escríbanme allí. Entonces, lo que vamos a hacer es, como dije, vamos a comenzar desde cero y vamos a construir el sitio web o el proyecto o la aplicación o lo que sea que estén construyendo. Pueden verificar el código en este enlace y siéntanse libres de ir allí, pero también habrá otros enlaces que compartiré y que pueden obtener. La mejor manera de comenzar es la primera pregunta. Y como es muy rápido, es un poco rápido y furioso. Recomiendo totalmente usar Create Next app. Sea que estén usando Yarn o NPM, solo háganlo, nombren el proyecto y comiencen. El punto es que siempre obtendrán la información más reciente, la configuración más reciente con todos los paquetes que necesitan. Solo sigan el tutorial paso a paso y el proyecto básicamente se verá así. Esto es lo que obtendrán y también ven mis notas aquí. ¿Y qué significa eso? Primero que nada, ejecuten el servidor local. Y lo que el servidor local debería hacer es básicamente iniciar su enlace de servidor local. Mi servidor local en este momento se ve así. Creo que actualicé recientemente el servidor local de Next, por lo que pueden ver una pantalla diferente y pueden tener un enlace para ir a la documentación en GitHub. Y básicamente eso es lo que necesitan para configurar su proyecto. Solo sigan el tutorial de Next Create app y llegarán aquí, listos para implementar. Pero aún solo tienen la estructura básica. No tienen contenido. Así que para el contenido, elijo el headless CMS y en este caso voy por Storyblock.

Y Storyblock tiene una plataforma digital y un servicio de software donde puedes crear y configurar tu proyecto en cuestión de componentes. Así que también puedes obtener la edición de video en tiempo real, pero incluso puedes seguir todas las buenas mejores prácticas de Next. Y no tienes que hacer ningún compromiso. Así que lo que voy a hacer aquí es simplemente crearlo desde cero. Voy a duplicar un espacio existente o jugar con una demo y realmente crear las cosas.

Ahora estoy mirando mi carga donde también tengo algo de copiar y pegar que básicamente no haré muchos errores tipográficos, pero de todos modos cometo errores tipográficos. Así que aquí simplemente creo el nuevo proyecto y tan pronto como creo un nuevo proyecto, puedo cerrar la guía porque soy su guía hoy. Y después de esto, tampoco necesitarán una guía, para ser honesto. Entonces, lo que ven aquí es básicamente el proyecto o su espacio donde guardan su contenido generalmente. En este momento, solo tengo una página de inicio o página principal que representa la página de índice o página de inicio y, por supuesto, hay otras áreas. Pueden ir a verificar el panel de control y ver qué está sucediendo en su proyecto, pero en este caso acabamos de crearlo.

Entonces, si abriera la página de inicio, vería directamente la parte del editor visual. Así que ven que esto no está configurado. Aquí tengo un mensaje de bienvenida, pero también veo a la derecha que tengo mi componente y puedo comenzar a editarlos. También podría enfocarme solo en el componente y obtener la vista predeterminada headless que muchos otros CMS headless tienen, pero hoy me enfocaré en el verdadero editor visual y configuraremos esto. Entonces, en este momento tenemos un teaser. Podría cambiarlo a `Hola Londres` y, por supuesto, guardarlo. Podría publicarlo y luego publicarlo. Si se configura el webhook, se configurará con la activación del webhook y la construcción del webhook y luego se iniciará la implementación en Netlify o Vercel o cualquier otro servicio que deseen utilizar para el alojamiento o sus propios servidores, tal vez. Por supuesto, hay muchas otras características que voy a revisar ahora y nos vamos a enfocar en cómo conectarlas primero. Entonces, en este momento tengo mi contenido e incluso veo qué tipo de contenido voy a obtener así que probablemente si estuviera usando REST o V2 obtendría algo como esto en este caso.

Y ahora necesito llevar este contenido a next.js porque todavía tengo la página de bienvenida. Así que este es mi proyecto y en el proyecto lo siguiente que debes hacer es simplemente instalar cualquier cosa. Por supuesto, necesitarás Axios, así que usando Create NUXT app, simplemente instala Axios. Y luego necesitarás el módulo Storyblock NUXT. El módulo Storyblock NUXT, simplemente instálalo usando npm o yarn y luego ve a los paquetes a la configuración de NUXT. La configuración de NUXT ya está bastante bien explicada en el sitio web de NUXT. Y realmente no necesitas configurar mucho aquí. Entonces, lo que vamos a configurar hoy es básicamente el módulo para Storyblock. En este caso, puedes ver aquí que hay un módulo Storyblock NUXT llamado y accedemos aquí al token de acceso.

Hay muchas otras configuraciones que no vamos a cubrir hoy, pero ahora necesitamos el token de acceso. También te animaría a guardar el token de acceso en un archivo .nf, pero no lo haré ahora, porque solo estamos ahorrando tiempo para la charla. Aquí está mi primer token de acceso, pero si lo necesito, puedo crear, por supuesto, tantos tokens de acceso como necesite, y puedo crear tokens de borrador de publicación, y también para diferentes ramas en las versiones o IDAPs.

Aquí simplemente voy a agregar mi token de acceso, veo que mi proyecto se está reconstruyendo. En este momento, básicamente debería ver una actualización o tal vez no. Así que veamos qué está pasando en la pantalla. Y en la pantalla, no vemos ninguna actualización en absoluto. Y si lo piensas, está bien, porque lo importante en este momento es que no estamos obteniendo errores. Así que esto se está ejecutando y la construcción está llevando un poco más de tiempo, pero debería funcionar. Sí, se está ejecutando. Todo está funcionando. Bien. Y todo está preparado. ¿Cuál es el siguiente paso?

Ya hemos creado, nos hemos conectado, pero todavía no vemos el contenido. E incluso si voy a Storyblock, te dije que aquí está esa parte de edición visual, pero no lo vemos aquí. Así que primero vamos a solucionar esto. Aquí puedes ver que dice tu dirección de servidor / home. Y esto es como nuestro iframe, llamémoslo navegador falso. Y puedes tener múltiples enlaces de vista previa para diferentes entornos. Pero aquí me gustaría ver mi localhost en este momento. Así que lo que necesito hacer es tomar la dirección de localhost y configurarla en la configuración. Así que vamos a ir a la configuración del proyecto. Y aquí, simplemente cambiaré el nombre de la ubicación predeterminada. Pero si quiero agregar aquí algo especial como una ubicación de desarrollo, también puedo agregar aquí tal vez un enlace de Vercel o Netlify. Funciona bastante bien, solo lo guardo. Y ahora, si vuelvo al contenido y abro la página de inicio, debería ver un cambio. Y en primer lugar, veo una diferencia aquí. Veo un error. En este caso, el error es algo bueno porque estamos obteniendo el error de Next.js desde esta esquina izquierda. Puedes verlo.

Entonces, ¿qué significa esto? Significa que en mi código, el enrutador no conoce el home.vuevue o el home.slack en absoluto. No configuramos ningún enrutador para eso, así que necesitamos apuntar a la página de índice. Podríamos hacerlo de varias formas, como configurándolo directamente en Next, pero sabemos que tiene sentido nombrar la página de inicio de alguna manera. Entonces, todo lo que necesitamos hacer es decir en el bloque de historias, como, oye, esta historia o este home representa la página de índice, que generalmente está en blanco. Simplemente lo agregamos aquí y anulamos la parte real para el editor visual real.

De repente veo la vista previa de mi próximo proyecto y puedo cerrar la pestaña de localhost. Ahora estaremos usando básicamente esta vista. Entonces, aquí todavía veo solo la vista previa. No veo realmente el contenido que te mostré aquí. No veo ningún texto de hello London. No veo ninguna cuadrícula. Entonces, ¿qué necesitamos hacer? Primero necesitamos entender qué son estos componentes.

Entonces, estos componentes son los componentes del bloque de historias. En el bloque de historias puedes configurar tantos componentes como necesites. Es un número ilimitado. Realmente, la única limitación es tu imaginación en este caso. Y tienes dos tipos. Son los tipos de contenido y los componentes anidables.

Los tipos de contenido, por supuesto, se utilizan para crear las entradas o historias en el bloque de historias. Por ejemplo, esto podría ser una página, una página de inicio, una página de artículo, pero también cosas que no están representadas por la página, como el autor, que aparece en múltiples páginas. Y los componentes anidables son los bloques en esas páginas. Digamos que tendremos una imagen de héroe. Lo siento, un área de héroe o un slider o un estilo diferente. Como aquí tenemos una característica, una cuadrícula, un teaser. Básicamente, exactamente ese estilo que estarías construyendo usando el diseño atómico. Y generalmente son componentes que ya has definido en Vue.js o en el proyecto Next.

En el 99% de los casos, obtienes la misma lista en el proyecto Next y también en el bloque de historias. Así que aquí tengo ahora cuatro de ellos. Creados por defecto como marcadores de posición. Y la característica. Entonces, la característica, como puedes ver, solo tiene un campo, que es el nombre. Y si hago clic en el campo aquí, puedo cambiar diferentes tipos de campo. Hay tipos de campo predeterminados como texto enriquecido, bloques, etc. Puedes consultarlo en la documentación. Y, por supuesto, siempre puedes crear tus propios tipos de campo. No voy a hacer eso, así que vamos a cancelarlo y no guardarlo.

Y tengo una cuadrícula, que es un poco especial porque aquí estoy usando un tipo de bloques. Y este tipo de bloque básicamente significa que puedo usar cualquier otro componente anidable dentro de este campo. Y puedo, por ejemplo, establecer una regla, como que solo se me permite usar una característica. Y de esta manera puedes crear una anidación infinita de los componentes anidables dentro de otros componentes, ya sean componentes anidables o tipos de contenido. Luego, por supuesto, la página aquí, simplemente agregué aquí un campo, puedes agregar tantos campos como desees. En este caso, solo agregué un cuerpo porque es una página y el cuerpo también es un tipo de bloques porque podemos agregar allí cualquier otro bloque o componente que ya hayamos definido.

Y el teaser también tiene solo un campo, un titular. Muy sencillo. Y el titular es de tipo tarea. Entonces, ¿qué tenemos en el siguiente sitio? Porque todavía no vemos la vista previa de esos componentes y la razón es porque no los renderizamos. ¿Entonces cómo los renderizamos? Como primero necesitamos crearlos en Nuxt. Así que en Nuxt los estoy creando, ya los creé y puedes ver aquí que tengo un componente de característica que básicamente renderizo con estilos de Tailwind un nombre, un texto. El texto o el contenido lo obtengo a través de la propiedad llamada bloque y es como una cascada desde el nivel de la página hasta los componentes o bloques correctos. Y luego hay algo especial que se llama tabla VUD y esto es porque en el modo de borrador de Storyblock podemos habilitar la edición en tiempo real y ver la edición en tiempo real mientras escribimos y hacemos clic en el sitio web para mejorar mi experiencia con Storyblock y editar el contenido para el modo de borrador, no la producción, eso es importante. La producción no se toca y es lo más rápido posible o lo más rápido que puedas hacerlo. Lo mismo ocurre, por supuesto, para el teaser, solo estamos renderizando el titular y lo mismo. Así que verás mucho de este bloque porque lo mismo ocurre en esta cuadrícula donde obtengo mi contenido a través del bloque, pero aquí hay un pequeño truco que estoy usando un componente dinámico de la vista para renderizar el componente dinámico porque originalmente no sabía si podría ser una característica o un teaser u otro tipo de característica, así que como no sé qué tipo de componentes vendrán aquí, aquí estoy recorriendo el bloque llamado columnas, así que aquí puedes ver que este es el campo llamado columnas y recorriendo esto y si voy al contenido y te muestro también en JSON, aquí en la API rest podemos buscar columnas. Vemos que aquí hay un componente básicamente este componente se llama cuadrícula y contiene un campo llamado columnas y estas columnas tienen tres objetos y esos tres objetos representan esas tres características que puedes ver aquí en la cuadrícula. Y lo mismo ocurre aquí, simplemente los recorremos para averiguar qué tipo es, por lo que block.component es el tipo de componente que está aquí, ese componente está devolviendo la característica y si este block.component devuelve la característica, sé que debo renderizar la característica y este es el comportamiento predeterminado de la vista, por lo que este es un enfoque realmente poderoso que ya puedes usar.

¿Qué sigue? Así que esto y luego simplemente renderizas la característica. Bastante simple y lo mismo ocurre básicamente para la página, simplemente recorremos los componentes y el campo llamado cuerpo para sus componentes, por lo que ese es el nivel más alto, por lo que esta es la página, hay un campo cuerpo y contiene en este momento dos componentes, teaser y cuadrícula, por lo que sabemos que en el orden los vamos a renderizar. Genial, todavía no los vimos y la razón por la que no los vi es porque no los registramos en el siguiente, puedes hacerlo de varias formas, como la forma antigua, pero la mejor forma sería hacerlo, definitivamente te animaría a hacerlo siempre en el momento, es simplemente ir a un componente, por lo que puedes hacerlo, por ejemplo, aquí mismo. Componentes verdadero y ahora Nuxt importará automáticamente los componentes desde la carpeta de componentes si es necesario. En este caso, deberíamos ver un cambio aquí lentamente, pero no lo veremos porque todavía no solicitamos los datos de Storyblock, simplemente conectamos Storyblock al proyecto Nuxt pero no los solicitamos. Entonces todavía necesitamos llamar y usar la llamada axios a la API. Para hacer eso, necesitamos ir a la página de índice en este caso y esto también es lo que estoy haciendo solo en este ejemplo, puedes abstraer estas funciones y luego reutilizarlas en las muchas páginas que necesites y hay como talleres sobre cómo hacerlo multilingüe y otras cosas como esta. Entonces, lo que voy a hacer aquí es tal vez lo haré un poco más grande, es que voy a eliminar básicamente las cosas aquí. Así que ahora, hagámoslo un poco más grande para que veas que es la pantalla de bienvenida original del proyecto siguiente, así que ya no la necesito, así que vamos a eliminarla, agregué mi código, así que en este caso estoy descubriendo qué tipo de componente quiero renderizar en este caso, podría reemplazar esto también con una página. Sé que no voy a renderizar un logotipo, luego haré algo de mi código para solicitar algunos datos y básicamente puedo eliminar todo el estilo. Entonces, ¿cuál es mi script aquí? Mi script aquí simplemente configura el esqueleto de mis datos, como lo que probablemente espero y luego en el gancho async de datos solicito mis datos, estoy usando la API de Storyblock que ya fue instalada por el módulo Storyblock. En el context.app tengo Story API y aquí estoy solicitando el contenido de inicio. Estoy solicitando estáticamente el contenido y no dinámicamente porque sé que estoy en la página de índice en este caso. Pero en el mundo real podrás descubrir el conjunto completo de lo que deberías solicitar en Storyblock, por ejemplo, con esta línea y lo mismo ocurre también con la versión porque en este momento estamos solicitando solo la versión de borrador, pero en el mundo real, si vas a producción, podrás descubrir si debo obtener contenido de producción o debo obtener contenido de borrador para Storyblock, así que exactamente algo así encontrarás la versión. Esto básicamente está solicitando datos y en caso de que obtengamos datos, los devolveremos a los datos y deberíamos verlos. Entonces, si ahora todo se reconstruye, sí, vemos nuestro contenido y esto es bastante genial. Podemos comenzar a editarlo como hola vista, podemos guardarlo y aún tenemos que volver a cargarlo para ver la actualización. Y este guardar y volver a cargar está básicamente contaminando nuestro historial aquí porque cada vez que tenemos que volver a cargar y ver la vista previa, crearemos una nueva versión de nuestro contenido, lo cual es un poco complicado y creo que podemos hacerlo mejor con la vista y el siguiente.

Entonces, lo que quiero decir es que en el gancho de montaje, espero que lo llame correctamente, podemos inicializar el puente de Storyblock. El puente de Storyblock es un poco complicado, también está parcialmente instalado por el módulo de Storyblock y aquí puedes crear la instancia del puente de Storyblock y luego en el editor visual de Storyblock con el modo de borrador del contenido podemos escuchar los eventos desde el editor visual. Estos eventos son, por supuesto, publicar y cambiar.

Entonces, publicar y cambiar son básicamente guardar y publicar y el evento de entrada es cualquier cosa que hagas directamente en tu editor de contenido aquí. Entonces, si lo guardo y dejo que el siguiente se reconstruya rápidamente, lo cual parece que ya está hecho, vemos que instantáneamente nuestra vista previa se mejora. ¿Qué significa esto? Y es bueno, esto es realmente genial porque no solo podemos agregar un poco de contornos e identificar nuestro componente, que es un poco de CSS que agregamos al entorno de desarrollo actual, sino que también tenemos clics aquí. Así que hay una conexión y si hago clic en la característica también, el contenido correcto se abre a la derecha. Puedo y esto no funciona en un solo sentido, también funciona en el otro sentido. Entonces, si comienzo a cambiar el hola, por ejemplo, de vuelta a Hello London, me gustaría duplicar cosas. Así que digamos que me gustaría duplicar el Hello London en la parte inferior, o tal vez me gustaría mover esto hacia atrás. Así que puedo comenzar y hacer muchas características que son realmente útiles para mis editores de contenido, creadores de contenido y especialistas en marketing. Quieren experimentar y crear cosas. Así que digamos que lo intentarían si la sexta característica funcionara, entonces pueden duplicar y pueden probarlo en la pantalla del móvil, pueden probarlo en las tabletas. También pueden volverse un poco más dinámicos y luego en la próxima versión V2, el editor visual es aún mejor y tiene aún más características y potencia.

Entonces sí, esto es lo que puedes hacer muy rápidamente sin guardar, y ahora solo estoy diciendo con la versión con la que estoy realmente contento, y también publicar en la versión con la que estoy muy contento. ¿Qué significa eso para mí? Significa que paso menos tiempo intentando reconstruir y ver y previsualizar y realmente hacer y enfocarme en el contenido. Sí, esto es solo un hola mundo por el momento. Así que lo que... Probablemente te prometí un poco más, así que creemos algo más porque todavía tengo, creo, diez minutos, así que hagámoslo.

Entonces, creemos un componente. Aquí tengo preparada un poco de ayuda en el lado izquierdo y crearemos los artículos y seremos destacados de artículos en la página de inicio. Para hacer eso, primero necesitamos crear un artículo. Así que definiremos cómo se vería el artículo. Este es el componente de artículo, que es un tipo de contenido, por lo que crearemos artículos reales. Me gustaría tener aquí un título. Sí, el título está bien. Luego me encantaría tener una imagen de portada, me encantaría tener una introducción y una conclusión, introducción, conclusión y el texto, aquí es donde escribiremos nuestro texto. Hay muchas formas de definir el artículo, esta es la básica. El título, muy simple, simplemente mantendré el texto. Podría hacer una tabla de traducción o podría requerirlo, vamos a requerirlo.

Luego la imagen principal, me encantaría probablemente tener una imagen, así que elijamos un recurso y vayamos para la imagen. Y en el caso de la introducción, me encantaría tener un texto más largo, pero sin las opciones lo cambié mucho. También reemplazaría el orden superior. Un autor, me gustaría elegir autores, también hay muchas formas de implementarlo. Voy a optar por una opción única por el momento porque debería haber un solo autor y solo voy a obtener su nombre.

Así que voy a definir los autores aquí, pero también podría obtener los autores de otras historias o fuentes externas o lo que quiera. Aquí agregaré un SAM y agregaré un DOM. Y luego lo último que necesito es un PROS en este caso voy a usar un editor enriquecido porque me gustan más los editores enriquecidos en formato markdown porque puedo usar sus clases personalizadas y también agregar un componente dentro. Así que ahora he creado un esquema o definición de mi artículo, pero aún no tengo la vista previa de ello. No puedo renderizarlo, pero eso no significa que en el mundo headless y el JAMstack no puedas crear artículos ya.

Así que voy a agregar la opción para que mis escritores creen artículos en la carpeta de artículos y me encantaría que solo creen tipos de artículo allí. Así que agreguemos un artículo. Ahora tienen una carpeta y puedo agregar aquí el artículo número uno y lo creo muy rápidamente. Creo uno nuevo. No tengo ninguna vista previa. Entonces, NextJS básicamente está diciendo, ¡Oye, no sé qué quieres renderizar! Así que centrémonos en el contenido y voy a subir las cosas. Así que subamos la imagen número uno aquí. Y por supuesto, podría configurar el punto de enfoque y otras cosas allí. Es como cambiar el recorte, cambiar los filtros porque también ofrecemos el servicio de imágenes destacadas. Estoy obteniendo algo de contenido y aquí me gustaría, por supuesto, escribir mi texto. Hay muchas formas de configurarlo. Así que guardémoslo. Y creemos dos artículos más muy rápidamente. Así que voy a duplicar las cosas, solo digo dos, duplicar, saltar allí. Y solo voy a cambiar las imágenes porque me gustaría ver algo real como cambio. Así que aquí y hagamos que Storyblock sea genial por ahora y el autor será Dom. Sí. Guardar. Así que volvamos. Y hay un artículo más, dije y el autor número tres, no cuatro, por supuesto. Duplicar, crear.

Y disculpen, estoy dedicando un poco más de tiempo. Tal vez en esto debería, tal vez debería hacer una pausa, pero ver Londres es genial y sigamos al aire libre. Así que guardémoslo. Ahora vayamos aquí y publiquemos todos los artículos. Aquí está el botón de publicar. Publiquémoslo. Y ahora me encantaría ir a la página de inicio. Y me encantaría ver en la página de inicio estos tres artículos destacados aquí. ¿Cómo hacer eso? Porque no tengo un componente para eso. Puedo crear un teaser de degradado destacado. Entonces, ¿qué necesitas hacer? Por supuesto, ahora tengo suerte, casi perdí mi proyecto. Así que necesito crear algo nuevo aquí. Necesito crear un componente llamado artículos destacados. Serán artículos destacados. Será una tabla anidada. Y estos artículos de la tabla anidada, por supuesto, serán los artículos que quiero seleccionar manualmente. En lugar de tener eso, quiero seleccionar varios, así que voy a usar opciones múltiples. Y como fuente, voy a elegir historias que provengan de la carpeta de artículos. Así que digamos esto. Y ahora si voy a contenido, todavía no he renderizado nada. Puedo ir a la página de inicio, puedo ir al blog. Puedo ver todos los artículos destacados y puedo agregarlos en la parte inferior. Y aquí no está sucediendo nada. Así que espero no haber hecho nada mal. Pero como ya estoy agregando esos, puedes ver que se están agregando. Hay un pequeño error tipográfico. La razón por la que se están agregando y se está renderizando es porque tengo el código ya en Next y la importación automática de Next ya lo reconoce. OK, quiere renderizar esto. ¿Qué necesitas hacer ahora? Entonces, lo que hice en Next básicamente. Ahora puedo crear artículos destacados.

Puedo, como, moverlos. Y básicamente tengo un sitio web o un componente que puedo usar. Así que guardemos esto y pasemos rápidamente al código.

Entonces, en el código, básicamente, acabo de crear también un componente de artículos destacados aquí. Solo estoy mostrando un poco de título con algo de estilo. Y luego, por supuesto, estoy mostrando una lista de mis artículos donde obtengo mi contenido de esa llamada. Aquí obtengo los blog.articles, estoy haciendo un bucle. Entonces, exactamente, aquí ves que estoy haciendo un bucle en este campo de artículos. Y sí, esto es algo que normalmente solo obtendría los UIDs de esos artículos, pero gracias a las relaciones resueltas aquí. Aquí en featured.articles, y también aquí en la llamada de la API, puedo resolver para obtener las IDs, obtengo el contenido de mis artículos.

Entonces, si ahora voy a los artículos, que tal vez sea un poco confuso, solo estoy mostrando tres teasers de artículos. No creé los teasers de artículos en Next, pero eso no es un problema porque estoy haciendo otra capa de abstracción directamente aquí en el proyecto de Next. Y aquí los teasers de artículos muestran básicamente una imagen e incluso la redimensionan. Por lo tanto, utiliza el redimensionador de imágenes de storybook para redimensionarla a 300, 250 y luego muestra el título intro y el exterior con un poco de estilo de Tailwind. Y eso es todo.

Entonces, si tienes un componente de artículos destacados, ahora podemos corregir este título, así que corrijámoslo rápidamente. También puedes definir un esquema aquí. Entonces obtengo un título, creo que se llamaba así. Guardo el esquema y digo artículos destacados. Y la característica realmente agradable es que ahora puedes reutilizar ese componente de artículos destacados. Y por ejemplo, puedo copiarlo y pegarlo aquí. Oh, lo siento. Solo quería copiar y pegar, no seleccionar. Está en la parte superior. Así que ahora salto aquí. DOM está en el medio. Así que eliminemos el artículo del DOM y llamémoslo artículo de Sam. Puedes guardarlo, publicarlo y el sitio web se está implementando. Listo. Y acabo de crear algo muy rápido.

Y eso es increíble. Puedes ver lo rápido que puedes desarrollar tus cosas con este enfoque. Si quieres saber más y tal vez llegar a la etapa en la que estás en tu pantalla en este momento. También con el soporte de varios idiomas, puedes ir a storyblog.com.tc.js donde encontrarás la experiencia definitiva que Next.js tiene para Storyblog y Next. Y no solo aprenderás sobre la conexión entre Storyblog y Next, sino que también obtendrás referencias a artículos interesantes de Next y también, por ejemplo, cómo construir videos que también se construyeron usando Storyblog, y hay un tutorial de siete partes sobre eso. Así que ve allí y pruébalo. También quiero agradecer al organizador de la conferencia. Quiero agradecer al equipo de Next y a todos los equipos que están construyendo estos productos porque nosotros, los ponentes, generalmente solo obtenemos las cerezas en la parte superior del pastel. Y detrás de todo esto hay muchas, muchas, muchas personas que están dedicando su tiempo. Lo mismo ocurre con Storyblog, así que si quieres hacerlos felices, tuitea sobre ellos. Diles gracias. Eso es realmente, realmente importante. Siempre me da energía para seguir adelante y síguenos en Twitter, síguenos en Storyblog y sígueme en el blog de Samuel. Oh, perdón, en Twitter y haznos preguntas, siempre estamos felices de responder. Y además, tengo una sorpresa más para ti. Puedes ir a storyblog.com/a/new-js-life-2021. Lo cual te dará una cuenta premium de tres meses, pero según tengo entendido, se cambió a un nombre diferente, no es una cuenta premium, pero obtendrás una cuenta más cara de forma gratuita durante tres meses para probar. 15 días de prueba cada vez que crees un nuevo espacio y una última cosa antes de decir un agradecimiento final, también echa un vistazo a la versión dos de Storyblog que viene con todas las nuevas y geniales características como el nuevo editor visual y ya está en beta pública, puedes darnos tus comentarios y estamos atentos a tus comentarios, realmente queremos crear la mejor experiencia para los marcos de trabajo modernos como Next y Vue, para permitirnos a los desarrolladores no perder tiempo en la creación de contenido y backend, sino en crear sitios web y aplicaciones geniales. Muchas gracias y nos vemos pronto en algún lugar, ciao.