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

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

Vamos a necesitar esa base de código. Hay un comando Git clone. Y la URL del repositorio. Esto también te dará el paquete content.zip. Este es el que está aquí. Muy bien, te daré unos momentos para hacer eso. Yo ya tengo el repositorio preparado aquí. Por supuesto, si tienes alguna pregunta, no dudes en ponerla en el chat o en Discord.

Muy bien. ¿Alguien está listo para continuar? O preguntaré de esta manera. ¿Hay alguien que todavía se está registrando o clonando y necesita más tiempo? De acuerdo, creo que estamos bien. Si necesitas más tiempo, avísame. Siempre podemos esperar un poco más. Pero si ya tienes el repositorio, ese es un buen primer paso. Ahora, podemos pasar al primer paso de los seis para poner en marcha el proyecto. Entonces, lo que tienes ahora es el repositorio que es NextJS. Está utilizando TypeScript, está utilizando archivos TSX. Tiene varios archivos preparados que son solo de respaldo, para que no se compilen, pero deberíamos poder poner esto en marcha rápidamente. Primero que nada, esto es lo que ya te mostré cómo hacer. Te daré el ID del proyecto en un segundo. Ahora, si creaste tu propia cuenta, vas a necesitar estas dos cosas. El ID del proyecto y la clave de API de gestión. Encontrarás estas dos cosas cuando ingreses a la aplicación y vayas a Configuración del Proyecto. Hay un elemento de menú llamado Claves de API. Allí encontrarás el ID del proyecto, y un poco más abajo está la clave de API de gestión. Ahora, si tu proyecto es nuevo, necesitas habilitarlo. Solo haz clic en el interruptor aquí cerca del estado de actividad de la API de gestión y verás la clave de API personal aquí. Ahora, la clave de API personal está conectada contigo y tu cuenta de usuario. Así que anótala en algún lugar. La necesitarás en un segundo.

Y lo primero que necesitaremos hacer con estas dos cosas es importar el paquete ZIP. Ahora, hay una herramienta llamada gestor de plantillas de contenido. Voy a hacer clic en el enlace aquí. Vas a encontrar el enlace en el archivo de enlaces. También lo pondré en el chat para que no tengas que buscarlo. Muy bien. Entonces, cuando hagas clic en eso, verás una página como esta. Y estamos buscando importar data. ¿Verdad? Así que haz clic en importar proyecto. Aquí necesitas elegir el archivo. Este será el paquete content zip del repositorio. Ahora que lo encontramos, proyectos, contenido de conferencias.zip. De acuerdo. Y aquí necesitas agregar el ID del proyecto y la clave de API de gestión respectivamente. En mi caso, el ID del proyecto está aquí. Y la clave de API de gestión, un poco más abajo. Cópiala. Ponla aquí. Ahora, podemos hacer clic en preparar para importar. Se preparará todo. Y cuando veas lo que realmente se va a importar, puedes hacer clic en importar data. Ahora, esto es algo que no se puede revertir. Y mi proyecto ya tiene data, así que no voy a hacer También, haz clic en importar. Confirma que no se puede revertir. Y obtén todo en tu proyecto. Ahora, cuando la importación finalice, deberías poder ver el contenido en contenido y activos. Este es el repositorio de contenido. Deberías ver, aquí, también debería haber seis elementos de contenido. Verás que todos mis elementos de contenido están actualmente publicados. Es posible que otros permanezcan como borradores, pero también puedes hacer clic en la casilla de verificación grupal aquí y publicarlos desde aquí. ¿De acuerdo? Así que todo debería estar bien. Avísame si esto funcionó bien y luego podemos continuar. Objetivo de la consola del proyecto en la importación. Sí. Sí, está bien. No necesitas hacer eso. Solo necesitas elegir un archivo aquí y proporcionar estas dos claves. El proyecto de destino se cargará automáticamente. ¿De acuerdo? Así que solo proporciona las dos claves y deberías estar bien. Sí.

Sí. Sí. Sí. Además, si quieres facilitarte el trabajo, puedes hacer clic en esta casilla de verificación publicar idioma que publicará automáticamente todo cuando lo importes. Sí. Bien aquí. Perfecto. Muy bien, el contenido debería estar cargado. ¿Hay alguien que necesite más tiempo? Todo está bien. De acuerdo. Parece que todo está bien. Bien. Ahora tenemos el contenido ahí y ahora podemos pasar al segundo paso, que es configurar el proyecto en Visual Studio Code.

Primero que nada, si abres tu proyecto en Visual Studio Code, este es el repositorio tal como lo clonaste. Lo primero que debes hacer es agregar un archivo .n. El archivo .n debe tener solo una propiedad, o no una propiedad, sino solo una variable o un registro si quieres, que se llama content_project_ID y aquí colocas tu ID de proyecto. Sí. Lo mismo que usamos para el gestor de plantillas, lo encontrarás en la configuración del proyecto y las claves de API. Entonces, esto, también puedes obtenerlo desde la URL. Es el primer GUID en la URL. Y siempre obténlo de ahí y colócalo aquí. También voy a compartir mi ID de proyecto. Si quieres usar eso en lugar de tu proyecto, si no quieres registrarte, está bien. Puedes usar este ID de proyecto. Simplemente crea el archivo y coloca la variable content_project_ID en él. Ese es el primer paso.

El siguiente paso es agregar un script de NPM para generar los modelos de tipo de red sólidos utilizando el generador de modelos. Como mencioné antes, no quiero comenzar a escribir las clases o modelos por mi cuenta, porque el modelo de contenido es algo que vive en el headless CMS y tiende a cambiar. Si haces cambios o tal vez ejecutas un script de migración a través de la CLI y cambias el modelo de contenido, esta es una forma de obtener los cambios más recientes en tu proyecto y tenerlos fuertemente tipados. Lo que vamos a necesitar es este pequeño paquete. Creo que ya está en el proyecto. Déjame verificar. Si miras el package.json, ya está en las dependencias de desarrollo. No necesitamos hacer nada aquí. Solo necesitamos proporcionar un script aquí que pueda ejecutar esto automáticamente. Algo como generar modelos. Y aquí en la documentación en GitHub, encontrarás cómo funciona en realidad. Lo único que necesitas proporcionar es nuevamente el ID del proyecto y la clave de API. Estas son las mismas claves que necesitaste para el Gestor de Plantillas. Así que déjame ponerlo aquí. Entonces, content-generate project-ID. Solo voy a copiar eso aquí. Y la clave de API es la clave de API de gestión, esta aquí. Ahora, si estás usando Myproject, déjame copiar la clave de API de gestión. Solo la pondré en el chat. Ahora, esta clave, la voy a ocultar después. Esto te permitirá hacer muchas operaciones de crud en este proyecto específico. No tiene otras consecuencias, así que puedo compartirla contigo, pero por favor no rompas mi proyecto. Intencionalmente, las cosas suceden. Pero sí, esta es la clave, puedes ponerla aquí, y también es bueno no tener estos modelos generados en la raíz de tu proyecto, porque esto no solo genera modelos, sino también otros archivos que facilitan el desarrollo. Lo compartiré en un segundo, simplemente pondré aquí en el directorio de cambios modelos, así que voy a crear aquí una carpeta de modelos, donde vivirán todos los modelos y otros archivos generados. Por supuesto, puedes dejarlo fuera, pero luego se generará en la raíz y llenará el repositorio. Eventualmente, así es como lo haría. Pero siéntete libre de hacerlo a tu manera. Ahora, cuando lo tengamos así, podemos intentar ejecutarlo. npm run generate models, para ver si esto va a funcionar. Perfecto. Entonces ves que se generaron algunos modelos. Y veamos qué fue eso. Primero que nada, están los tipos de contenido. Tenemos varios tipos de contenido ahí. Veamos el de conferencia como referencia. Entonces aquí hay un tipo de conferencia que tiene campos para dirección, descripción, fecha de finalización, enfoque, fecha de inicio, URL de registro y otros. Esto se genera automáticamente, pero también obtenemos la descripción del proyecto. Cuando miras el proyecto y los tipos de contenido, verás que también hay una conferencia aquí. Si pasas por los componentes, hay una conferencia aquí. Entonces este es el mismo tipo de contenido y no necesitamos escribir literales de cadena porque también obtenemos el nombre de código generado, los nombres de código de los elementos generados y así sucesivamente. Entonces esto genera toda la estructura del proyecto en estos archivos, para que cuando estés, cuando estés componiendo tus consultas de contenido, no necesites escribir literales de cadena. Siempre puedes hacer referencia al campo que deseas utilizando esta estructura del generador. Así que avísame si no puedes ver esto si la exportación salió bien.

Y si obtienes una estructura similar a la que tengo aquí. Obtengo un error. OK, ¿qué dice el error? No existe tal archivo o directorio. Sí, eso también me pasó a mí. Hoy, simplemente elimina tus modules de nodo y ejecuta npm I nuevamente. Eso lo soluciona para mí. Oh, ¿eso soluciona el error? ¿Eliminar todos los modules significa eliminar todos los directorios? Sí, mira aquí. Entonces eso soluciona el error, y aquí, coinciden sus rutas. No solo solicitudes. Dejemos eso. Entonces aquí hay un parámetro, que será la madre y que no será un archivo o directorio que estamos seleccionando. Veamos si vemos un directorio. ¿Qué hará? ¿No apuntará a nada? Con dos parámetros, ID de proyecto y clave de API. El ID de proyecto es el ID de tu proyecto que obtuviste de la aplicación. La clave de API es la clave de API de gestión. Y es un poco larga, así que. De acuerdo, ahora, y lo bueno es que podemos ejecutar este comando tantas veces como quieras, sí. Si hay un cambio, simplemente puedes ejecutarlo nuevamente. Cambiará todos los modelos. Esto es muy útil incluso para la integración continua para traerlos fácilmente de vuelta a tu proyecto. Obtuve un error 403. Si obtienes un error 403, significa que probablemente no agregaste o agregaste incorrectamente la clave de API. Entonces tal vez quieras intentar copiarla nuevamente. Así que no estoy usando nada más, sí. Solo es este ID de proyecto y esta clave de API y se generaron los modelos. Bien. Si no se encuentra el comando de generación de contenido, sí, tal vez haya un error tipográfico en el script. Asegúrate de ejecutar lo mismo que creaste aquí. Y el contenido, esto es una generación de contenido no generación de contenido. Así que ese también es un problema. Entonces, generación de contenido. Y también debería estar instalado con otros modules de nodo. Así que no deberías, necesitas instalarlo por separado. Todavía hay un problema. ¿Qué dice ahora? Mismo error. No se encontró la generación de contenido. ¿Puedes darme un segundo? Oh, así que no es una API de suscripción. ¿Puedes verificar nuevamente que estás usando la API de gestión? Deberías habilitar la API de gestión aquí. Y usa la clave de API personal que debería estar disponible en tu plan. WAR1 y WAR2 son la misma clave de prensa estándar y puedes cambiar herramientas y parámetros para usar las formas que prefieras. Vamos a mostrar eso en nuestro ejemplo. De acuerdo, vamos a intentarlo. Vamos a comenzar desde los registros de llamadas. Permíteme ocultarlo porque no quiero que veas lo que estoy haciendo. Y los nombres de los parámetros están bien, clave de API e ID de proyecto. Si aún no funciona, tal vez intenta las credenciales que proporcioné para ver si funcionan. De acuerdo. Si no puedes cambiar el directorio, simplemente genera en la ruta y cópialo allí manualmente. No estoy seguro de por qué no puedes hacer eso pero sí, necesitas crear esa carpeta, por supuesto. Sí, crea la carpeta. Y si te dice que no se encontró el comando, entonces probablemente no tienes instalado el proyecto de generación de contenido, lo cual significa que no está en tus modules de nodo. Debería estar allí cuando ejecutes NPMI. De acuerdo. Si funciona con mis credenciales, simplemente mantén esos modelos en y déjalos así. No vamos a cambiar los modelos de todos modos. Así que está bien si los generaste desde mi cuenta, sí. Pero si puedes habilitar la API de gestión aquí, no hay ninguna limitación allí. Debería funcionar de la misma manera. Así que el ID de proyecto y la clave de API de gestión. Ahora, solo para que entiendas lo que acabamos de generar. Hay seis tipos de contenido. Uno de ellos es para la página de inicio y otro es para conferencia. Ahora te mostré el sitio web que tiene un montón de conferencias. Entonces realmente usamos el tipo de contenido de conferencia para almacenar el nombre, descripción, fecha de inicio y finalización y URL slug de una conferencia como React Advanced, GEMSSTECH con y otros. Y también hay una pestaña para lugares. Puedes ver eso en tus propios proyectos. Hay una pestaña de lugar con dirección y una foto del lugar. Ahora cuando miramos el contenido, este es el tipo de contenido. Entonces cuando volvemos al repositorio y miramos el contenido hay, déjame hacer esto más grande. Hay una página de inicio y hay cinco conferencias.

Hay una sección React Advanced London y así sucesivamente. Así que veamos esto, ves que ya hay algunos datos completados React Advanced London 2022. Este es el texto que obtuve de una página de inicio React Advanced. Se centra en JavaScript. Hay fechas de inicio y finalización y también hay un lugar aquí. Esta es la dirección del lugar y una foto del lugar. Entonces esto es algo que luego usamos en el sitio web. El sitio web. Genial. Ahora volvamos al código ahora que sabemos cómo se ve el modelo de contenido. Y el siguiente paso, creo que después de generar los modelos podemos intentar ejecutar el sitio. Así que simplemente haz NPM run dev y deberíamos ver algo de HTML que se muestra. Así que ejecutémoslo. De acuerdo. Deberías estar viendo lo mismo que yo en este momento, como una gran imagen de una conferencia algunos botones aquí, un menú. Y nada más. Básicamente. No es dinámico en este momento. Solo muestra los datos estáticos, pero sí no deberías ver ningún error o algo así. Solo unos pocos enlaces. Entonces, si ves eso, avísame que lo ves. Así estamos en la misma página y luego continuaré mejorando el sitio. Todo bien, perfecto. Entonces, si estamos en la misma página, podemos pasar a tareas más interesantes. Entonces, la primera necesitaría agregar realmente una resolución de texto enriquecido. Ahora, para entender por qué necesitamos hacer eso. Creé una página de inicio en el repositorio. Así que volvamos a la aplicación una vez más y echemos un vistazo al elemento de contenido de la página de inicio. Cuando abras eso, verás que hay un montón de componentes. Entonces hay un elemento de contenido llamado página de inicio, pero solo hay un campo llamado texto. Y hay un montón de componentes y como cinco de ellos. Ahora, cada uno de estos componentes representa una sección del sitio web. Entonces aquí, este es un componente de conferencia. Entonces muestra una conferencia. Tiene una conferencia vinculada y tiene una posición. Ahora, para entender cómo se modela el contenido, generalmente separamos los datos sin procesar y la representación visual de los datos. Entonces eso es lo que ves aquí. El elemento de contenido de la página de inicio se basa en un tipo de contenido también llamado página de inicio. Y se utiliza para la representación visual. Entonces aquí ves que estamos construyendo los componentes. Entonces aquí tenemos cinco componentes y estamos construyendo cómo se verá la página. Pero los componentes que están construyendo los cimientos de la página, no contienen ningún dato significativo. ¿Ves que la conferencia solo está vinculada aquí? No está directamente, así que no ves campos aquí que especificarían React advanced y otras cosas, pero solo definen los datos y la presentación visual. Entonces imagen a la izquierda, texto a la derecha. Y la conferencia en realidad está vinculada desde un lugar diferente. Esto realmente ayuda mucho con la reutilización de contenido. Por eso lo modelé de esta manera. Y ves que hay un componente de conferencia, hay un componente de imagen grande, hay un componente de tres conferencias. Todo se reduce a qué tan grande es el sitio y cuántos componentes visuales tienes en realidad. Ves que el componente de tres conferencias tiene tres conferencias vinculadas y el componente realmente lo requiere. Entonces ves aquí, necesita exactamente tres elementos y los elementos de contenido insertados están limitados a conferencia. Entonces también podemos limitar a los editores de contenido en términos de lo que pueden hacer en el sistema. Así es como construimos la página de inicio. Ahora lo que necesitamos hacer en la implementación es entender qué componente se muestra en qué lugar y luego mostrar el componente React correcto. Así que eso es lo que vamos a hacer en un segundo. Así que volvamos aquí. Y el primer paso es cambiar el nombre de los componentes en la carpeta de componentes de.backup a.TSX. Permíteme mostrarte a qué me refiero con eso. Entonces hay una carpeta de componentes y hay cuatro componentes que corresponden directamente a los componentes que acabo de mostrarte en el repositorio de contenido. Los nombré.backup porque dependen de modelos con tipos fuertes que no estaban en nuestro proyecto antes. Pero ahora que generamos todo, podemos cambiar el nombre de estos componentes a.TSX y hacer que todo funcione. Así que voy a hacer eso, simplemente voy a cambiar el nombre de estos cuatro a.TSX. Y es posible que debas ajustar las importaciones un poco. Si estás usando la carpeta de modelos, debería estar bien, pero tal vez estés usando diferentes carpetas, se llame de manera diferente o lo tengas en la raíz, eso está bien. Solo necesitarás ajustar estas importaciones. Así que te doy un segundo para hacer eso. De acuerdo. Muy bien. Entonces, si tus componentes tienen los nombres correctos y las referencias están ahí, no necesitamos esto, creo, déjame explicar un poco. Como la estructura HTML proviene de la tabla y la plantilla.

Entonces, ni siquiera entiendo estas clases, solo se ve bien. Eso es lo que buscamos. Pero lo que también sucede aquí es que cada componente depende de su propio modelo. Entonces, los componentes de conferencia dependen del componente de conferencia. El componente CTA es otro componente que hemos definido en el CMS, el modelo de componentes CTA. La imagen grande tiene básicamente un solo elemento que es la imagen, el modelo se llama componente imagen grande. Así que ves que hay una especie de mapeo uno a uno entre los componentes tal como los tenemos en el CMS. Entonces, conferencia, CTA, imagen grande y pre-conferencias, estos componentes, se mapean uno a uno a los componentes tal como los tenemos como componentes React. Y, por supuesto, aquí en los lugares correctos, simplemente mostramos los valores. Entonces, si todo funciona así, obviamente no será visible en ningún lugar, pero al menos deberías poder ejecutar npm run-def para no obtener errores de compilación. Así que las referencias deberían estar bien.

Oh, Aaron, aún no has probado los modelos. Content-generate-project-id, clave de API. Sí, se ve bien para mí. Entonces, si sigues obteniendo el mismo error, ¿has intentado eliminar los módulos de nodo y ejecutar npm i nuevamente? Eso suele resolver el problema. De acuerdo. Sí, también me pasó hoy. Y eso lo solucionó. De lo contrario, realmente no sé qué aconsejar aquí. Porque el error simplemente no tiene sentido. Genial, de acuerdo. Sí, lo que también puedo hacer es enviarte el proyecto terminado. Así puedes trabajar con eso. Sí. Intentaré hacer eso en el próximo... Cuando haya unos minutos, la próxima vez. Pero ahora mismo, déjame mostrarte cómo se verá en la página principal. Estos son los componentes, ¿verdad? Ahora mismo no son visibles en ningún lugar, porque en la página de inicio solo tenemos el diseño. Hay algunos elementos, pero no componentes. Y cuando ejecutamos el sitio... Creo que no lo estoy ejecutando ahora mismo, ejecuta esto. Entonces, cuando ejecutamos el sitio... Ves, solo está realmente el encabezado y el pie de página. Sí, no hay mucho en el medio. Entonces, aquí es donde queremos renderizar nuestros componentes. Este lugar aquí. Solo voy a poner Hola Mundo aquí, para que podamos ver dónde está realmente. Ves, este es el Hola Mundo que acabo de agregar. Entonces aquí es donde queremos renderizar los componentes. Y para eso, vamos a necesitar otro paquete de NPM. Dejé el enlace aquí en el archivo links.txt, y es el paquete Content-AI-React components. Así que vas a necesitar este paquete. Y primero necesitamos instalarlo. Solo voy a copiar y pegar esto. NPM i addContent-AI-react-components. Así que comencemos el proyecto e instalemos la cosa. Ahora este es un paquete que permitirá la resolución de texto enriquecido con casi ningún código. Ahora está ahí. Y cuando está ahí, podemos agregar aquí un elemento que se llama elemento de texto enriquecido. Y para eso, obviamente necesitamos el elemento de texto enriquecido. Sí, necesitamos obtener los datos de alguna manera aquí. Y para obtener los datos aquí, solo necesitamos descomentar esto. Esperemos que las referencias funcionen. Esperemos un segundo. Y necesitamos obtener algunos datos del CMS por primera vez aquí. Ahora, para obtener los datos del CMS, ya hay un servicio llamado servicio de contenido. Si quieres echarle un vistazo, es algo que ya usamos en producción. Crea un cliente de entrega, que es esencialmente la clase principal que obtiene datos del CMS. Y crea dos instancias, una para la recopilación normal de datos, otra para la vista previa. Esto no es algo de lo que quiero hablar ahora mismo, solo para que sepas que te da el cliente de entrega, que es el principal bloque de construcción del SDK. ¿Sí? Y actúa como un singleton. Entonces, lo que podemos hacer aquí, solo necesito una importación aquí. Puedo, como un props estático y para nuestra página de inicio. De acuerdo. Entonces, lo que esto hará es simplemente puedes escribir content service dot instance. Y la variable de vista previa proviene de un XJS. ¿Sí? Y eso no es algo que necesites manejar, solo dale la variable de Next JS y haz un Delta Delivery Client. Y cuando hagas eso, puedes comenzar a escribir las consultas de recopilación de datos. ¿Sí? Sin problemas. Tomará el ID del proyecto de contenido de la variable de entorno.

Por eso lo creamos hace un momento. Y aquí solo obtenemos un elemento de tipo página de inicio que tiene un nombre de código página de inicio. Y eso es todo lo que necesitamos. ¿De acuerdo? Solo queremos esa página de inicio con todos los componentes que te mostré hace un minuto. Y queremos propagarlos a nuestro componente de inicio. Así que eso es exactamente lo que hace este código. Y cuando tengas los data en su lugar, por supuesto, necesitamos ajustar el componente funcional de React aquí, porque también necesitamos obtener las cejas aquí. Así que vamos a data. Creo que se llama data aquí. Así que vamos a data aquí también. Y cuando lo tengamos aquí, simplemente podemos proporcionarlo a los elementos de texto enriquecido. Así que elementos y textos de data. Como mencioné, solo tenemos un elemento en este tipo de contenido, que es texto. Así que simplemente proporcionamos el texto aquí y decimos esto, y cuando ejecutemos esto, seguirás viendo lo mismo. ¿De acuerdo, todavía no hay componentes porque todavía necesitamos proporcionar algunos resolutores, pero te daré un momento para descomentar esto y corregir las referencias para que podamos obtener los data aquí. Y mientras espero, te enviaré el proyecto. Dame un segundo aquí. Déjame revisar. 16.16. 16.16. Muy bien, este es el Aaron. Este es el proyecto. Este es el proyecto terminado. Así que puedes copiar los modelos de allí y seguir si quieres. Si tienes como cinco componentes, la aplicación puede ser cloud, está perfectamente bien. Eso es lo que buscábamos. La cosa es que los data, como vienen en bruto desde el sistema, están en un elemento HTML llamado objeto. Y el SDK los transformará automáticamente en componentes. Así que si estás viendo eso, significa que los data están llegando y eso es algo bueno. Entonces, ¿todavía hay alguien trabajando en esto o esto está funcionando para todos? Si esto funciona, entonces podemos pasar a...

Estoy obteniendo un error de tipo, No se pueden leer las propiedades de indefinido, leyendo reemplazar. Vale, ¿qué reemplazo está haciendo eso? ¿Puedes ser más específico, por favor? Vale, si está haciendo el elemento de texto enriquecido, tal vez se solucione cuando proporcionemos los resolutores. Así que veremos. Lo veremos en un momento. Por ahora, dejémoslo ahí. Pero eso es bueno. Significa que todos estamos ahí. Tenemos el elemento de texto enriquecido en su lugar. Así que está bien. Lo siguiente que debes hacer es proporcionar un resolutor. Ahora solo hemos proporcionado los data al elemento de texto enriquecido, pero también necesitamos proporcionar una forma de averiguar qué componentes usar. ¿De acuerdo? Si miras el repositorio de GitHub de los componentes de React, hay un tutorial bastante bueno sobre cómo hacerlo. Ahora mismo solo vamos a necesitar uno para resolver, resolver elementos vinculados. Sí. Esos son los componentes que usamos. Y no va a ser tan complicado. Así que vamos a usar resolutores y estamos buscando un resolutor para elementos vinculados. Así que vamos a necesitar el elemento vinculado en la firma. También hay un elemento DOM y un ayudante de DOM a react. Si alguna vez los necesitas. No los necesitaremos hoy, pero están en el ejemplo oficial. Así que los mantendré aquí también. Ahora, lo que necesitamos hacer aquí es hacer un pequeño switch basado en el tipo de elemento vinculado. Estamos buscando el tipo de sistema de elementos vinculados, No estoy seguro de por qué no obtengo el sentido de Intel. De todos modos, solo necesitamos cambiar el tipo y luego, según el tipo que obtengamos, proporcionaremos los componentes respectivos. Así que en este caso, estamos buscando el tipo de contenido y estamos buscando componentes. Comencemos con el nombre de código CTA. Y esto es de lo que hablaba antes cuando generamos los modelos. Ves que estamos usando tipos de contenido, ese componente, ese nombre de código, todo está fuertemente tipado. Pero cuando ves lo que es eso, esto es solo un componente CTA. Este es solo el nombre de código del componente. Así que podríamos hacer esto y funcionará exactamente de la misma manera. Pero luego, cuando cambiemos el nombre de código del componente, la aplicación se romperá. Así que esta es una forma más segura de hacer lo mismo. Y en este caso, simplemente vamos a devolver el componente correcto. Entonces nuestro componente se llama CTA. Y por supuesto, necesitamos devolverle algunos data. Así que simplemente vamos a hacer... elemento vinculado. Y por supuesto, estamos usando TypeScript.

Así que tenemos que ayudarlo un poco. Así que componentes CTA. Y necesitamos importarlo, creo. Sí, aquí simplemente le decimos al elemento RichText que cada vez que haya un elemento vinculado de tipo Componente CTA, debe usar este componente. Sí, no hay ciencia espacial en esto. Solo el mapeo de los tipos de contenido tal como los tenemos en el CMS. Entonces este componente, que en realidad tiene un nombre de código componente, guion bajo CTA, que es exactamente lo mismo que usamos aquí, ¿verdad? Guion bajo CTA, y estamos devolviendo este componente. Y lo mismo va a suceder para todos los tipos de contenido aquí. Entonces componente conferencia, componente conferencia. Esto es un poco confuso porque estos son los modelos generados y estos son los componentes. Y probablemente hice un mal trabajo nombrando esos componentes pero solo para que sepamos, estos son los componentes, estos son los modelos que se generaron automáticamente. Luego está la imagen grande. Entonces, vinculado por ellos, sí, componente imagen grande. Y el último, finalmente son las tres conferencias. Otra buena cosa es que no tuviste que ir de un lado a otro en el CMS para encontrar los nombres de código, simplemente los tienes aquí. Entonces, y eso es todo. Por supuesto, podemos agregar aquí algo como throw new error, componente desconocido. tipo de sistema, pero podemos omitir esto. Solo en casos en los que, ya sabes, agregas un nuevo componente en el CMS y olvidas extender esta lista, pero cuando lo tienes así, déjame descartar esto. Ahora deberías poder ejecutar el sitio y finalmente ver los componentes y toda la página. Entonces, deberías ver algo como esto. React Advanced Londres, una imagen grande, tres conferencias, una más y la ciudad al final. Entonces, no sé si puedes ver eso o si todavía hay algunos problemas. No sé. Se ve bien, perfecto. Muy bien. Entonces, ¿alguien todavía está trabajando en esto? Avísame si debo esperar un poco más o podemos continuar. ¿Podrías mostrar las importaciones? Por supuesto, en la página principal. Allí, gracias, no te preocupes. Start, oh, no estoy usando yarn. ¿Tal vez esa sea la razón por la que no conozco ese error? Muy bien, genial. Entonces, sigamos adelante, para la siguiente parte. Entonces, agregamos el paquete npm, agregamos el elemento de texto enriquecido a la siguiente página, y resolvemos los casos para todos los componentes. Entonces, ahora lo que podemos hacer es agregar las dos cosas restantes, en cuanto al contenido, y luego llegaremos finalmente a los idiomas. Ya hay dos páginas preparadas para los detalles de la conferencia, para las listas de conferencias. Entonces, nuevamente, simplemente las vamos a renombrar de backup a TSX. Entonces, está en páginas y conferencia aquí. Hay un respaldo de Slack, así que simplemente cámbiale el nombre a .tsx, y el índice de respaldo es la misma historia. Ahora, creo que la página de índice también va a necesitar algunas referencias o algunas importaciones. Así que simplemente las voy a agregar. De lo contrario, debería estar implementado, así que está bien. Solo se comentó nuevamente porque necesitábamos los modelos. Y también lo dejé allí porque muestra la forma de obtener los elementos de conferencia aquí. Sí, obtiene todos los elementos de conferencia de un tipo específico y los ordena por fecha de inicio. Las conferencias que están más cerca de hoy aparecerán primero, por supuesto, a través de una promesa. En la página de Slack, dejé esto en blanco intencionalmente para que podamos implementarlo juntos, y también vamos a necesitar cambiar un poco esta implementación cuando agreguemos los nuevos idiomas adicionales allí. Entonces, en GetStaticPaths, para aquellos que no conocen Next.js, para tener páginas generadas estáticamente, Next.js te brinda dos funciones. Primero está GetStaticPaths, donde se supone que debes proporcionar todas las rutas en las que habrá una página. Sí, en nuestro caso, estamos viendo páginas slash conferencia slash Slack. Entonces, necesitamos proporcionar todos los Slacks que renderizarán una página. Entonces, en este caso, vamos a buscar todas las conferencias, así que voy a usar el servicio de contenido. Y aquí no hay vista previa, porque estamos ejecutando esta función durante el tiempo de compilación. Y durante el tiempo de compilación, no hay vista previa. La vista previa solo es el sitio de servicio renderizado, ¿verdad? Entonces aquí no hay vista previa. Solo estamos buscando el tiempo de entrega. Y estamos buscando elementos, conferencia. Eso es obviamente, solo voy a corregir la importación. Y va a ser tipo de contenido, nombre de código de conferencia. Y lo que también podemos hacer es limitar el parámetro de elementos. Entonces, podemos ver aquí que no queremos solo la URL slug. En esta función, efectivamente solo queremos la URL slug. No necesitamos ningún otro data. Si omites esto, obtendrás el contenido completo del elemento, lo cual puede ser un poco pesado en cuanto al rendimiento si estás trabajando con elementos de contenido grandes. Entonces, podemos hacerlo de esta manera, URL slug. O lo que podemos hacer es, nuevamente, usar los tipos de contenido, conferencia, elementos, URL slug, y usarlo de esta manera, para evitar el retorno de cadena. Y necesitamos proporcionar una matriz, creo. De esta manera, y luego podemos hacer to promise. Y luego podemos devolver el slug a next.js. Ahora, nunca sé la sintaxis, así que déjame ver la documentación de next.js. Entonces es este. En nuestro caso, el único parámetro que tenemos en el camino hacia esta página es el slug.

Sí, no hay nada más. Si tenemos varios parámetros en la ruta, entonces tendríamos que proporcionar todos ellos aquí. Solo tenemos uno, que es el slug. En este caso, va a ser slug, digamos que va a ser React Advanced. Y va a haber otro parámetro, va a haber otro slug, va a haber un Jamstack por ejemplo, y así sucesivamente. Vemos el patrón aquí. Necesitamos proporcionar la matriz de rutas donde proporcionamos los parámetros que corresponden al nombre de la página.

En realidad, voy a hacer esto usando una función map. Y en el pasado, esto me llevó un tiempo entenderlo bien, así que déjame copiarlo del otro proyecto, para no perder demasiado tiempo en esto. Así que, solo un segundo......... Muy bien, ahí vamos, así que vamos a usar la conferencia o en realidad es conferencias, esto es múltiple luego esto es solo el objeto de respuesta, ¿verdad? Entonces, necesitamos ir a data e items. Um sí, necesitamos esperar eso, por supuesto. Y luego, podemos ir a oh y sí, podemos hacer un map. Entonces, tenemos una conferencia y luego creamos el objeto como lo necesitamos. Sí, este es el objeto que necesitamos, params y slug, así que lo voy a poner aquí. Entonces, necesitamos params, slug y el slug va a venir de los elementos de la conferencia, así que confElements, urls, slug y el valor. Y eso debería ser todo, creo. Y luego fallback-false, puedo explicarlo en un segundo pero ahora mismo para que sepas, debería haber hecho el await aquí también para no tenerlo aquí, así que todas las rutas, ahora tenemos conferencias data items estamos mapeando ese objeto y solo obtenemos el elemento de url slug como lo especificamos en los elementos parámetro, eso es lo único que necesitamos y Next.js realmente quiere que lo proporcionemos en la forma de un objeto que tiene una propiedad params y una propiedad slug donde proporcionamos el url slug. Entonces, básicamente así es como debería funcionar, cruzando los dedos y fallback false significa que si hay otra ruta que el visitante agrega, entonces con fallback false estamos diciendo que si la ruta no está incluida en getStaticPaths, no existe, por lo que Next.js puede mostrar 404 directamente. Otras opciones incluyen true o blocking, que es en casos cuando la ruta no se proporciona en getStaticPaths, aún se procesa en getStaticProps en ese caso pero estamos usando false, así que si no se proporciona aquí, irá directamente a 404. Entonces, así es como podemos implementar getStaticPaths, nuevamente, estamos obteniendo todos los elementos de conferencia del CMS, solo estamos obteniendo el campo de URL slug del tipo de conferencia, y en realidad lo estamos mapeando en un objeto que es requerido por Next.js donde solo proporcionamos los slugs. Entonces, en este caso, son cuatro o cinco conferencias y sus URL slugs. Y cuando terminemos con esto, en realidad vamos a getStaticProps y esa función se llama para cada slug individual, para cada ruta individual que proporcionamos. Y el trabajo de esta función se basa en el slug que proporcionamos y está en los parámetros, en función de ese slug deberíamos obtener los datos de cada una de esas conferencias. Entonces getStaticProps generalmente devuelve algo, en este caso va a devolver, llamémoslo IProps, y defínelo en algún lugar. Puedes encontrarlo aquí para ejemplo, en nuestro caso, IProps. Y va a devolver un solo campo de datos de conferencia. Entonces, un campo de tipo Conference y esto es lo que el componente va a recibir al final. Así que lo voy a poner aquí también, para que lo tengamos, lo tenemos fuertemente tipado. Y ahora se queja de que no estoy realmente exportando nada. Así que lo voy a hacer en un segundo. Pero solo para que sepas, solo necesitamos completar este campo. Así que lo voy a llamar de la misma manera. Content service instance, delivery client. Y estamos buscando, esta vez estamos buscando solo un elemento. Así que conferencia. Nuevamente, el tipo va a ser conferencia. Y necesitamos agregar un filtro de igualdad para el URL. Así que en este caso, va a ser URL slug. Y en realidad tenemos que hacer elementos de URL. ¿Qué? Porque el filtro de igualdad también funciona para los campos del sistema. Sí, así que necesitamos proporcionar el prefijo del elemento. Y el slug de los padres. Creo que necesitamos una cadena. Luego podemos limitarlo y proporcionar los data. Ahora podemos devolver en data items. Cero, por supuesto, olvidé el await aquí de nuevo. Y eso es todo. Entonces todavía hay algo mal. Vista previa no asignable a las propiedades estáticas. Resultado. Hiperops completo. O tal vez necesito esto. Otro objeto más. Bien, nuevamente, estamos esperando que el servicio de contenido nos dé nuevamente un elemento de tipo conferencia. Necesitamos hacer un filtro de igualdad porque necesitamos hacer coincidir los data con el URL slug que estamos procesando. Lo estamos limitando a un parámetro y simplemente devolviendo el data en este objeto data al componente. Vamos al componente. Ves que estoy entrando aquí con el nombre de la conferencia, así que simplemente voy a hacer una conferencia igual a data data como conferencia. Y deberíamos estar listos para continuar. De acuerdo. Así que necesitaré un minuto para hacer lo mismo. Por supuesto, aquí no necesito escribir el URL slug, puedo usar nuevamente contentTypes.conference. mínimo. Esto fue más rápido. De acuerdo. ¿Con qué podemos reemplazar elementURLSlug? Sí. Entonces, si quieres reemplazar eso, me gusta usar las comillas invertidas, porque simplemente lo hace un poco más agradable. Entonces, en lugar del URL slug, el literal de cadena, puedes agregar el contentTypes.conference URL slug.

Sí, de esta manera, si esto cambia en el futuro, tu código seguirá funcionando. Lo único que permanece aquí es el elemento y, en realidad, en la producción del proyecto Next.js, tenemos esto en el método auxiliar para tenerlo en un solo lugar y usarlo en todas partes. Así que espero que esto tenga sentido. Si necesitas que te explique nuevamente el getStaticProps sobre el modo de representación de esta página, avísame. Definitivamente puedo hacerlo. Esto es una de las cosas más difíciles para los principiantes en Next.js, entender cómo funcionan estas funciones y cuándo usar cada una. Y cuando terminemos con esto, pasaremos a la siguiente parte.

Creo que en este momento, cuando ejecutes npm run dev, deberías ver que todo funciona. Déjame ver. Cuando hago clic en mostrar ubicaciones, deberíamos ver la página de índice de la conferencia. Y mira React Advanced London. Imagino que va a. Wow. La primera sección. ¿Cómo es posible? ¿He cometido un error en algún lugar? A dondequiera que vayamos, la intersección. De acuerdo. Debe haber un error con los datos en algún lugar. Entonces, estamos viendo conferencia igual a filtro... El Slack realmente funciona. Lo único que estoy haciendo mal es el data, lo que significa que está obteniendo el primer data y no... Entonces, debe haber un problema aquí. Debe ser elements, no element, sino elements. Veamos si... Sí, ese era el problema. Un pequeño error tipográfico allí. Elements con una S al final. ¿Hubo algún cambio en layout.tsx? No, no creo. No hasta ahora. Vamos a cambiarlo cuando agreguemos los idiomas, pero aún no ha habido cambios. X-UnexpectedTokenLayout. Se esperaba la configuración defier de ExpectedJSX. No estoy seguro de dónde vino eso. De acuerdo. ¿Funciona esto para todos? Avísame si aún tienes dificultades. De lo contrario, seguiremos adelante. La propiedad elements no existe en el tipo IProps. Sí, ¿puedes asegurarte de tenerlo así? Entonces, la interfaz solo sirve para definir los datos y la conferencia, nada más. Sí. Y esto es solo una cosa a prueba de futuro. Sí, si no tienes conferencia, probablemente podamos ponerlo aquí directamente. Sí. Esto es solo porque en producción generalmente obtenemos múltiples campos aquí y solo uno. Luego los datos. Sí. Genial. De acuerdo. Con suerte, todos estamos ahí. Déjame ver si me he perdido algo. Entonces, obtenemos funciones getStaticProps y getStaticProp. Hicimos eso. Y verificamos que el sitio funcione con npm run dev. Eso debería funcionar bien. Entonces, finalmente podemos llegar a los idiomas. Ahora, finalmente tenemos el sitio en funcionamiento. Así que podemos agregar algunos idiomas a eso. Y hay dos partes en esto. Primero, es la implementación. Entonces, podemos agregar los idiomas aquí en Next.js. Luego está el contenido. También necesitamos agregar idiomas a nuestro contenido. Así que empecemos con eso, en realidad. Cuando vayas a la configuración del proyecto de tu proyecto, hay un elemento de menú llamado localización, donde puedes definir los idiomas de tu proyecto. ¿Sí? En este caso, es el idioma predeterminado del proyecto. Así que solo voy a cambiar eso a inglés y poner un nombre de código, ens. Pero no tiene que ser el código del idioma. Sí, esto puede ser lo que quieras. A mí me gusta mantenerlo como un código de idioma porque es algo que la gente entiende. Así que guardemos eso. Y voy a crear los dos nuevos idiomas.

Creemos la versión en checo, con el nombre de código cscz, que se basa en inglés. Y otra versión que sea, digamos, en alemán, que también se basará en inglés. Entonces, podemos definir a qué idioma se basará. Será en inglés, el nombre de código será deat. Entonces, será en alemán para Austria. Entonces, cuando tengas estos dos idiomas agregados.

Oh, se alcanzó el límite de idioma para un idioma. Está bien, solo mantén uno adicional allí. Sí, está bien. Es un poco para la cuenta gratuita, ¿verdad? Pero si te registraste por primera vez, deberías obtener el archivo de funciones completo al menos durante un mes. De todos modos, un idioma está bien para lo que necesitas. ¿Sí? Cuando agregues estos dos idiomas y vuelvas al contenido, lo que verás aquí es el menú desplegable de idiomas que muestra las variantes de idioma disponibles. Y para, veamos la página de inicio. Cuando abras los elementos de contenido y cambies a otro idioma, como checo o alemán en este caso, verás que no está traducido. Puedes copiar el contenido de otro idioma, o puedes comenzar a trabajar en él desde cero. Así que simplemente voy a copiarlo del inglés. Pero no es tan simple como eso. Entonces, verás, antes estaba hablando de componentes visuales. Ahora, cuando creo la página de inicio en un idioma diferente, solo crea los componentes en el idioma diferente, ¿verdad? Entonces, el contenido vinculado, como las conferencias aquí, todavía no está traducido. Y si lo dices así, el elemento parecerá que no está ahí porque está en un idioma diferente y estás solicitando una verificación, pero la versión verificada no está ahí. Entonces, esto es algo de lo que debes tener cuidado porque esto solo, nuevamente, crea los nuevos componentes. Podemos, por supuesto, cambiar esto. Permíteme poner aquí un poco de texto que probablemente nadie entenderá. Sí, puedo cambiar el texto aquí, pero cuando estos elementos no están traducidos, no los veré en esta variante de idioma. Entonces, nuevamente, esto se puede traducir. Voy a poner aquí, czop al final para no tener que perder tiempo en esto, pero sabemos exactamente que está traducido. Así que permíteme publicar esto. Y también vamos a traducir algunas de las conferencias. Entonces, podemos copiar nuevamente de otro idioma, del inglés. Ahora aquí, lo que podemos hacer es cambiar también las URL. Entonces, si quieres cambiar, como en un idioma diferente, si necesitas tener diferentes URL, también puedes hacerlo aquí. Así que esto es un react-advanced-mandarin. Así que pongamos aquí czop al final nuevamente. Muy bien, bueno, publiquemos esto. Y agreguemos otro, como de las tres conferencias, al menos una, esta, por ejemplo. Correcto. Y, por supuesto, puedes jugar con esto de la manera que quieras aquí, o puedes dejar todo sin traducir, pero entonces no verás ningún contenido. Entonces, así es como podemos crear una nueva versión, una nueva versión de idioma del elemento de contenido. Esto a veces es un concepto un poco diferente a lo que tienen otros renderizadores, pero en realidad tratamos el elemento de contenido como un contenedor y siempre trabajamos con las variantes de idioma. Entonces, incluso cuando estás en el idioma predeterminado, lo que estás viendo son las variantes de idioma, no el elemento de contenido en sí, sino su variante. Correcto, así es la parte de contenido. Así que esto es fácil, solo haciendo clic en los elementos y traduciéndolos. Ahora, cuando volvemos a Next.js, tienes prácticamente dos opciones aquí. Permíteme abrir la documentación de Next.js. Sobre I18N. Oh, no es la página que estaba buscando. Hay un middleware de Redux, no. Oh, esta es la página, sí. ¿O no? Permíteme verificar los enlaces. Creo que lo puse en los enlaces. Sí, aquí está. Entonces, en los enlaces está el último enlace del archivo, sí. A veces es más fácil usar Google para encontrar cosas en la documentación. Entonces, en realidad tienes dos opciones. Una opción es usar los dominios. Entonces, tienes un dominio diferente para cada idioma diferente. Entonces, en mi caso, sería example.com y example.cz. Y luego puedes definir la configuración regional predeterminada para cada uno de esos dominios, lo cual no es realmente conveniente cuando estás usando localhost, ¿verdad? Entonces, en realidad vamos a hacer esto en su lugar, donde en realidad vamos a tener la configuración regional como la primera carpeta de la estructura de URL. Entonces, permíteme cambiar de nuevo a la configuración de next. Y porque estamos usando TypeScript, la configuración se ve un poco diferente a lo que sugiere la documentación, pero simplemente voy a poner I18N, Objeto de Internacionalización, y cosas de configuración regional, sí, configuración regional y tenemos ENUS, Cs, Cz, y también tengo DEAT, creo. Lo importante es que estas configuraciones regionales deben corresponder a los nombres de código de los idiomas como los defines en el contenido. No tiene que ser así, pero simplemente te facilita mucho la vida si lo hacen, sí. Entonces tengo ENUS, Cs, Cz, DEAT en configuraciones regionales en I18N y luego necesitas definir una configuración regional predeterminada, que, en mi caso, es ENUS, así que puedo eliminarlo de aquí. Esto siempre va a ser la configuración regional utilizada para la raíz de tu sitio web. Entonces, las URL que leen example.com slash conference slash Jamstack Confer, React advanced, esas son las que están en la configuración regional predeterminada. Si quieres, incluso la configuración regional predeterminada, si quieres que esté bajo slash EN-US slash conference y así sucesivamente, hay una forma de hacerlo con el middleware, pero no es compatible de forma nativa, así que es más una solución alternativa, sí. Entonces, esta es la forma en que Next.js realmente quiere que lo usemos. En realidad, estoy bien con tener la configuración regional para EN-US ahora. Así que creo que eso es todo lo que necesitamos definir aquí. Sí, sí, sí.

Entonces, error especificado, sí. Así que necesitamos definir la configuración regional predeterminada aquí. Eso es lo que estaba diciendo justo ahora. Así que guardemos eso. Muy bien, sí, es posible que tengas razón, sí. Sí, también debe estar allí. Tienes razón. Así, como esto. Perfecto. Entonces, cuando lo tengamos así, podemos ejecutar NPM run-dev, ver el sitio web. Es hora de ejecutar NPM run-dev. Pregunta, ¿tienes una buena forma de probar el enrutamiento basado en dominios localmente? Buena pregunta. ¿A qué te refieres con probar? ¿Ejecutarlo en tu propio o ejecutar pruebas de Playwright en ellos o algo así? Prueba ese ejemplo, sobre FR que se traduce a francés. Sí, como en ese caso, creo que solo necesitas jugar con tu sistema. Para que, ya sabes, redirija los dominios a tu lado. Siempre puedes construir el sitio y alojarlo en algún lugar bajo diferentes dominios. Depende del sistema operativo. Solía tener Windows donde era muy fácil donde solo tienes el archivo hosts. Ahora estoy en un Mac y no tengo ni idea de cómo lo haría en Mac. Pero supongo que no es tan difícil. Si quieres hacerlo, ya sabes, por tu cuenta, si quieres hacerlo automáticamente, supongo que sería un poco más complicado. Sí, slash etc slash hosts. Así que no debería ser tan difícil. Perfecto, ahora que estamos en el local host 3000, sorprendentemente, nada ha cambiado. Sí, el sitio web sigue viéndose igual. Sin cambios, no hay cambios allí.

Como necesitamos ejecutar, o necesitamos ajustar un poco la implementación para reflejar realmente estas cosas. Si hago algo como slash cs cz, seguimos viendo lo mismo. Sí, y si hago cs z slash conference, esto todavía es compatible, pero cuando hago algo como slash jams stack o no jams stack, conf en realidad, creo que esta es la URL correcta Slack, vamos a obtener un 404 porque necesitamos ajustar la función get static paths para ver si el idioma está ahí. Así que intentemos hacer eso. Déjame ver en la presentación, si me perdí algo, proyecto de contenido, trajimos algo de localización, elementos de contenido localizados. Sí, así que necesitamos agregar un parámetro de idioma, perfecto. Entonces, cuando tienes los proyectos configurados de esta manera, lo único que necesitas hacer es localizar los lugares donde hay consultas de obtención de contenido. Como ahora mismo estoy en una página index.tsx y necesitamos agregar aquí un parámetro de idioma. Un parámetro de idioma espera un nombre de código de idioma como lo definimos en el contenido. Por eso dije que es beneficioso tener las configuraciones regionales definidas de la misma manera que tenemos los nombres de código en el contenido porque de esta manera no necesitas hacer una asignación. Simplemente puedes definirlo tal como viene de Next.js. Y en getStaticProps, en realidad obtienes el local actual utilizado en la firma. Así que solo necesitas agregar aquí, params.preview.endlocal, y ponerlo aquí, y guardarlo. Así que ahora mismo, creo que también necesito reiniciar el sitio porque cambié la configuración de Next. Pero ahora, cuando vamos a la página de inicio, cscsat, deberíamos ver algunos textos marcados aquí. Sí, esta es una forma fácil de propagar el idioma seleccionado en las consultas de obtención de contenido. Y ahora ves que solo tenemos una conferencia aquí. Tenemos algunas etiquetas marcadas y todo, pero ves que solo se muestran los elementos traducidos aquí. Entonces, si quisieras mostrar todas las conferencias, tendrías que traducirlas todas al idioma seleccionado. Por supuesto, si quisieras mostrar también las versiones de respaldo, podrías hacerlo. Pero el sistema no lo hace automáticamente. Así que tendrías que ajustar las consultas de contenido de manera más extensa para obtener ambas versiones de idioma. Y vamos a hacer esto en todas las consultas. No solo en el índice, sino también en el índice de conferencias. Así que la misma historia aquí, también vamos a obtener el local aquí. Parámetro de idioma. Y aquí en GetStaticPath va a ser un poco más complicado. La razón es que si obtenemos los elementos de conferencia y definimos aquí el parámetro de idioma, no obtenemos un local aquí. Solo obtenemos todos los locales. La razón es que durante el tiempo de compilación no tenemos ni idea de qué versión de idioma se va a mostrar, ¿verdad? Entonces Next.js no puede darnos un local porque necesita renderizar básicamente todos ellos. Así que solo obtenemos todos los locales aquí. Pero lo que sucede es que si no especificas el parámetro de idioma en la consulta de obtención de contenido, solo te dará el idioma predeterminado. Y en este caso necesitamos obtener todos los idiomas, no solo el predeterminado, ¿verdad? Porque le estamos diciendo a Next.js que estos son todos los espacios de URL donde habrá una página. Así que es un poco complicado, ¿verdad? Necesitamos ejecutar esta consulta tantas veces como tengamos locales. Así que esa es la solución definitiva. Así que solo vamos a hacer un pequeño cambio aquí. Y voy a trabajar con los locales tal como los tengo. Así que solo voy a hacer un bucle for-each aquí. Y en realidad no creo que pueda hacer await de esta manera. Así que solo voy a tener que hacer un ciclo for aquí. Locals length. Y solo poner esto aquí. Vamos a poner esto, vamos a llamarlo data. Y aquí podemos hacer un parámetro de idioma porque ahora solo tenemos uno.

Así que podemos hacer locales e índice. Y luego, si ahora esto también es complicado porque si lo hacemos para el local alemán, la API de entrega de contenido nos dará también las versiones en inglés porque configuramos el respaldo completo allí. Así que en realidad también necesitamos filtrar duplicados. Así que simplemente voy a hacer esto, si encuentra conferencias y basarlo en el ID. Oh, espera, primero necesito hacer un data para cada uno. Hago planes para cada uno y puedo hacer la condición. Así que si en realidad, si la conferencia ya está ahí, entonces el ID del sistema es el mismo. Y esto también es complicado porque el ID del sistema es del elemento de contenido, no de la variante de idioma. ¿Verdad? Así que también necesitamos hacer esto. C el idioma del sistema es el mismo que el idioma del sistema. y vamos a invertir esto. Entonces, si esto no es verdadero, vamos a agregar esto en las conferencias. Buscando mi y una vez que esto esté terminado, deberíamos obtener todas las URL que sean únicas y también tengan las localizaciones correctas. ¿Qué hay de mal aquí? Oh, un corchete.

Y lo siguiente que debemos hacer es, bueno, ya no tenemos las data y los elementos de las conferencias. Esto es una matriz. Y lo que podemos proporcionar aquí es con los parámetros, también podemos proporcionar la localización, que en este caso va a ser conf system.language. Nuevamente, el nombre de código es el mismo que la localización. Así que funciona en ambos sentidos. Sí, de todos modos no necesitamos mapearlo. Y en este caso, Next.js sabrá que en esta URL, esperamos un elemento con este idioma. Así que este fragmento de código debería funcionar. Y, por supuesto, también necesitamos ajustar getStaticProps. Así que necesitamos la localización aquí. Y poner aquí el parámetro de idioma. Localización. Entonces, nuevamente, necesitamos hacer la consulta de recolección de data para todas las localizaciones. Y luego hacer un poco de manipulación para obtener solo las rutas únicas aquí. Y localizaciones únicas. Y luego creo que deberíamos estar listos para continuar. Déjame ver. Entonces, si hacemos clic en la sección definer aquí. Entonces ves que en la parte inferior va a Conference.cscz. Y la página se renderiza y se verifica. Así que esto parece funcionar. Verifiquemos la versión en inglés. Pero no se hizo ningún cambio allí. Así que debería seguir funcionando normalmente. Y todavía funciona normalmente. Así que esto tiene sentido. Es un poco, no es ideal, pero es la combinación de la API y los requisitos de Next.js. Así que cumple con su función. Eso es lo importante.

Muy bien, ¿alguien más lo ha logrado además de mí? Estoy obteniendo un error de información completa cuando inicio el programa. No, estoy seguro de que funcionará. Estoy obteniendo un error 404 cuando hago clic en el enlace. Si estás obteniendo un error 404, significa que la ruta estática no recibió la ranura de URL. Por eso te redirige al error 404. Así que podría valer la pena verificar qué obtienes en esta matriz aquí. Desafortunadamente, y eso es una de las cosas que más extraño de Gatsby. Como cuando te encuentras con un error 404 en Gatsby, te mostraría todas las rutas generadas donde hay páginas. Nex.js simplemente no tiene esa función. Es algo que me encantaría tener porque facilita mucho la depuración. Desafortunadamente, aparentemente no hay una forma fácil de llevarlo allí. Así que solo tenemos que conformarnos con lo que tenemos. Oh. Error de referencia data no está definido. ¿Cambiaste esto? Oh, elemento de texto enriquecido. Oh, en ese caso, si estás en una página de índice, significa que probablemente no hay una página de inicio en la localización que definiste. Y probablemente no hay contenido allí. ¿Has creado una nueva versión de idioma de esa página de inicio? Porque si no lo has hecho, debería darte la versión de respaldo, que es el inglés, lo cual sería bueno. Si lo creaste, debe tener algún contenido. ¿De acuerdo, lo publicaste? De acuerdo, entonces deberías poder obtener eso con el idioma aquí. Lo último que se me ocurre es la localización, si realmente la tienes igual. Porque si hay un error tipográfico, esto va a devolver un 404. Y si esto es un 404, entonces no obtienes el elemento. Y aquí es donde obtienes data de objetos no definidos, así que eso tendría sentido. Para ser honesto, hoy por la mañana, tuve un pequeño error tipográfico y no pude resolverlo durante media hora. Así que el switch de casos no se mostrará. No, así que estás obteniendo un error aquí. Si data no está definido, ni siquiera llegas al switch porque falla aquí.

De acuerdo. Pero por supuesto, si el interruptor aquí arrojara un error incluso solo en el caso de que haya un componente no definido, lo cual no debería ocurrir en este punto porque no hemos agregado ninguno. Muy bien. Les daré unos minutos más. Luego enfrentaremos la última tarea de hoy, que será agregar el interruptor de idioma que sea consciente del contexto, pero eso es como una guinda encima. Next JS lo hace realmente fácil de hacer.

Si presionas el enlace de una conferencia que no ha sido traducida, ¿verdad? Entonces, en la versión en inglés, eso funciona porque el enlace está en la versión predeterminada y pasa por la URL que está fuera de la versión en inglés. Si estás en una versión de idioma diferente, solo deberías ver conferencias que estén traducidas. Solo deberías ver conferencias que estén traducidas. Y en realidad van a la Conferencia Defintersection de CSS que existe para que eso funcione. ¿Podrías mostrar la función getStaticPaths nuevamente? Sí, por supuesto. Déjame ver. Aquí está. De acuerdo. Si vas a la página de conferencias, de acuerdo. Oh, sí, aquí obtienes todas ellas, ¿verdad? Aquí no va a funcionar porque va a CZ/conference/content AI Horizons y no hemos proporcionado una ruta para eso. Así que esto dará un error 404. Sí, en este caso tendríamos que cambiar el índice para mostrar solo como podemos hacer aquí. También podemos limitar esto. Podemos decir que el sistema.language siempre debe ser el locale. En este caso, solo obtenemos aquellos que están traducidos. Así que depende de lo que queramos hacer. Si quieres mostrar todas las variantes predeterminadas también, entonces también puedes omitir esto y tendrías que cambiar las URL. En caso de que sepas que el locale actual es diferente del sistema.language, en ese caso tendrías que omitir el CSS de la URL. Y en ese caso, también puedes definir aquí que esa conferencia tendría aquí como una nota solo en inglés o algo así. Así que tendrías que verificar el sistema.language con el local aquí. Sí, así que depende de lo que realmente quieras hacer. Pero sí, para que sea consistente, tendríamos que agregar el sistema.language y solo mostrar las conferencias que estén traducidas.

¿Necesito contenido publicado en los seis elementos de contenido? No, en realidad no, solo en aquellos que realmente quieras traducir. Sí, si estás bien con mostrar solo algunos de ellos. ¿Tiene sentido? Avísame si tienes alguna otra pregunta. Sí, de acuerdo, genial. Sí, siempre depende de lo que realmente quieras mostrar. Sé que en algunos ejemplos, en realidad usamos, como estaba explicando, una pequeña nota que informa al lector, `oye, este contenido solo está disponible en un idioma diferente`, porque en el momento de la compilación, sabes esto. Tienes esta información, por lo que puedes actuar en consecuencia, o simplemente puedes ocultarlo. Depende de ti. Así que voy a seguir adelante y mostrarte. Faltó la nota al principio de la conferencia, está bien. Sí.

Este es uno importante. ¿Cómo sé que está usando mis variables de entorno? ¿Te refieres a tus variables de entorno? Bueno, realmente no hay otra forma de obtener los data a menos que proporciones la variable de entorno porque para obtener los data, debes proporcionar el ID del proyecto y el ID del proyecto se consume aquí en el servicio de contenido. Así que podemos echar un vistazo a eso aquí. Por supuesto, también puedes crear el cliente de entrega por tu cuenta aquí. Puedes hacer post client equals new delivery client y puedes construirlo aquí. Sí. Simplemente no es conveniente porque necesitas el cliente de entrega en muchos lugares. Así que es más fácil crear una instancia de él y luego usarlo en todo tu proyecto. De acuerdo, así que creo que podemos pasar a la última cosa que es el selector de idioma. No tengo claves de API contemporáneas. Sí, yo tampoco. No te preocupes, está bien. No necesitas hacer eso. Solo en caso de que necesites la vista previa pero no hemos trabajado con vistas previas así que no deberías necesitarlo. Así que pasemos al selector de idioma. Ahora, siempre necesitas definir un lugar donde vivirá el selector. Para este ejemplo, decidí ponerlo aquí en el menú bajo contactos. Así que simplemente editaremos los elementos del menú SMU. Y la forma en que puedes hacerlo es extendiendo un poco esto. Y déjame mostrarte la documentación. Porque en realidad es proporcionado por el enrutador. Uh, déjame encontrarlo. Use router, router, ¿dónde está, creo que puedo verlo. Um. Ahí está, ¿verdad? Así que podemos acceder a la información más básica sobre los locales y lo que está disponible y lo que está actual, usando la función use router. Entonces, en realidad podemos obtener estos tres, locales y local predeterminado. Como lo harías con cualquier otra cosa que necesites del enrutador.

Entonces, locales, locales, utiliza el enrutador. Ahora obtenemos, esto es prácticamente un array de todos los locales que has definido en la configuración de Next.js. Así que básicamente obtienes esto aquí y este es el actual. Por lo tanto, esto facilita mucho la creación del selector, ¿verdad? Aquí simplemente haríamos locales, filtrar, y queremos todos los locales que no sean el que se está utilizando actualmente. Porque si estamos en la versión en inglés del sitio, probablemente no mostraremos el botón de inglés, ¿verdad? Así que filtraremos todo y haremos un mapeo a un enlace simple donde definimos el locale al que queremos cambiar. Y luego, por supuesto, podemos poner aquí, L y se queja porque también le gusta tener una clave. Y eso es todo lo que necesitas hacer. Y cuando vuelvas al sitio, también verás, verás que ahora tenemos el ENUS. Así que tenemos el D-E-A-T. Hago clic en el ENUS. Vuelve a la versión en inglés y veo la versión en checo y alemán. Ahora, por supuesto, esto no es ideal porque nadie quiere cambiar entre idiomas utilizando los locales. Así que lo que hice es crear una pequeña función que simplemente traduce el locale en una cadena legible por humanos. Llamémosla localeToString. Algo está mal. No me gusta esto. Prefiero hacerlo de esta manera. Y simplemente haría el switch aquí para el locale. Caso, voy a activar las etiquetas agradables. Y caso dit, alemán. Hey. Sí, y podemos hacer eso aquí. Sí, no, esto se ve mucho mejor. Así que podemos cambiar a checo, inglés, alemán. Como queramos. Solo muestra los idiomas que no son el actual. Lo cual, sí, voy a verificar, ahora el idioma checo, correcto. Y también podemos mejorar eso cuando vas a conferencias, por ejemplo, y luego cambias el idioma. Te lleva de vuelta a la página de inicio. Así que también podemos mejorar esto agregando aquí asPath. Lo cual siempre te da la ubicación o la ruta en la que te encuentras. No uses el... También hay otro. Con path o pathname. Pathname. Ten cuidado con pathname porque pathname es la ruta a esta página tal como Next.js la ve. También contiene las variables en ella. Así que si haces un pathname en una página como conferencia/slash slack literalmente tendrá los corchetes y el slack allí. Así que ten cuidado con eso y trata de usar asPath si lo necesitas. Y luego solo necesitas proporcionar en lugar de esta referencia solo proporciona aquí asPath. Y esto en realidad mantiene el contexto de la página. Así que cuando vamos a locations a horizons, por ejemplo, no creo que podamos cambiar ahora porque esto no existe en checo pero cuando estamos aquí podemos cambiar a checo. Oh, no es una sección diferente. No, probablemente un slug diferente. Permíteme cambiar. Ok, quedémonos en esta página entonces porque tampoco tenemos problemas con los URL slugs. Así que solo cambiamos a checo y ves que estamos en la misma página y ahora esta es la versión en checo de la página. Y lo mismo con alemán lo mismo con inglés. Sí, así es como podemos mantener el contexto. Por supuesto, es un poco problemático cuando los URL slugs son diferentes en diferentes idiomas. Pero eso probablemente no sea tan común y probablemente requeriría alguna lógica adicional para estar allí en ese punto. Así que avísame si esto te funciona. De lo contrario, es solo un mapeo realmente simple. Nada realmente complicado. Todo bien. Es genial escuchar eso. Buen trabajo, Alex. Espero que no seas el único. Perfecto. Gracias, Bruno. Genial escuchar eso. ¿De dónde salió el SPUNK? Viene del enrutador. Todas las cosas buenas. Como tengo que decir, Next.js hace esto realmente fácil y conveniente porque las cosas más importantes que siempre necesitas vienen del enrutador de esta manera o se proporcionan en la firma del componente o de la función, así que es realmente genial. Impresionante. Perfecto. De acuerdo. Parece que todos estamos aquí. Eso es muy bueno. Así que hicimos el selector de idioma consciente del contexto. Así que esta es una diapositiva para ti.

Buen trabajo. Lo hemos logrado. Espero que aún te guste Next.js. A mí sí. Y si tienes alguna pregunta, avísame. Nuevamente, la etapa final del proyecto, la voy a colocar en el mismo repositorio y simplemente la voy a enviar a una rama diferente. Así que si revisas allí en una hora, todo estará ahí. Así que solo guarda el archivo de enlaces si lo necesitas.

De lo contrario, muy buen trabajo. Espero que hayas disfrutado de la masterclass. Si quieres ponerte en contacto conmigo, puedes encontrarme en Twitter. Ese es el mejor lugar para contactarme. Y espero que si vienes a React Advanced la próxima semana, estaremos allí con mi equipo. Así que definitivamente pasa por nuestro stand y charlemos sobre tu proyecto. Siempre interesado en escuchar las historias de terror de alguien más que yo y mi colega.

Y, sí, si tienes alguna pregunta ahora, no dudes en preguntar. Bueno, no hay preguntas allí. Bueno, sí, hay una. ¿Podemos desarrollar un modelo personalizado con contenido? ¿A qué te refieres con modelo personalizado? Diseño de contenido. Definitivamente, sí. Entonces, como ves aquí, el diseño, esto es solo el HTML plano, ¿no? Entonces, el contenido no te impone realmente ningún data. Por lo tanto, puedes construirlo de la manera que desees. Si te refieres a los tipos de contenido que necesitas en el diseño, nuevamente, tienes total libertad. Por lo tanto, está completamente desacoplado. El CMS está desacoplado del frontend, entonces ¿cómo construyes el frontend? Está completamente en tus manos y el CMS realmente no tiene ningún poder sobre cómo utilizas el contenido, ¿verdad? Por lo tanto, definitivamente puedes construirlo de la manera que desees. Aperturas de trabajo. Sí, si visitas content.ai careers, encontrarás todas las posiciones abiertas. Creo que la mayoría de ellas son también en remoto. Así que siéntete libre de verlas y aplicar. Sería genial tenerlos en nuestro equipo. De acuerdo, eres muy bienvenido. Si tienes alguna pregunta, no dudes en contactarme en Twitter. Haré todo lo posible para responder lo más rápido que pueda. De lo contrario, muchas gracias. Espero que hayas disfrutado de la masterclass. Espero que hayas aprendido algo nuevo. Y espero verte la próxima semana en la conferencia. Así que nos vemos, y gracias nuevamente. ¡Adiós!