Curso Intensivo sobre Sitios Web Multilingües con next.JS y Contenido Headless

Rate this content
Bookmark

En este curso intensivo, crearemos un nuevo proyecto en el CMS headless, lo llenaremos con datos y utilizaremos el contenido para construir una aplicación Next.js multilingüe. Pasaremos mucho tiempo en el código para:

- Generar modelos y estructuras de tipo fuertemente tipados para el contenido

- Configurar el sitio para varios idiomas

- Utilizar los códigos de idioma respectivos en la obtención de contenido e incorporar fallbacks de idioma

- Resolver contenido multilingüe de campos de texto enriquecido


Aprenderás:

- Cómo trabajar con contenido de un CMS headless (Kontent.ai)

- Cómo se puede aprovechar el modelo de contenido para generar tipos de TS y qué beneficios aporta a tu proyecto

- Cómo agregar capacidades multilingües a un sitio web Next.js

- Cómo utilizar fallbacks de idioma

- Cuáles son los problemas típicos al trabajar con contenido multilingüe

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

FAQ

Next.js es un framework de React que permite desarrollar aplicaciones web y sitios web. En el masterclass se mostró cómo manejar la parte multilingüe del sitio web utilizando Next.js, permitiendo que el contenido se maneje en diferentes idiomas de manera eficiente.

Un CMS headless, como Content.ai, es una plataforma de gestión de contenido que proporciona datos a través de una API sin una interfaz de presentación predeterminada. Se integra con Next.js mediante APIs que facilitan la importación de contenido en proyectos multilingües, permitiendo una gestión de contenido más flexible y una mejor experiencia de desarrollo.

Puedes importar contenido en tu proyecto registrándote en Content.ai y utilizando herramientas proporcionadas para importar un paquete ZIP de contenido. Durante el masterclass, se explicaron los pasos para configurar y utilizar el gestor de plantillas de contenido para realizar la importación.

La localización se maneja agregando diferentes idiomas en el CMS y configurando Next.js para reconocer y manejar estas localizaciones. Durante el masterclass, se mostró cómo configurar Next.js para que responda a diferentes configuraciones regionales y cómo propagar el idioma actual en las consultas de contenido.

Se discutieron estrategias como la utilización de modelos de tipo fuertemente tipados, la implementación de una solución heurística en la página de inicio, y la generación dinámica de rutas y propiedades estáticas basadas en el contenido del CMS. También se cubrió la adición de nuevos idiomas tanto en el código como en el CMS.

El código y los recursos del masterclass están disponibles en un repositorio público de GitHub. Se proporcionaron enlaces durante la sesión y se incluyeron en un archivo llamado links.txt junto con un PDF de la presentación y un paquete de contenido necesario para el CMS.

Ondrej Polesny
Ondrej Polesny
126 min
14 Oct, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La masterclass de hoy se centró en la construcción de sitios web multilingües con Next.js y contenido headless. La masterclass cubrió temas como la importación de contenido en proyectos de CMS, la generación de modelos de script de tipo fuertemente tipados, la implementación de resolución de texto enriquecido, la adición de soporte para varios idiomas y la implementación de un interruptor de idioma. El orador proporcionó instrucciones paso a paso y ejemplos de código durante toda la masterclass. Se animó a los participantes a hacer preguntas y se les dio acceso a los materiales de la masterclass y al repositorio de código.

1. Introducción a los sitios web multilingües con Next.js

Short description:

Hoy quiero hablarles sobre los sitios web multilingües con Next.js y contenido headless. Nuestro sitio web en Content.ai está construido con Next.js y quiero compartir el conocimiento que adquirí al construir ese sitio. El masterclass está grabado y pueden hacer preguntas si necesitan aclaraciones. Les proporcionaré el código y la solución final para que puedan explorar.

Así que echemos un vistazo a la presentación. Espero que puedan verla. Entonces, hoy quiero hablarles sobre los sitios web multilingües con Next.js y contenido headless. ¿Qué significa eso? En primer lugar, permítanme presentarme. Soy Ondrej. Soy un evangelista de desarrollo en Content.ai. Somos un headless CMS o plataforma de contenido modular, como lo llamamos en estos días. Y por qué elegí un tema así es porque nuestro sitio web en Content.ai está construido con Next.js. Hemos estado trabajando en él durante el último año. Antes de eso, solía ser un sitio de Gatsby durante años. Hemos adquirido mucho conocimiento durante ese tiempo. Quería aprovechar la oportunidad y compartir parte del conocimiento que adquirí al construir ese sitio, para que pueda ahorrar algo de tiempo. Porque siempre estamos cortos de tiempo. Eso es lo que hago. Hoy, además de mostrarles cómo funciona Next.js, quiero contarles cómo maneja la parte multilingüe del sitio web. Ahora, también un poco de organización. El masterclass está grabado. Así que siempre pueden volver y ver lo que hice. El masterclass está diseñado de tal manera que pueden hacer cosas conmigo. Porque cuando les muestro algo, les digo que no hagan nada cuando soy un asistente siempre hago algo. Pueden hacer lo que quieran. Pueden hacerlo conmigo. Si tienen alguna pregunta, el masterclass no es difícil. Es más bien nivel introductorio. Así que si tienen alguna pregunta, no duden en escribirme en el chat o en Discord. Siempre puedo volver y explicar nuevamente algunos temas. Es bastante básico, pero si aún no han visto Next.js, tal vez estén trabajando en otra plataforma o en otro framework, probablemente no les resulte tan fácil. Así que no tengan vergüenza de preguntar, todos somos principiantes en algún momento. Está perfectamente bien, estaré encantado de volver y explicar nuevamente algunas cosas.

El código. Les daré el código en forma de un repositorio de GitHub, y también compartiré el código final con ustedes. Así que pueden tomar la solución final y volver atrás y ver cómo se implementaron las cosas. Así que no se preocupen. Estamos aquí para divertirnos

2. Agenda y Enlaces Importantes

Short description:

La agenda de hoy incluye importar contenido en proyectos de CMS, generar modelos de script de tipo fuertemente tipados, implementar una solución heurística en la página de inicio, crear páginas de índice y detalle de listados, agregar nuevos idiomas, ajustar las consultas de obtención de datos y agregar contexto al cambio de idioma. Los enlaces importantes incluyen el repositorio de GitHub, que contiene todos los datos del masterclass, y el enlace de registro de Content.ai. Registrarse permite acceder a la aplicación e importar contenido en el CMS.

y aprender algo. Entonces, la agenda de hoy, este es el sitio web en el que trabajaremos hoy. Como pueden ver, es una plantilla muy simple, siempre trato de seguir la ruta más fácil aquí, y muestra una lista de conferencias. Estas son las conferencias en las que Content.ai participa este otoño. Comenzaremos con React Advanced. Hay algunas otras conferencias que verán en el sitio web. Esto es solo para tener algún tipo de contenido y algo que mostrar en el sitio web. Así es como se verá y creo que podemos comenzar con la agenda y lo que sucederá hoy. Primero que nada, importaremos contenido en sus proyectos de CMS. Ahora hay dos formas de hacer este masterclass. La primera es registrarse en un plan de desarrollador gratuito en content.ai y pueden importar el contenido en su propio proyecto, o compartiré mi ID de proyecto con ustedes y pueden usar el mío. No importa cuál elijan, ambas opciones son posibles. Los guiaré a través de ambas opciones, sin importar cuál elijan. Luego, cuando tengamos el contenido en el proyecto, generaremos modelos de script de tipo fuertemente tipados. Tomaremos el contenido que está, o los tipos de contenido que están en el CMS, generaremos modelos en nuestro código para no tener que escribirlos manualmente y seguir trabajando con modelos de tipo fuertemente tipados en TypeScript. Luego, implementaremos una solución heurística en la página de inicio. Primero, necesitamos tener un sitio para poder hacerlo multilingüe. Este será un paso hacia hacer que el sitio web sea un poco más dinámico al tener la solución heurística. Implementaremos páginas de índice y detalle de listados. Esto será para la lista de conferencias y para el detalle de una conferencia. Veremos los métodos get static props, get static paths para que se sientan cómodos usándolos. Luego, agregaremos dos nuevos idiomas tanto en el código como en el CMS. Ahora, los sitios web multilingües, muchos desarrolladores les tienen miedo, pero no solo se trata de la implementación. Una gran parte de los sitios web multilingües se han centrado en el servidor donde se administra el contenido. Así que haremos ambas cosas. Luego, ajustaremos las consultas de obtención de data que obtienen los data en nuestro proyecto para respetar el uso local y agregaremos contexto a nuestro cambio de idioma para que cuando cambien entre idiomas, el contexto de la página web en la que se encuentren se mantenga igual. Y eso es todo, creo. Ese es el plan para las próximas dos horas. Ahora, parece un poco más complicado de lo que es. Estoy seguro de que todo saldrá bien. Ahora, comencemos con algunos enlaces importantes. El enlace más importante es el repositorio de GitHub. Permítanme tomar el enlace y lo pondré en el chat para que no tengan que escribirlo desde mi pantalla, pero primero tengo que averiguar cómo deshacerme del panel de zoom. Esto funcionó, ¿verdad? Así que déjenme ponerlo allí. React advanced masterclass 2022. Así que lo puse tanto en el chat como en Discord. Ahí es donde están todos los data del masterclass. No se trata solo del código del sitio web, sino que también hay un archivo llamado links.txt donde encontrarán todos los demás enlaces que aparecen en la presentación. Todo está ahí. También hay un archivo llamado workshop.pdf donde está la presentación que les estoy mostrando convertida a PDF. Así que si quieren retroceder o avanzar una página, está perfectamente bien hacerlo en ese PDF y hay un paquete content.zip que deberán importar el contenido en el CMS. ¿Alguien puede confirmar que pueden acceder al repositorio? Lo hice público, pero espero que GitHub no. Sí, pueden. Perfecto. Bien, eso es el primer enlace importante. Otro enlace importante es el registro de Content.ai. Pondré este enlace también en el chat. Creo que solo este es suficiente. Si no han iniciado sesión, los llevará al registro. De todos modos, déjenme ponerlo allí. Obviamente, cuando vaya allí, ingresaré directamente a la aplicación porque ya he iniciado sesión. Oh, este no es el proyecto correcto. Lo cambiaremos en un segundo. Pero déjenme abrir una ventana privada. Creo que esto nos llevará al registro. ¿Verdad? Solo tienen que hacer clic en unirse aquí. Y proporcionar su correo electrónico, contraseña y crear su cuenta. No se necesita tarjeta de crédito, solo su dirección de correo electrónico y tal vez alguna información adicional. Y deberían poder hacer eso rápidamente y entrar directamente a la aplicación. Creo que el proyecto se llamaba blog de conferencias. Perfecto. Entonces, lo que verán cuando se registren, nuevamente, si no quieren registrarse, está bien. Compartiré mi ID de proyecto con ustedes. Pueden trabajar en VS code. Podemos trabajar con ese ID de proyecto. Si desean registrarse, les daré unos minutos para hacerlo. Cuando se registren y vean, ya saben, entren a la aplicación, probablemente verán una pantalla vacía. Ya tengo algo de contenido aquí, pero si ven una pantalla vacía, está bien. Les mostraré cómo importar contenido en ese proyecto en un momento. Y por supuesto, mientras se registran, también pueden clonar el repositorio.

Watch more workshops on topic

AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Featured Workshop
Eve Porcello
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)
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
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.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
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 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
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
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
Top Content
WorkshopFree
Dev Agrawal
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.
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
React Summit 2023React Summit 2023
139 min
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

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 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
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.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
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.
El Nuevo Router de Aplicaciones Next.js
React Summit 2023React Summit 2023
27 min
El Nuevo Router de Aplicaciones Next.js
Top Content
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.
No sabes cómo hacer SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
No sabes cómo hacer SSR
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.
Cómo manejar correctamente los cambios de URL slug en Next.js
TypeScript Congress 2022TypeScript Congress 2022
10 min
Cómo manejar correctamente los cambios de URL slug en Next.js
Top Content
This Talk explains how to handle URL slug changes in Next.js by using the getStaticPaths and getStaticProps methods. It covers implementing redirects and provides a solution to eliminate the need for editors to perform additional steps. The approach involves tracking URL slug changes and issuing proper redirects. The speaker encourages the audience to reach out with any questions or experiences with handling URL slugs.
Eliminando BFFs con GraphQL y Next.js
React Advanced 2021React Advanced 2021
21 min
Eliminando BFFs con GraphQL y Next.js
Top Content
This talk discusses the challenges and benefits of using Backend for Frontends (BFFs) and microservices in software development. It highlights how Next.js can simplify the creation of BFFs and unify the gateway for microservices. The talk also emphasizes the advantages of Next.js API routes in simplifying the development, deployment, and maintenance of APIs. It showcases the implementation of a BFF using Next.js and API routes, and the extension of API routes in an executable way. The speaker also mentions launching a course on using Next.js API routes for building a serverless GraphQL API.