Versión en EspañolES

Curso intensivo sobre Jamstack con Next.js y Storyblok

Arisa Fukuzaki

Chakit Arora

Solutions Engineer @ Storyblok

Please sign in to watch this workshop.

Bookmark

Es posible que ya hayas leído sobre Jamstack. Probablemente ya hayas utilizado Next.js y recientemente hayas escuchado mucho sobre los CMS sin cabeza. Este curso rápido pondrá todas las piezas juntas y te mostrará por qué Storyblok, combinado con Next.js, es la mejor combinación para tu próximo proyecto. ¡Ven y pruébalo tú mismo!

- Conocimiento profundo de Jamstack. Cómo ha cambiado desde los tiempos antiguos hasta el mundo moderno. Aprende cómo se creó Jamstack comparando los sitios estáticos y los sitios dinámicos.

- Cómo Next.js sirve contenido y cómo se sirve el contenido con la generación de sitios estáticos (SSG).

- Metodología de diseño atómico y cómo se aplica al sistema de gestión de contenido.

- Experiencia práctica en proyectos construyendo un proyecto Jamstack con Next.js y Storyblok.

Requisitos previos

- Cualquier editor de texto. Se recomienda Visual Studio Code

- Familiaridad con JavaScript, React y Git. Haber trabajado con Next.js antes es una ventaja

Lo que se incluye

1. Introducción y descripción general del curso

2. Introducción a Jamstack

3. Introducción al diseño atómico

4. Descripción general de los CMS sin cabeza

5. Introducción a Storyblok

6. Creación de una aplicación Next.js

7. Creación de un espacio Storyblok

8. Conexión de Next.js y Storyblok

9. Creación de componentes personalizados

10. Creación de la primera página

11. Introducción a Visual

12. Adición de páginas dinámicas

13. Creación de la sección de blogs

14. Implementación en Vercel

This workshop has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Storyblock es un sistema de gestión de contenido (CMS) sin cabeza que permite a los desarrolladores separar el contenido de la presentación. Se utiliza para crear sitios web y aplicaciones web dinámicas, permitiendo que el contenido sea reutilizado y entregado a través de diferentes plataformas.

Para configurar un entorno de vista previa en Storyblock con Next.js, es necesario añadir un enlace de vista previa en Storyblock y configurar Next.js para utilizar este enlace. Esto permite que getStaticProps y getStaticPaths se ejecuten en cada carga de página, asegurando que los cambios en el contenido se reflejen inmediatamente en el entorno de desarrollo.

Un componente dinámico en Storyblock es un bloque de contenido que se puede reutilizar y configurar dinámicamente dentro de diferentes páginas. Se implementa registrando el componente en el código del proyecto (por ejemplo, en Next.js) y luego utilizándolo en el CMS de Storyblock para agregar contenido dinámico a las páginas.

Para automatizar el despliegue de un proyecto Next.js con Storyblock, se puede utilizar un webhook de Vercel que se activa cada vez que se publica contenido en Storyblock. Esto inicia una nueva construcción y despliegue del sitio en Vercel, asegurando que el contenido actualizado se refleje en el sitio en vivo.

Los beneficios de usar Storyblock incluyen la flexibilidad en la gestión del contenido, la capacidad de entregar contenido a múltiples plataformas y dispositivos, y la mejora en la colaboración entre desarrolladores y editores de contenido. Además, su naturaleza sin cabeza permite una mejor escalabilidad y mantenimiento del sitio web o aplicación.

En Storyblock, las relaciones de contenido se resuelven utilizando la función resolveRelations de la API de Storyblock. Esto permite cargar y mostrar información relacionada, como artículos o productos relacionados, directamente dentro de las páginas de Next.js, facilitando la gestión de contenido interconectado.

Un gancho de despliegue es una URL proporcionada por Vercel que, cuando se invoca, desencadena un nuevo despliegue del sitio. En Storyblock, se puede configurar un gancho de despliegue para que cada vez que se publique o actualice contenido, se notifique a Vercel para que reconstruya y despliegue automáticamente el sitio actualizado.

next.js jamstack

Arisa Fukuzaki

Chakit Arora

161 min

28 Nov, 2022

Comments

Available in other languages:

Watch more workshops on topic

AI para Desarrolladores de React

React Advanced 2024

142 min

AI para Desarrolladores de React

Top Content

Featured Workshop

Eve Porcello

El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)

react next.js artificial intelligence

Tracing: Frontend Issues With Backend Solutions

React Summit US 2024

112 min

Tracing: Frontend Issues With Backend Solutions

Top Content

Featured WorkshopFree

2 authors

Los problemas de frontend que afectan a tus usuarios a menudo son provocados por problemas de backend. En esta masterclass, aprenderás cómo identificar problemas que causan páginas web lentas y malos Core Web Vitals usando tracing.
Luego, pruébalo tú mismo configurando Sentry en un proyecto Next.js ya preparado para descubrir problemas de rendimiento, incluyendo consultas lentas a la base de datos en una sesión interactiva de programación en pareja.
Saldrás de la masterclass siendo capaz de:- Encontrar problemas de backend que podrían estar ralentizando tus aplicaciones de frontend- Configurar tracing con Sentry en un proyecto Next.js- Depurar y solucionar problemas de rendimiento deficiente usando tracing
Este será un evento en vivo de 2 horas donde tendrás la oportunidad de codificar junto con nosotros y hacernos preguntas.

next.js debug

El Viaje Desde el Frontend con React al Desarrollo Fullstack Con Next.js

React Summit 2025

91 min

El Viaje Desde el Frontend con React al Desarrollo Fullstack Con Next.js

Featured Workshop

Eric Burel

Únete a nosotros en el viaje desde el desarrollo frontend con React hasta el desarrollo fullstack con Next.js. Durante esta masterclass, seguiremos el tutorial oficial de Next.js Learn con Eric Burel, entrenador profesional y autor de NextPatterns.dev. Juntos, configuraremos un sitio web con Next.js y exploraremos sus características del lado del servidor para construir aplicaciones de alto rendimiento.

next.js

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

React Summit 2022

173 min

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

Top Content

Workshop

Kellen Mace

En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.

next.js wordpress graphql

Next.js 13: Estrategias de Obtención de Datos

React Day Berlin 2022

53 min

Next.js 13: Estrategias de Obtención de Datos

Top Content

Workshop

Alice De Mauro

- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión

performance next.js best practices react server components

De Todo App a B2B SaaS con Next.js y Clerk

React Summit US 2023

153 min

De Todo App a B2B SaaS con Next.js y Clerk

Top Content

WorkshopFree

Dev Agrawal

Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.

react next.js devtools

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

Enrutamiento en React 18 y más allá

React Summit 2022

20 min

Enrutamiento en React 18 y más allá

Top Content

Delba de Oliveira

Senior Developer Advocate @ Vercel

Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.

react next.js patterns react file based routing

RedwoodJS: El marco de aplicación React Full-Stack de tus sueños

React Summit Remote Edition 2021

43 min

RedwoodJS: El marco de aplicación React Full-Stack de tus sueños

Top Content

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

jamstack fullstack frameworks redwoodjs react full stack framework

Una Guía Práctica para Migrar a Componentes de Servidor

React Advanced 2023

28 min

Una Guía Práctica para Migrar a Componentes de Servidor

Top Content

Fredrik Höglund

ephem.dev

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react react query next.js case study react server components react 18

El Nuevo Router de Aplicaciones Next.js

React Summit 2023

27 min

El Nuevo Router de Aplicaciones Next.js

Top Content

Lee Robinson

Vercel

Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.

next.js builders and founders

No sabes cómo hacer SSR

DevOps.js Conf 2024

23 min

No sabes cómo hacer SSR

Emanuele Stoppa

Active contributor to the Biome project

The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.

next.js serverless astro

Una Saga de Problemas de Renderizado Web

Vue.js London 2023

28 min

Una Saga de Problemas de Renderizado Web

Alba Silvente Fuentes

FullStack Engineer at Storyblok

This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.

performance jamstack scalability