Hoy vamos a aprender desde cero Next.js, el framework por excelencia para trabajar con React.
¿Las cosas que necesitas para seguir este curso?
Hombre, necesitas tener instalado Node.
Bueno, este curso.
Este aprendiendo desde cero curso, ¿no?
Porque tampoco lo vamos a hacer un poco sobre la marcha, ¿eh?
Pero, ¿qué es lo que necesitas tener instalado?
Pues una terminal, Node.js.
¿Qué conocimiento necesitas?
Pues aquí no te voy a enseñar React.
A lo mejor explico alguna cosita, pero no vamos a estar explicando desde cero React.
Para eso mírate un curso de React.
Vas a necesitar tener conocimientos de desarrollo web, de CSS, de JavaScript, este tipo de cosas.
¿Y qué es exactamente Next.js?
Ya he dicho, framework de React.
¿Pero es cualquier framework de React?
No lo creo.
No es para nada cualquier framework de React.
Es el framework de React.
Él, directamente.
¿Y qué es lo que nos da Next.js?
Next.js es de la empresa Vercell y lo que nos está dando es la mejor experiencia de desarrollo
con todas las características que normalmente necesita una aplicación para estar en producción.
¿Qué características?
Pues, por supuesto, que tenga algún tipo de pre-renderizado para temas de SEO y rendimiento.
Y el pre-renderizado se puede conseguir con server-side rendering, con static rendering, con un montón de formas que le iremos viendo.
Con get server-side props, get static props y todo este tipo de cosas.
¿Qué tiene más?
Tiene soporte, nada más salir de la caja de TypeScript.
Tiene una forma inteligente de hacer los chunks para mejorar el rendimiento.
Veremos que el rendimiento es una cosa que le pone mucho enfoque.
Mejoras de imágenes, enrutado.
O sea, esto lo vamos a ir viendo y lo vamos a ir degranando y lo vamos a ir aprendiendo.
Y todo esto, además, que esto es lo mejor, todo esto lo hace con cero config.
Sin configuración.
O sea, tú no tienes que configurar nada o casi nada.
Es verdad que conforme vamos avanzando es posible que algo de configuración tengas que tocar.
Algo, alguna cosilla.
Pero no necesitarías para gran parte de los casos, ¿vale?
Así que esto es lo que tendríamos.
Mira, aquí tendríamos más cositas de cositas que nos viene.
Por ejemplo, internacionalización para temas de idiomas, traducciones y todo esto.
NextGS Analytics, que esto en realidad es un servicio más bien de Vercell que te ofrece.
Porque si no lo tienes desplegado en Vercell, no sé si te dé compatibilidad con otro servidor.
Cero config, que esto lo he comentado.
Híbrido.
Bueno, esto es el pre-render que lo puedes hacer tanto en build time como en request time.
En request time sería server side, ¿vale?
El incremental static regeneration porque puedes ir creando páginas estáticas y de forma incremental puedes hacer que se actualicen.
Ya sea después de un tiempo o puedes hacer ahora, incluso, le puedes pedir bajo demanda que se actualicen.
Lo veremos mucho más adelante.
Tiene Far Refresh, File System Routing, que esto lo vamos a ver muy pronto.
Apple Roots, bueno, tiene un montón de cosas.
Y lo mejor, yo creo que nada, que le demos cañita.
Una cosa, si hoy, por lo que sea, te quedas con ganas de saber más, que sepas que tienen esta pequeña sección de aquí de Learn NextGS,
que he estado tentado incluso a seguirla directamente y hacerla porque la verdad es que está bastante bien.
Pero si no, si te quedas con ganas de más, pues que sepas que tienes como un minicurso en la propia página de Vercell.
Y estoy seguro que te puede ayudar.
Vale, pues ¿cómo podemos empezar con nuestro proyecto de Vercell?
Voy a abrir la terminal y lo primero que tenemos que hacer es asegurarnos que estamos en una carpeta en donde no va a pasar nada raro.
Vale, aquí.
¿Qué es lo que necesitamos?
Necesitamos tener npm y node instalado en nuestro ordenador.
Yo ya tengo todo instalado, lo tengo todo preparado.
Pues npx create next app.
Fíjate que tengo fig, que es este autocompletado y ya me está diciendo cómo se tiene que hacer.
Aquí le puedes poner barra latest.
Esto es para asegurarte que si tienes instalada esta dependencia en global o está cacheada,
pues la ignore y básicamente vaya a la latest, la que está en remoto.
Pero bueno, que si lo tienes muy claro la puedes quitar.
La vamos a poner por si acaso y ya está.
Ahora esto lo que va a hacer es que nos va a decir, vale, tengo que instalar estas cositas.
Sí, hombre, sí.
Y nos va a decir, ¿cuál es el proyecto que vamos a hacer?
Vamos a hacer un proyecto sobre noticias.
Vamos a hacer una pequeña aplicación de noticias.
Vamos a ver qué sale de todo esto.
Es una API que he encontrado así rápidamente.
Así que vamos a utilizar esa.
Así que vamos a llamarle news app.
Y ahora aquí ya directamente nos está haciendo la instalación.
Nos ha creado la carpeta news app y nos está instalando tanto las dependencias como las dependencias de desarrollo.
¿Vale?
Y esto pues nada, tardará un ratito.
Y mientras pues os voy leyendo.
Cuando usas latest aprovecha para actualizar la versión que puedes tener en global.
Sí, lo que pasa es que cuando utilizas npx como tal no la instala de forma global, sino que la instala en una carpeta temporal.
Por lo tanto, sí que aprovecha a actualizar esa que tienes temporal, pero no tanto como que se quede global por siempre.
Por ejemplo, si tú reinicias el ordenador seguramente ya no estará ahí.
Eso es lo que hace npx.
Pero hay veces que hay gente que ha hecho a lo mejor esto.
En PM install, create next app.
Y entonces esto sí que puede ser que no que te la actualice, sino que fuerce descargar justamente la última versión.
No creo que te la actualice como tal.
¿Es posible NextDS con bit?
No, no es posible.
Y no es posible.
No es posible.
Bit es otro empaquetador de aplicaciones.
¿Vale?
Totalmente separado.
No tiene nada que ver con NextDS.
Bit utiliza por debajo.
Es build.
Y NextDS utiliza webpack, pero también utiliza justamente este compilador, que es la alternativa de Babel.
Que está hecha con Rust y que por eso funciona tan rápido.
¿Vale?
Pero no puedes utilizar NextDS con bit.
No son compatibles y es que no tienen sentido.
Básicamente.
No tienen ningún tipo de sentido.
Vale.
Volvemos.
Ya hemos ejecutado este primer comando para prepararlo todo.
Y fíjate que también nos ha iniciado el repositorio.
Es curioso porque, aunque me dice que ha creado la carpeta y tal, me deja en esta carpeta.
O sea, que como mínimo tienes que hacer el cd, news app.
No sé por qué no te deja directamente en la carpeta.
Y ahora aquí, pues vamos a ver un poco lo que nos ha creado, el proyecto, qué scripts podemos ejecutar, qué es lo que ha hecho todo esto.
Vamos a ello.
Vale.
Pues aquí tenemos esto.
Voy a hacerlo un poquito más grande.
¿Vale?
Voy a ver que esto se ve.
Sí, parece que esto sí que se ve.
Perfecto.
Pues vamos a ver qué tenemos por aquí.
Tenemos, ya vemos aquí, no modules con todas las dependencias que hemos instalado.
Tenemos una carpeta pages, que ahora mismo te explicaré.
Tenemos una carpeta public, que es donde vamos a tener los archivos estáticos.
En este caso tenemos ya el favicon y un archivo, una imagen, un SVG.
Y tenemos aquí una carpeta styles, con lo que serían, en este caso, estos, los estilos globales y estos, los estilos de un componente.
Ya vemos aquí un poquito de spoiler, porque .module ese nos va a decir alguna cosa.
Tenemos la configuración de slint, que básicamente extiende de next.core.web.vitals.
Y esto al final se puede modificar para que extienda de otras cosas.
Tenemos el gitignore, con todas las carpetas que no vamos a subir en el repositorio.
Next.core.js, que como puedes ver, pues yo no he escrito absolutamente nada.
Me ha puesto esto, y no vamos a tener que tocar nada.
Os lo prometo, no vamos a tener que tocar nada.
Y en el pack, ¿qué son cositas interesantes?
Bueno, pues tenemos aquí los scripts, un modo dev, un modo build, start y lint.
Y las dependencias, la de next, react, react-dom.
Dev dependency, justamente la de slint, y una que tiene las reglas del linter de next.
Esto es todo por aquí.
Pues vamos a entrar, si os parece, a la carpeta que es más importante y la más interesante de todas, que es pages.
Aquí empieza la magia.
En pages tenemos aquí una carpeta llamada API, y en esta carpeta llamada API tenemos el hello.js.
Esto lo vamos a dejar por aquí, pero ahora te lo enseñaré cómo funciona esto.
Luego tenemos un fichero un poco raro que empieza con un underscore y app.js,
que esto es un componente que envuelve nuestra aplicación.
Este componente justamente lo que nos permite es que vamos a poder importar, por ejemplo, estilos globales,
vamos a poder tener como un shell, como algo que envuelva toda nuestra aplicación.
Esto también lo vamos a ver ahora mismo.
Y luego tenemos el punto de entrada, digamos, de nuestra aplicación, o sea, la página en la que entraría directamente el usuario.
Cuando va directamente a la raíz, ¿dónde va?
O sea, el index.
Y tenemos aquí un home.
Pues esto sería, como siempre, un componente de React.
No tiene ningún tipo de magia, aunque sí que tenemos aquí dos imports que ya nos está diciendo alguna cosita extraña, ¿vale?
Y es que tenemos el import head from next head, ¿vale?
Esto es un componente que nos va a permitir, como vamos a ir viendo, cambiar el head del HTML,
o sea, títulos, metatags, como metadescription, el favicon.
Podríamos tener también aquí scripts de terceros, aunque veremos que hay otras formas de hacerlo.
Hay un montón de cositas, ¿vale?
Esto es para que podamos modificar el head.
Y vamos a ver que esto, por ejemplo, podríamos pasar en el app, lo veremos después,
para tener también por defecto un título.
Y luego tenemos aquí un componente imagen.
Este componente imagen viene por Next.js y lo que nos permite es optimizar la carga de las imágenes.
Así que esto, lo demás, no deja de ser simplemente un componente de React normal y corriente.
Lo que vamos a hacer ahora es iniciar nuestro proyecto.
Así que vamos a ello.
Vamos a la terminal, en pnrndef, y ahora podemos ver que se ha iniciado starter server, compile client, ¿vale?
Y nos dice que en el puerto 3000 tenemos nuestra aplicación.
Vale, pues voy a abrir esto por aquí.
Y ya lo tenemos por aquí, ¿vale?
Welcome to Next.js.
Esto es lo que, si creas la aplicación desde cero normal, esto es lo que te va a aparecer.
Welcome to Next.js, get started by editing, la página, el archivo que hemos visto, y aquí tenemos unos cuantos enlaces.
Como podemos ver, ya tiene un título y ahora vamos a ver de dónde aparece este título, si es que aparece de la nada o de dónde aparece esto.
Mira, vamos a hacer esto así de chiquitito.
Y esto ahora ya sí que lo voy a dejar por aquí.
Una cosa que es interesante es que fíjate que cuando he ejecutado el comando aquí en la terminal, se ha creado una carpeta más.
Fíjate que aquí hay una carpeta más que antes no estaba.
En esta carpeta lo que tienes es como diferentes cachés y archivos que se han creado en el momento de ejecutar este modo de desarrollo.
De esta forma, cada vez que haga se ejecute y tal, pues tiene que hacer muchas menos operaciones y ya está.
Y también ha copiado los archivos estáticos, ha hecho diferentes optimizaciones para poder servirte el modo de desarrollo, para que lo tengas en cuenta.
Esto es una carpeta que no tienes que subir a tu repositorio para nada y por eso la vamos a encontrar en el gitignore seguro.
¿Vale?
¿Ves? Aquí la tenemos. Punto next. Ahí la tenemos. Perfecto.
Pues ¿qué más podemos hacer con esto?
Bueno, pues revisar un poco cómo ha quedado nuestro componente.
Voy a quitar un poquito todo el ruido que tienen los enlaces, estas cosas que no nos aporta mucho.
Y si os parece voy a dejar aquí un h1 aprendiendo next.js desde cero.
¿Vale?
Vamos a cerrar aquí con el dip.
Guardo los cambios.
Y aquí ya tenemos nuestra aplicación un poquito más limpia.
¿Vale?
Le hemos recortado un poquito las cosetas.
¿Vale?
Lo que tenemos aquí ahora mismo es esta página así vacía con nuestro h1 y con el title.
Si miramos aquí, nos podemos ver que aquí este title es justamente el que tenemos aquí.
Así que se lo vamos a cambiar.
News app.
Pero fíjate, vamos a empezar ya un poquito con esto porque antes te he comentado que justo había este underscore app.js.
Si vamos a este underscore app.js, aquí tenemos el importar estilos globales que hemos visto, tenemos un componente my app y estamos exportando justamente este mismo componente.
¿Para qué sirve exactamente esto?
Si esto sirve para algo realmente, sí que sirve para algo.
Esta aplicación, como te he comentado, esto envuelve, este componente envuelve toda nuestra aplicación.
¿Qué significa esto?
Pues que si nosotros ponemos algo aquí, vamos a ver que esto se va a renderizar.
Vamos a poner aquí un header, por ejemplo.
¿Vale?
Y vamos a poner dentro del header, vamos a poner que esto sería news app.
¿Vale?
Esto va a ser como nuestro logo.
¿Vale?
Vamos a poner aquí un periódico.
Periódico.
Vamos a ponerle este mismo.
¿Vale?
Guardo los cambios.
¿Vale?
Y fíjate que está aquí.
Ahora, conforme vayamos creando archivos y vamos a ver cómo funciona el sistema de rutas, vamos a ver que esta parte de aquí arriba se queda siempre.
Y como se carga para todos los componentes y se carga solo una vez porque es lo que todo lo envuelve, por eso es aquí donde tienes que importar los estilos globales.
También lo que puedes hacer y que es interesante, en lugar de tener el head con todo, con el favicon y todo esto, siempre por defecto, lo puedes poner también aquí.
Que también puede ser curioso para tener como los valores por defecto que quieres que siempre estén en tu aplicación.
Por ejemplo, vamos a importar, vamos a traernos esto.
¿Vale?
Me voy a importar el next head.
Y ahora este title y este description.
Bueno, este description vamos a poner news app, the best app to readnews, por ejemplo.
¿Vale?
Y vamos a dejar el favicon.
De esta forma, ahora el title, el meta, el link, todo esto, esto va a estar siempre por defecto en todas nuestras páginas.
Pero un cambio, si aquí ponemos otro, por ejemplo, voy a quitar esto y aquí ya vamos a poner este news app y pongo aquí home, por decir algo, y guardo los cambios y volvemos aquí, vamos a ver que el título es news app home.
Pero si creamos una nueva página que no tenga un head, pues lo que va a pasar es que va a tomar este valor por defecto, el de este título de aquí.
¿Vale?
Así que de esta forma, de esta forma podemos tener como la modificación del head por todos los lados.
Si no has entendido esto, no te preocupes porque conforme vayamos creando páginas, lo vas a ir viendo.
Así que no pasa absolutamente nada.
Venga, vamos a continuar.
A ver, voy a leeros antes un poquito para que...
A ver, ya me perdí.
Joder, Andrés, ¿cómo te...?
Acabo de llegar, ¿me he perdido mucho?
No te has perdido mucho.
Todas las páginas pasan por ese componente, efectivamente.
No sé qué he dicho, pero todas las páginas pasan por ese componente.
O sea, ese componente lo que hace es envolver la aplicación.
Ya está.
Independientemente de qué ruta entres, ¿vale?
Recomiendo a RIA con incluso Next.js con backend, que no sea Node.
Estoy muy metido en Symfony y quiero aprender la parte de front.
Bueno, lo vamos a ver aquí.
De hecho, todavía no lo hemos explorado, pero luego veremos cómo puedes crear APIs y endpoints aquí
y por qué es súper interesante y genial, ¿vale?
Midu, los componentes y o custom hooks que tienen Next por defecto.
Bueno, o sea, acabo de revisar uno.
No he entendido la pregunta.
Muchas gracias, Iván, Juanman, Onifer.
Muchas gracias por suscribiros.
Y Jorge, tres piernas.
Y Bosson King, Arbak.
Muchas gracias a todos.
Hola, Midu.
Hola.
Me encanta tu contenido.
Yo hago backend, pero no me pierdo un vídeo de YouTube.
Sigue así.
Oh, yeah.
Muy bien.
Perfecto.
Pues venga, va.
Vamos a continuar.
Cosas que podemos mirar.
A ver.
Bueno, ya hemos visto un poco la estructura de archivos.
Ya tenemos nuestra página de inicio, que es el index, ¿no?
Pero claro, la gracia justamente de las páginas.
Voy a poner esto por aquí.
Voy a bajar, voy a quitar esto.
Justamente la gracia de las páginas está en la navegación, porque normalmente vamos a tener más de una página.
Así que, ¿cómo podemos crear otra página?
A diferencia de muchos proyectos de React, en los que tienes que instalar React Router y todo este tipo de cosas,
Next.js ya te viene con un enrutado definido y muy interesante.
¿Por qué?
Porque, ¿cómo funciona?
Vamos a ver.
Olvídate por ahora de la carpeta de esta API.
Y vamos a crear otra página.
¿Cómo se crearía una página en Next.js?
Pues es tan sencillo, tan sencillo, como crear una nueva ruta.
Una nueva ruta aquí.
O sea, un nuevo fichero.
¿Cómo podemos hacerlo esto?
Bueno, pues le podemos poner el nombre.
¿Cómo sería la ruta?
Pues vamos a poner about.js, por decir algo.
¿Vale?
Voy a copiarme todo lo que tiene el index.
Y lo vamos a poner aquí.
O de hecho, mira, para que lo vean más claro, voy a hacer un export default de la function, about.
Y vamos a poner aquí, esta es la página de about.
¿Vale?
Perfecto.
Guardo los cambios.
Tenemos este nuevo fichero about.js.
Volvemos a nuestra página.
Y aquí lo que voy a hacer es un barra about.
Y al hacer un barra about, fíjate, esta es la página de about.
O sea, ya he creado una nueva ruta.
Simplemente con esto, ya tenemos una nueva ruta.
Esto lo puedes llevar al nivel que quieras.
Por ejemplo, puedes hacer rutas que estén anidadas.
Puedes hacer aquí, level anidado 2.js, por decir algo.
¿Vale?
Y esto lo que me crea es la carpeta level anidado 2.js.
Y aquí hacemos export default function to.
¿Vale?
Y vamos a poner este to aquí en medio solo para que lo veamos.
Entonces, si miramos la estructura del sistema de archivos, level anidado 2,
pues lo mismo teníamos que poner aquí, level anidado 2.
¿Vale?
Level anidado 2.
Y con esto, pues ya tendríamos aquí nuestro nuevo componente, el de chu.
Es tan sencillo como esto.
No tienes que hacer nada más.
O sea, no tienes nada que configurar.
No tienes que volverte loco con nada.
Luego, luego veremos que, claro, una duda que puedes tener es
cómo crear justamente rutas dinámicas.
Lo veremos porque también se puede hacer, por supuesto.
Y es igual de fácil.
Te lo puedo asegurar.
Es igual de fácil.
Pero por ahora, vamos a dejar esto por aquí.
Bueno, sí.
Venga, vamos a ver cómo se hace la ruta dinámica solo para que lo veamos.
Venga, voy a quitar este, que este anidado no es muy interesante.
Y así te quitas esta duda, que seguro que tienes ganas de verlo.
Imaginemos que vamos a tener en nuestra página de noticias,
vamos a tener artículos.
Y los artículos, por lo tanto, normalmente tienen ideas.
¿Vale?
Pues podemos hacer, imaginar que queremos entrar por article barra.
Y vamos a querer la id del artículo.
Pues pondríamos aquí, entre corchetes, id.js.
Y aquí lo que va a pasar, fíjate, voy a hacer aquí article, creo mi componente, return, h1.
Esto es un artículo.
Luego ya veremos cómo recuperar justamente el parámetro.
Pero bueno, por ahora vamos a dejar hasta aquí.
Esto es un artículo, ¿vale?
Pues nada, volvemos aquí a nuestras rutas.
Y vamos a ponernos en article barra.
Y ahora aquí pondríamos la id, ¿no?
Que sería 1, 2, 3, 4, lo que sea.
Le doy al enter.
Y aquí podemos ver cómo ha entrado a esto es un artículo.
Pero claro, como ahora todavía no hemos definido cuándo es un 404 y tal,
sino que simplemente pues intenta recuperar aquí la id.
Fíjate que siempre que le pasamos aquí una id, sea la que sea, sea lo que sea,
mientras cumpla, pues está renderizando esa página de esto es un artículo.
Pero de esta forma, tan fácil como esta, lo que estamos haciendo es tener un segmento dinámico en nuestra ruta.
Y además esto, por supuesto, ya te podrás imaginar que vamos a poder acceder,
cuando luego veamos el router, vamos a poder ver que podemos acceder a este parámetro dinámico, ¿vale?
De la ruta, así que perfecto.
Muy bien, ¿qué más?
Vamos con más cositas.
Aparte de la app, que es lo que envuelve toda la aplicación,
y de hecho vamos a hacer una cosa para darle un poquito de la página.
No sé si conocéis, yo al menos lo he buscado un poco por encima, ¿vale?
Hostia, no sé ahora cuál es este, me parece, ¿no?
Sí, que hay un montón.
Vale, hay un...
Pues no, no lo tenía ahí.
Este, este de aquí.
Hay un proyecto que se llama PITSS, no sé si lo conocéis, no hace falta que lo conozcáis,
no es muy importante.
Pero lo que tiene, que es muy interesante, es que puedes conseguir que los estilos que carga tu aplicación,
tu web, sin necesidad de clases, pues se ve así.
Fíjate, con este HTML, pues se ve estos estilos.
Y dependiendo un poco de la semántica que tenga, pues se va a ir viendo más o menos bien.
Para darle un poquito de cariño a los estilos de nuestra página, lo que vamos a hacer es justamente esto.
Vamos a irnos al CDN este, y nos vamos a apiar aquí en CSS, a ver, .min.
Vamos a intentar con el classless este, a ver qué pasa.
Tampoco va a ser muy importante para nosotros el tema de los estilos, pero aún así, pues vamos a intentar que tampoco se vea tan mal.
Tenemos la opción aquí, como hemos dicho antes, de los estilos, ponerlos aquí, ¿no?
Tenemos el global.css.
Este archivo ya había existido cuando lo hemos creado.
Voy a pegar lo que me he traído, este framework que lo que hace es estilar automáticamente todo.
Y este global.css se está cargando en el app.js, en lo que envuelve toda la aplicación.
Lo tendríamos aquí, ¿vale?
Entonces, ¿cómo podemos hacer el tema de tener más estilos, aunque sea a nivel de la home?
Si vamos aquí, podemos ver que ya en la línea 3, en esta línea, ya teníamos unos estilos,
pero que se estaban utilizando aquí con el container, por cierto.
Vamos a ver cómo ha quedado esto con el... un momento.
Fíjate que ya tiene modo oscuro y todo, ¿eh?
Esto es una pasada el CSS.
Ya nos ha puesto un poco en modo oscuro.
Esto es un artículo.
Vale, perfecto.
Pues imagínate que yo esto lo quiero estilar, ¿no?
Esta home la quiero estilar, lo quiero poner en medio, quiero hacer algo.
Tendríamos ahí aquí, estamos importando estos estilos de un módulo.
Y aquí en el class name estamos utilizando esto.
Esta forma styles.container.
Esto, si no sabes lo que es, esto es lo que se llaman CSS Modules.
Y en Next.js te viene, por defecto, compatibilidad con estas dos formas de trabajar.
Una con CSS Modules y otra con Style JSX.
No sé si me acuerdo muy bien de cómo era el Style JSX.
Voy a intentarlo.
Pero creo que era así, si no me equivoco.
Y tú aquí lo que podrías poner, este te lo explico, aunque este no es muy famoso, pero te lo explico porque a mí personalmente me gusta bastante.
Este lo que podrías hacer es poner los estilos aquí directamente.
Y estos estilos además tenían el scope dentro de este componente.
¿Qué quiere decir?
Pues que yo podría indicar aquí div y poner aquí, por ejemplo, display grid, place content center, height 100.
Vamos a poner esto.
No sé si esto, creo que sí que esto debería funcionar.
Pero bueno, este estilo que vemos aquí, este div, solo va a ser para este.
Si tú tuvieses un div en otro componente, en otra página o lo que sea, este estilo que has puesto aquí solo afectaría a este que ves aquí.
¿Vale?
Solo a los estilos de este componente.
Esto es lo mismo que tiene, por ejemplo, Svelte con los estilos con scope.
¿Vale?
Y lo mismo con Vue.js y cosas así.
Si miramos los estilos, vale, veo que no me ha hecho nada.
De hecho, es que no sé si StyleJSX es así.
A ver, vamos a poner background red.
A ver si es que he hecho algo mal.
Sí, de hecho no me lo está pillando.
Vamos a ver.
StyleJSXNextYear.
Vamos a mirar la documentación un momento.
Es que hace mil años que no miro StyleJSX.
Pero yo creo StyleJSX.
Container.
Pues lo he hecho bien, ¿no?
Está bien esto.
He cerrado aquí el Style.
Vamos a cerrar y volver a abrir.
Yo qué sé.
Si se me escapa.
¡Ay, no!
Vale.
Ya sé.
Mira, pero esto demuestra.
Claro, ya sé por qué no se ven.
Porque estoy en esta página.
Pero mira, así de esta forma además puedo demostrar esto.
¿Vale?
Que aquí tenemos un div.
Esto es un div.
Y nos vamos a ver aquí los estilos.
Vale.
Es que como se parecía tanto.
Mira, esto es un div.
Aquí no tenemos los estilos.
Y ahora sí, vamos a la homepage.
Y aquí deberíamos ver los estilos.
Que sí que tenemos ese scope de que ese div solo es el de ese componente.
Este rojo lo vamos a quitar que es horrible.
¿Vale?
Ya decía yo porque digo, ostras, yo juraría que era así.
Como hay tanta versión.
Vale, ya lo tenemos aquí.
Ahora sí que tenemos aquí los estilos funcionando correctamente.
Y aquí tenemos el scope.
Esto es una forma de trabajar.
Y como funciona, pues lo podrías utilizar y ya está.
¿Vale?
Pero no sería la forma recomendada a día de hoy.
Yo creo que a día de hoy la más recomendada sería trabajar con CSS Modules.
Para trabajar con CSS Modules, a mí personalmente no me gusta muy bien este tipo de estilos.
De poner los estilos aquí.
Yo preferiría sacarlo dentro de los componentes y tal.
Pero bueno, por ahora lo vamos a tener aquí en la carpeta styles.
No sé si se ve.
Sí, ahora sí que se ve.
Justo encima mío.
Mira, aquí.
Aquí lo teníamos.
¿Vale?
Entonces, tendríamos aquí la página home.
.module.css.
Y aquí tendrías todos los estilos que tendría la página home.
Todos estos, como no los utilizamos, los vamos a quitar.
¿Vale?
Y vamos a quedarnos con el container.
Pues aquí, en la página home, vamos a utilizar este container y lo vamos a utilizar así.
Ponemos aquí class name y aquí tendríamos styles.container.
¿De dónde aparece este .container?
Bueno, pues los CSS Modules, como funciona, es que tú pones aquí .container.
Sería justamente esta parte de aquí.
Y tú aquí, pues ya le podrías poner justamente los mismos estilos que teníamos antes.
¿Vale?
Lo ponemos en el centro y con el height a 100.
¿Vale?
Algo así.
Y, fíjate, le ha puesto el padding y ya está funcionando bien.
Esto sería, yo creo, que la forma ideal de trabajar con estilos en Next.js.
O con CSS Modules, que esa sería la que utilizaría yo.
Con style.jsx, si te gusta más tener esa mezcla de CSS en JS.
O podrías utilizar también Tailwind.
Es totalmente compatible con Tailwind.
No hay ningún tipo de problema, ¿vale?
Para que lo tengas en cuenta.
Esta sería una forma con Class Names y ya está, con CSS Modules.
Muy bien, ¿vale?
¿Qué más?
Aparte de esto y aparte del CSS Modules, tenemos los estilos ya del pico CSS.
Ya hemos explicado el Next.js.
Vamos a trabajar ahora con la navegación.
Porque si hay una cosa que queremos a la hora de crear páginas,
es justamente ir de una página a otra.
Aquí hemos puesto Aprendiendo Next.js desde cero.
Pero imaginemos que queremos llevar a nuestros usuarios a esta página About.
Yo le quiero llevar a la página About.
¿Cómo le puedo llevar a la página About desde el Index?
Bueno, es obvio, ¿no?
O sea, podemos poner esto directamente, ir a About.
Le ponemos aquí un enlace y ya está.
Y que se vaya al About y punto.
Y claro, si le damos aquí y le doy clic, pues podemos ver que se ha ido al About.
Vale, fantástico.
Os he enseñado cómo funcionan directamente los anchors.
No, pero espérate, que esto tiene un poquito más de cosita, ¿vale?
El tema es, ¿cómo podemos hacer?
Fíjate, voy a darle a inspeccionar y os voy a enseñar una cosa que es súper importante con Next.js.
Si vamos aquí a inspeccionar, y voy a hacer esto más grande para que lo veamos bien, ¿vale?
Y me voy a la red.
Fíjate, bueno, la red, es que encima esto lo tengo súper grande.
Y voy a mover esto para que lo veáis, para que no quede yo encima, ¿vale?
Vale, si nos ponemos aquí, nos vamos a la red, y yo le doy aquí a refrescar, podemos ver todos los recursos que se han pedido.
Y puedes filtrar por aquí, ¿no?
Y podemos ver que el primero que se ha hecho es este localhost.
Y esto es un, ves que pone aquí protocol, bueno, no se nota, pero es protocol, debería tener un content type por ahí, todo esto.
Pero bueno, ya lo ves aquí.
Esto lo que está diciendo es que lo que está haciendo es pedir la página web.
Una vez que ha pedido la página web, está pidiendo todos los recursos que tiene la página web, todos los javascript que necesitan y todo este tipo de cosas, ¿vale?
Entonces, hasta aquí bien.
Cuando yo voy al about, fíjate, cuando tengo aquí el about, voy a limpiar esto, todas las requests que se han hecho, y le voy a dar al about.
¡Ping!
Vale, ¿qué ha pasado aquí?
Pues fíjate que se ha vuelto a cargar toda la página, toda la página, ha ido al about, ha recargado toda la página,
y ha vuelto a descargar todo el javascript que necesita para funcionar.
Esto, a ver, esto es la forma más típica y tópica para que funcione la página web a día de hoy,
pero esto no sería una single page application, y lo que estaríamos haciendo aquí es que el usuario tendría que estar recargando toda la página
para poder navegar, y no es necesario.
¿Cómo podemos solucionar esto?
Bueno, tengo diferentes formas de hacerlo.
Pero, en este caso, que esto es un anchor, deberíamos utilizar un componente que tiene next, que es justamente link.
Así que vamos a importar link de next, barra, y fíjate, la de componentes que tiene next, ¿eh?
Babel, client, config, constants, data, dynamic, wow, wow, wow, un montón, un montón.
Bueno, pero lo importante es que es este, el de link, ¿vale?
Y este de, bueno, una cosa que quiero de que quede claro, porque si no la gente se me va a quedar flipando con esto.
Os voy a explicar una cosa para que os quede claro, ¿vale?
Esto no todos son componentes, ¿eh?
Por ejemplo, AMP sí que es un componente, pero hay algunos de aquí que directamente son archivos que están aquí.
Porque esto al final lo que hace es ir a knownmodules, barra, index, barra, y aquí sí que hay algunos que son componentes, como por ejemplo este image,
pero hay otros de los que hemos visto ahí que a lo mejor no son componentes, que simplemente, por ejemplo, este jest, a lo mejor es algo que tienen ahí en el knownmodules y ya está.
En nuestro caso, el que nos importa es el de link y ya está.
¿Qué es lo que nos va a dar link?
Bueno, si has trabajado con RIA router, ya sabrás.
Has estado estudiando para esto, no he estudiado.
Esto es lo que me sé, al menos hasta ahora, un poquito de next.js.
Pero bueno, luego iremos mirando un poco documentación, ¿vale?
Porque esto ya sí que lo he hecho unas cuantas veces y ya sí que me suena.
Vale, pues entonces, con el link lo que podemos hacer es cambiar este anchor.
Vamos a cambiar este anchor, ping, y lo vamos a cambiar por un link.
Tal cual, ya está, no tienes que hacer nada más.
Vamos a guardar los cambios y vamos a volver al eje que teníamos antes.
Me voy a ir a la home, ¿vale?
Y fíjate que la home se ha recargado aquí en localhost, hasta aquí todo normal.
Voy a limpiar esto y le voy a dar ir a about.
Bastante diferencia, ¿verdad?
¿Qué ha pasado?
¿Qué ha pasado o qué no ha pasado?
Lo que no ha pasado, básicamente, es que no ha recargado toda la página,
sino que simplemente next.js, de forma totalmente inteligente e independiente,
y autónoma, ha cargado solo el archivo que necesita.
Y el único archivo que necesitaba para poder mostrar la página about
era este trocito de about.js.
En lugar de recargar toda la página, lo que ha hecho es simplemente traerse el JavaScript
que necesitaba para cambiar el contenido.
Este tipo de navegaciones son justamente lo que se le llaman single page application, ¿vale?
Porque en lugar de recargar toda la página, solo se trae lo que necesita.
Así que tenemos que utilizar esto.
Si utilizáis el anchor normal, tened en cuenta que esto no va a funcionar, ¿vale?
No va a hacer la magia porque sí para nosotros, que lo tengáis en cuenta.
Aparte de esto, también se puede hacer de otra forma.
Por ejemplo, hay muchas veces que tenemos botones que queremos que nos lleven a otro sitio.
Por ejemplo, vamos a tener aquí un botón.
Aunque os voy a decir una cosa.
Esto que vamos a ver no es la forma que deberíais hacer, ¿vale?
No es la forma que deberíais hacer.
Pero usa por dentro la API History.
Hombre, claro, ¿y cómo va a hacer si no esto?
¡Dambito! ¿Cómo lo va a hacer?
Claro, sí, que no me he comentado, pero se hace single page application,
utiliza el history.push.
De hecho, ahora vamos a ver una forma un poquito más imperativa, ¿vale?
Esta sea una forma más declarativa de hacer este tipo de navegaciones.
Pero hay veces que queréis hacer una navegación más programática, ¿vale?
Entonces, si queréis hacer una navegación más programática,
vamos a necesitar utilizar el router.
Para eso, vamos a traernos el import, el useRouter, si no me equivoco.
Ah, mira, menos mal que ya tiene autocompletado.
Y nos lo traemos de next barra router.
Esto es un custom hook que tiene justamente Next.js,
que lo que nos va a permitir es ejecutarlo y traernos el router.
Si no me equivoco, a ver, si no me equivoco, sí.
Nos trae directamente el router.
Es que digo, a ver si es nombrado o no, pero no.
Es directamente ahí tenemos el router.
Vale.
Y entonces, una vez que tenéis el router, lo que podéis hacer,
vamos a tener aquí un botón, por decir algo, ¿vale?
Un botón o un clic y que al hacer el clic, pues vamos a decir
navegar de forma programática, ¿ok?
Y de hecho aquí, como decía Davito, que está utilizando por dentro del History,
vais a ver que se parece bastante.
Porque aquí, cuando hacemos esta programación, se llama router.push.
Y aquí le podemos pasar justamente la URL a la que queremos ir.
Le podríamos pasar, por ejemplo, article barra 2, ¿vale?
Imaginar, navegar de forma programática a un artículo.
Pero os voy a explicar por qué esto no está bien,
por qué no deberíais hacer esto nunca y dónde realmente deberíais utilizar
este tipo de navegaciones, ¿vale?
Esto no lo hagáis, ¿ok?
Ok, vale.
Guardamos los cambios.
Vámonos otra vez por aquí.
Vámonos a la home.
¿Vale?
Y ya tenemos aquí un botón que es bastante grande.
Navegar de forma programática a un artículo.
Voy a limpiar aquí, le voy a dar.
¿Vale?
Y fíjate que, de nuevo, no ha recargado toda la página
y solo ha cargado lo que necesitaba.
Pero, ¿por qué no deberíais utilizar esto así?
Esto que hemos hecho.
Nunca deberíais utilizar un botón para hacer una navegación entre páginas, ¿vale?
O sea, si tú tienes claro que es una página que tiene que ir a otro sitio
y eso lo puedes hacer con un enlace,
hazlo siempre con un enlace.
Hazlo siempre de esta forma.
Los botones o este tipo de navegación programática,
¿cuándo tiene sentido?
Pues puede tener sentido en un formulario, por ejemplo, un login, ¿no?
Y tú, cuando te inicias sesión, pues cuando ha ido bien,
quieres llevar al usuario a algún sitio.
Pero no es un enlace.
Es como la respuesta a una acción del usuario.
Pues ahí podrías hacer router.push
y le podrías llevar directamente a la home, por ejemplo.
Pero ya que haya iniciado sesión el usuario.
Para eso sí que te ha sentido utilizar el router.push, ¿vale?
Que lo tengamos clarísimo.
Ya tenemos todo el tema de navegaciones y todo esto, ¿vale?
Antes de seguir, te tengo que comentar una cosa súper importante.
Súper importante.
Y es que es una cosa que no te he comentado.
Si vamos a esta aplicación, claro,
porque una de las cosas que no se ven,
pero que luego se tienen que palpar bastante
en cuanto a mejoras que te trae Next.js respecto...
Porque seguro que alguien me la ha puesto en el chat,
aunque no he estado pendiente, ¿vale?
Y dice, oye, ¿por qué debería utilizar Next.js
y no debería utilizar, por ejemplo, bit?
¿Por qué no utilizo bit?
Si también podría utilizarlo y es bastante rápido y todo esto.
Más allá...
Y, por ejemplo, me utiliza más React Router, por ejemplo, ¿no?
Entonces, ¿por qué?
Porque bit sí que lo puedes lograr,
pero bit, nada más instalarlo,
no tiene server-sarendering o no tiene pre-rendering.
¿Qué quiere decir esto?
Bueno, vamos a verlo.
Si yo le doy al botón derecho, aquí,
y le doy a ver código fuente de la página,
fíjate que aquí tenemos un montón de información,
pero un montón.
O sea, tenemos el título, pa, pa, pa, pa, pa, pa,
un montón de información.
¿Vale?
De hecho, vas a poder encontrar esto,
vas a poder encontrar aquí.
Este título, este H1, aprendiendo Next.js desde cero.
Esto es lo que está consiguiendo,
es tener justamente un pre-renderizado,
ya sea estático, ya sea en el servidor, ¿vale?
Entonces, vas a tenerse pre-renderizado y de esta forma,
tanto por temas de SEO, de Search Engine Optimization,
o sea, que Google te encuentre,
básicamente, que para eso es lo que nos interesa.
Tanto que Google te encuentre,
o por un tema de rendimiento,
esto va a marcar la diferencia.
Y esto lo vas a conseguir sin ningún tipo de configuración,
sin hacer absolutamente nada.
Lo que va a pasar aquí es que este componente que vemos aquí,
¿vale?
Este componente se va a pre-renderizar,
ya sea en servidor o ya sea en estático,
y de esta forma, cuando el usuario entre,
ya va a estar el HTML creado.
Y tú dirás, ¿y cuál es la diferencia de esto?
¿Cuál es la diferencia?
La diferencia es que ClientSightRendering,
que es lo que conseguirías en bit de cero,
aunque puedes llegar a conseguir service rendering,
pero necesitas hacer bastante trabajo.
ClientSightRendering, hasta que no descarga el JavaScript,
no le muestra nada al usuario.
Os iba a hacer una demo,
pero tampoco quiero perder mucho tiempo en esto, ¿vale?
El tema es, ¿y cuál es el problema de esto?
El problema de esto es que Google sí que encuentra
ese tipo de páginas, pero claro,
piensa que qué es más rápido.
Qué es más rápido.
Esto, imagínate que vamos aquí,
qué es más rápido.
Esto y poder leer todo el contenido del archivo
o tener que ir a tu página,
descargarse todo tu JavaScript,
renderizar la página
y, por lo tanto,
tener que levantar un servidor para ver tu página
y entonces crolear toda la información.
Pues lo que va a ocurrir
es que seguramente Google le va a dar menos importancia
a tu página,
le va a dedicar el mismo tiempo,
pero va a encontrar menos páginas.
Y de hecho, muchas páginas,
han tenido,
en una que estuve trabajando,
Mercall,
bueno, trabajando,
pero de freelance,
esta,
este programa tuvieron,
porque justamente como era totalmente clara en ese rendering,
perdieron en picado un montón de notoriedad
en las búsquedas de Google.
Así que ten en cuenta que esto es súper importante
por este tipo de cosas.
Ahí tengo un vídeo en mi canal secundario
donde lo explico con todo lujo de detalles
de cómo trata Google esto,
por qué es importante.
O sea,
que si te interesa el tema,
te vas a Midulife
y lo buscas,
que lo hablo un montón.
Vale.
Hasta aquí todo bien.
Venga,
vamos a continuar.
¿Se está entendiendo todo?
¿Cómo lo veáis?
¿Cómo lo lleváis?
SSR con Web Components.
No se puede hacer SSR con Web Components
en nativo a día de hoy,
aunque se está trabajando en ello.
Y ya está.
El vídeo,
que queréis el vídeo.
Venga,
os enseño el vídeo,
que ya me está pasando,
pidiendo a la gente el vídeo.
Vale.
Mira.
Este es el típico vídeo.
Este es el típico vídeo
que es rendering o SSR rendering.
Render rendering es la solución.
Bueno,
problemas de SEO.
En este lo explico.
¿Vale?
En este vídeo,
os lo paso por aquí.
Os lo paso en el chat,
¿vale?
Y le echáis un vistazo
si os queréis enterar bien
de cómo funciona realmente esto para Google.
Pero obviamente no es un tema solo de Google.
Hay que pensar también en el usuario,
que siempre lo que os digo,
hay que poner al usuario en el centro.
Y si ponéis al usuario en el centro,
esto tiene mucha mejor.
Mira,
para que os hagáis una idea,
¿vale?
Voy a desactivar JavaScript.
Inhabilitar JavaScript.
¿Vale?
Probad a crear una aplicación con bit
y desactivar JavaScript.
¿Vale?
Como he hecho yo aquí,
desactivando JavaScript.
Abrís esto.
Inhabilitar JavaScript.
¿Vale?
Le dais aquí.
¡Pam!
Y una vez que lo tenéis,
le dais aquí a este botón de refrescar.
En mi caso,
fijaos que aunque yo he desactivado JavaScript,
fíjate que sí que se ve el contenido.
No se ven los estilos,
y esto supongo que es por un tema
de estar en el modo de desarrollo,
en realidad,
en NextDS.
Si estuviéramos en el modo
de haber compilado totalmente la aplicación,
estaríamos viendo los estilos
sin ningún problema.
Pero esto,
en una aplicación de bit,
lo estaríamos viendo totalmente en blanco.
¿Vale?
No tendríamos ningún tipo de contenido.
Lo podéis intentar con Create Backup,
lo podéis intentar con Bit,
lo podéis intentar con lo que queráis.
Pero lo que vais a ver aquí
es que justamente esta aplicación
pues no existe.
Mira, de hecho,
para que lo veamos rápido,
podemos utilizar este bit.new.
¿Vale?
Esto es lo que se supone
que te crea un proyecto en un momento.
Está costando.
Lo vamos a ver, ¿vale?
Mira,
esto es un proyecto de React
que está utilizando bit,
webpack o lo que quieras, ¿no?
Le voy a dar a ver código fuente
y fíjate,
¿dónde está el HelloBit este?
No está.
Aquí no está,
no lo puedes encontrar
porque no está,
no existe.
O sea,
este contenido existe
solo porque está descargando el JavaScript.
Y si quieren más prueba
y no te fías de mi ver código fuente,
lo que puedes hacer,
luego,
¡ostras!
Se ha vuelto esto talumba.
Vaya, por Dios.
No se puede hacer
con las herramientas de desarrollo abiertas.
No sé,
se vuelve loco.
No sé si se podría quitar por aquí,
pero bueno,
si no lo,
no sé por qué no me deja,
porque al hacer esto,
ah, bueno,
ahora parece que sí.
Vale,
vamos a inhabilitar JavaScript.
Le damos a refrescar.
Pantalla en blanco.
¿Vale?
O sea que esta es la gran diferencia,
que tu página sí que está funcionando sin JavaScript.
¿Esto qué quiere decir?
Pues que todo tu contenido,
todo el contenido que vamos a tener aquí,
todas las noticias,
los artículos,
los enlaces,
las imágenes incluso,
todo sin JavaScript
se podría ver.
Y por lo tanto,
eso va a ser bueno para Google,
pero también para el usuario,
porque el usuario,
sin necesidad de tener que descargarse
todo JavaScript,
ya va a ser capaz
de ir viendo tu página web
y poder interactuar incluso con ella.
Porque como estos son enlaces,
esto en realidad,
esto se renderiza como un enlace.
¿Vale?
Y esto sin JavaScript,
si yo le doy,
fíjate que sin JavaScript
la página funciona.
Esto es súper importante.
¿Vale?
Esto es importantísimo.
Así que hay veces
que este tipo de cosas,
sobre todo desarrolladores
y desarrolladoras web,
se les pasa por alto
y no controlar este tipo de cosas
es la diferencia
entre saber de lo que se habla
o no saber de lo que se habla.
Porque al final estamos
haciendo productos reales
cuando queremos trabajar
en una empresa
y este tipo de cosas
son los que marcan la diferencia.
Esto es lo que realmente
puedes hacer que pierdan
millones de euros una empresa.
¿Vale?
Así que es súper importante
que lo tengas en cuenta
y en esto justamente
os ayuda NextEase.
¿Eso no hace que el servidor
tenga mucho mayor carga
al tener que renderizar
todo antes de mandarlo al usuario?
Bueno, en este caso,
Stunip,
lo que tendrías que tener,
tienes que tener en cuenta
dos cosas.
Uno,
que esto puede ser
una página estática.
Esto puede ser una página estática,
renderizada.
Por lo tanto,
puede ser una página estática
y las páginas estáticas
no hay nada más rápido
en el mundo.
Luego lo veremos.
Luego vamos a ver
un ejemplito.
¿Vale?
Y luego,
por otro lado,
es que es verdad
que obviamente
puedes tener un coste
en el servidor,
pero es que,
¿qué es mejor?
¿Que el usuario vea
una página en blanco
o que tenga un coste
en el servidor?
Ya te digo yo cuál es,
ya te digo yo cuál es la respuesta.
¿Vale?
Luego,
luego iremos,
seguiremos con este ejemplo
para que lo veáis todavía,
todavía más claro,
pero yo lo que quiero
sobre todo es que os quede claro
este tipo de diferencia
entre el clients
al rendering,
por qué se te queda
la página en blanco,
por qué necesitas
este tipo de cosas
porque es súper importante
y NextDS justamente
la gracia que tiene
es esta.
Así que vamos a ello,
vamos a habilitar el,
habilitar JavaScript,
que por cierto,
esto es un muy buen ejercicio
de ver páginas
que funcionen o no funcionen.
¿Vale?
Así que,
venga,
refrescamos,
aquí tenemos los estilos,
perfecto.
Voy a mejorar un poquito
los estilos estos de la app.
¿Vale?
Como no quiero perder mucho tiempo
con temas de estilos,
creando ficheros y tal,
yo me voy a poner
con los estilos estos de
StyleJSX,
pero que si te gustan más otros,
pues utiliza otros.
¿Vale?
Pero ves,
yo estoy utilizando estos
y ya está.
Luego hay otro tema
que también es interesante
con el tema del app,
que a lo mejor
este tipo de page layout
no tienes por qué ponerlo aquí.
Puedes crear un componente
y de hecho,
te lo voy a enseñar
para que veas
que también se pueden utilizar,
por supuesto,
componentes en NextGS,
lo puedes crear y todo esto.
Vamos a crear
nuestro primer componente
que sea el del layout
y vamos a ver
cómo utilizarlo
y además te voy a enseñar
cómo hacer una pequeña configuración
para mejorar
la forma de importar
ficheros
dentro del proyecto
de NextGS.
Nos vamos a ir aquí
a...
Vamos a crear una carpeta.
Aquí dentro...
No, dentro no.
A ver, aquí.
Vamos a crear una carpeta
components, ¿vale?
La carpeta components
vamos a tener un page layout.
Vamos a ponerle JSX.
Vamos a hacer un export
default function page layout.
Esto recibirá el children.
Vamos a hacer un return
de esto.
Y esto,
lo que queremos
es que en lugar de que la app
lo tenga aquí en medio
y tal,
lo que puedes hacer
es extraerlo de aquí.
O sea que lo vamos a sacar de aquí.
¿Vale?
Y lo vamos a poner
en nuestro page layout.
Vamos a moverlo por aquí.
Vamos otra vez
al app
que me he dejado cositas.
Y así este app
lo vamos a dejar
como estaba
para intentar
que tenga
lo menos posible.
¿Vale?
¿Vale?
Y aquí en el main
lo que tenemos
es el children.
Esto lo vamos a grapear
todo con un fragment
y vamos a importar
el head.
From next head.
¿Vale?
Esto es un simple
componente de React
normal y corriente.
Simplemente lo que hemos hecho
bueno,
más o menos
creo que
esto lo podríamos poner aquí.
¿Vale?
Ahora lo vamos a utilizar.
Lo hemos quitado aquí.
Así que esto
si ahora lo refresco
vamos a ver
que se ha perdido el header.
Pero otra forma
que puedes hacer
es componer tus páginas.
Por ejemplo,
si tienes el index
cuando tengas todo esto
lo que puedes hacer
es tener aquí
un page layout
lo pones aquí
y ya está.
Y tú dirás
bueno,
¿y esto por qué
puede ser interesante
y cuál puede ser
la diferencia con lo otro?
Una cosa que puede ser
interesante por ejemplo
es que aquí ya le podrías
pasar el título
que quieras tener
por ejemplo
pues aquí
en lugar de tener
que volver a crear
este head
podrías simplemente
crear esto
pasarlo aquí
como prop.
¿Cuál es la forma correcta?
Bueno,
yo creo que cuanto menos
toques del app
mejor
porque es una cosa
que es como más avanzada
y está más pensada
está más en el territorio
de NextDS
por lo tanto
yo creo que hay veces
que si te puedes permitir
hacer este tipo de cosas
pues mejor.
Entonces este title
que es la prop
le llegará acá
y ahora ya tendríamos
que esto fuese por defecto
y ya utilizaríamos
exactamente lo mismo.
¿Vale?
Así que le ponemos aquí title
guardamos los cambios
y ahora aquí
si nos vamos a la home
que es el único
que está utilizando
el page layout
pues tenemos
el news API
si vamos al about
no lo tenemos
pero si lo cambiamos aquí
vamos aquí a about
y ahora vamos a utilizar
otra vez
el page layout
¿vale?
Lo importamos
y cambiamos el title
otra vez
y aquí en el title
pues podemos poner
por ejemplo
about
por decir algo
¿vale?
y ahora veremos
que sí que tiene
el news API
y además le ha puesto
el title correcto.
¿Vale?
Hasta aquí
todo el tema
de páginas
y todo esto
ahora vamos a hablar
de lo realmente
también interesante
que es
fetching de datos
¿vale?
Porque fetching de datos
es una cosita
interesante
interesante
en NextDS.
Vamos a empezar
primero
haciendo
el client site
típico
y de ahí
lo vamos a ir
evolucionando
a diferentes
a diferentes
ramas
¿vale?
Porque el data fetching
al final
en NextDS
se puede hacer
de diferentes formas
vamos a verlo
como lo haríamos
en una aplicación
de React
normal y corriente
vamos a ver
el problema
que tiene
y lo vamos
a ir evolucionando
¿vale?
Así que
¿cómo haríamos
un data fetching
normal y corriente?
Hemos dicho aquí
que tenemos
este news API
que aquí vamos
a sacar
pues información
para mostrar
artículos
vamos a hacer
una aplicación
como de noticias
me voy a quedar
con esta
de top headline source
vamos a hacer esto
así que
vámonos aquí
a la home
por ejemplo
vámonos a la home
y aquí
¿cómo se haría?
bueno pues tendríamos
por supuesto
state
set state
lo podríamos hacer
con otro
con React query
lo podríamos hacer
con un montón
de cosas
pero lo voy a intentar
hacer lo más
agnóstico
a una decisión
posible
¿vale?
para que cualquiera
pues lo pueda entender
aquí haríamos
el fetching
de los datos
lo típico
¿no?
haríamos
punto den
esto devuelve
una respuesta
una promesa
que la respuesta
tenemos que convertirla
a json
y aquí
sí que tendríamos
la respuesta
si miramos
un poco la respuesta
que la tengo que tener
por aquí
a ver
la respuesta
lo tenemos
en articles
ahora tenemos
status
y ha ido bien
y en articles
deberíamos tener
¿vale?
así que aquí
articles
response
vamos a poner
articles
y entonces
vamos a llamar
esto articles
set articles
y esto
un array vacío
¿vale?
porque articles
aquí podéis ver
la respuesta
es un array
así que vamos a hacer
que es un array vacío
es un array de objetos
y de esta forma
esto es lo que
iremos mostrando
¿vale?
entonces
aquí cuando tenemos
los articles
hacemos un set articles
y ya está
¿qué es lo que podemos
hacer aquí?
vamos a quitar
este aprendiendo next
esto lo vamos a quitar
luego ya haremos
otra vez el tema
de la navegación
y todo esto
y lo que vamos a hacer
es simplemente
pues nada
que si tenemos articles
articles.length
es mayor
si ponemos que cero
pues vamos a hacer
que
bueno vamos a ponerlo así
pero en realidad
no tiene por qué ser
un loading siempre
pero bueno
vamos a suponer que sí
¿vale?
y si no
si es mayor a cero
mira pues perfecto
ya me está diciendo
y hackopailo
todo lo que tengo que hacer
perfecto
vamos a tener aquí
un article
vamos a ver
el h2
¿vale?
vamos a ver aquí
tenemos una url
una imagen
tenemos una imagen
esto nos va a servir luego
¿vale?
pero por ahora
vamos a mostrar la imagen
como está
y luego veremos una cosa
que nos va a traer también
next.js
que nos va a ayudar con esto
¿vale?
tenemos la
ay perdón
que me he copiado la imagen
no
no me quiero copiar la imagen
lo que quiero es poner aquí
la imagen
me he copiado la imagen
directamente
article.url2image
¿vale?
vamos a poner el url2image
con la imagen
luego además arreglaremos
todo el tema del alt
y eso
¿vale?
vamos a traernos el title
el title
que está en article.title
article.title
aquí necesitamos la key
esto es una cosa de React
como podemos ver
no hay key
o sea no tienen key
lo cual me extraña
ah
no sí
no tiene key
lo cual me sorprende realmente
así que vamos a utilizar el índice
no es lo correcto
pero me sorprende
que no tenga una app
y no le ponga una idea
pero bueno
vamos a ponerle el índice
y ya está
y creo que tiene también
una descripción
pues la vamos a añadir
también la descripción
así que article.description
¿vale?
esto por suerte
lo vamos a poder reutilizar
así que fantástico
¿vale?
esto por aquí
esto por aquí
este cierra este
este cierra este
este aquí
vale
ahora también te quiero enseñar una cosa
que es importante
porque si te fijas
se me está quejando aquí
de algo que me dice
oye
no utilices imagen
utiliza el componente image
o sea ya me está aquí
metiendo el spoiler de la vida
esto es Guillermo Rauch
que me está susurrando al oído
y por otro lado
tenemos aquí image elements
tiene que tener un alt prop
este Gonzi
o sea tenemos Guillermo y Gonzi
que nos está aquí susurrando cosas
bueno
en este caso
esto viene justamente
por el linter de next
que viene
o sea nada más instalarlo
ya te viene con este linter
y si tienes bien instalado
lint en tu editor
pues ya te va a llevar cositas
así que nada
le vamos a poner este alt
aunque el alt
no tenemos un
porque el alt
lo ideal sería tener
una descripción
de la imagen
así que
creo que lo mejor sería
image for the article
y poner aquí
article.title
¿vale?
tened en cuenta que el alt
tiene que describir
la imagen
no tiene que
no es el título
de la imagen
ni mucho menos
¿vale?
así que
ponemos esto aquí
y aún así se me queja
¿vale?
se me queja de que no deberíamos
estar utilizando este componente
luego lo arreglamos
y explicamos
y vemos las mejoras
que nos trae
vale ya tenemos esto
más o menos
así que
bueno
vámonos aquí
a nuestra página
a ver la página
donde he dejado la página
aquí
ah es que está aquí
es que ya tenemos aquí
nuestra página
nuestra página
lo que pasa es que
nuestra página
no se ve muy bien
¿no?
no se ve muy bien
nuestra página
¿por qué no se ve muy bien
nuestra página?
porque este article
seguramente le está poniendo
unos estilos aquí
un poco suyos
vamos a poner el div
a ver si se ve mejor
sí
vale
ya tenemos aquí el div
y un poquito mejor
bueno
como puedes ver
esto se rompe por muchos sitios
porque los estilos
que teníamos del display grid
pues hace que no esté en medio
pero bueno
no está mal
teniendo en cuenta
que casi no he escrito CSS
pues no está mal
así que ya puedo quitar esto
que se quedase en el centro
y todo esto
que esto era para antes
y ya está
o sea joder
no está mal
con cero estilos
pues bien
vale
ya teníamos aquí
pues el fetching de datos
típico y tópico
pero como te he contado antes
¿qué pasa con esto?
que si yo le doy a ver
código fuente
y yo busco
por ejemplo
este
fresh from new round
¿no?
yo busco esto
fresh from new round
lo busco
pues no está
o te lo voy a explicar
de otra forma
porque si no seguro
que dices
no lo he entendido
no te preocupes
no lo has entendido
round 2
la segunda forma
en lo que lo vas a ver clarísimo
de nuevo
inhabilitar
javascript
mira
inhabilito javascript
le voy a dar a refrescar
y se me queda el loading
¿qué está pasando con esto?
lo que está pasando
es que estamos
estamos trayendo
justamente los
primero avísale a midu
aquí me tienes que avisar
¿de qué
me tienes que avisar?
pues eso
que
no sé
¿qué ha pasado?
midu
mira
dm
para cuando pueda
mensaje de lee
oh
oh lee
que bueno
que majo
vale
pues entonces
esto se queda totalmente en blanco
se queda vacío
¿no?
¿por qué?
porque estamos haciendo el fetching de datos
en la parte del cliente
claro
en la parte del cliente
si no cargamos el javascript
entonces no se cargan los datos
entonces se queda en blanco
ya ves por donde van los tiros
¿no?
vale
pues ¿qué vamos a hacer con esto?
por suerte Next.js
nos trae una solución a este problema
y es poder hacer el fetching de datos
en la parte del servidor
¿cómo vamos a hacer esto?
lo que vamos a hacer
es que este use effect
vamos a quitarlo
me voy a traer lo que hemos hecho dentro
¿vale?
vamos a quitar este use effect
voy a quitar también el estado
porque no lo vamos a necesitar
lo que vamos a hacer
es que estos artículos
vengan a través de las props
y tú dirás
¿cómo que a través de las props?
o sea
no tiene sentido
¿cómo va a venir a través de las props?
sí que va a ser a través de las props
porque vamos a utilizar justamente
un método
que se llama
export
export
tenemos que exportar el método
async
function
static props
no
aunque ahora lo veremos
get server site props
¿vale?
lo que vamos a hacer es ejecutar
en el servidor este método
que es el que se va a encargar
de hacer el fetching de datos
en el servidor
que por cierto
en el servidor
fetching de datos
siempre
siempre va a ser más rápido
siempre
¿vale?
siempre va a ser más rápido
hacer un fetching de datos
y devolver un string
que no hacer el fetching de datos
en el cliente
¿ok?
eso tenlo siempre clarísimo
porque es una lección
que aprenderás
¿vale?
entonces vamos a hacer el fetch
justamente aquí
pero claro
ahora necesitamos tener un estado
ya te digo yo que no
no necesitamos tener un estado
lo que vamos a hacer
como ya tenemos una función
async aquí
lo que vamos a hacer aquí
es tener aquí el response
hacemos una wait
bueno
vamos a hacerlo totalmente
async await
porque si no
os liáis
¿vale?
así que voy a hacer aquí
el response
luego aquí vamos a tener
articles
del await
response
punto json
¿vale?
pero ya sabéis que
los async await
y las promesas
se pueden mezclar
¿vale?
o sea tú puedes poner aquí
un punto den
y puedes esperar eso
y tal
pero bueno
hay veces que esto
vuelve un poco locos
así que lo vamos a arreglar
y aquí lo que podemos hacer
que tendríamos los artículos
sería hacer un return
de unas props
y ¿cuáles son las props
que queremos tener?
articles
¿vale?
así que lo que estamos
consiguiendo aquí
es simplemente
recuperar los artículos
en la parte del servidor
hacer el fechín de datos
en el servidor
y en el servidor
tener esta información
para poder renderizarla
en el servidor
y de esta forma
cuando el usuario
vaya a la página
ya tendremos los artículos
y esto
esto que ves aquí
esto ya no va a pasar
de hecho lo que pasaría
en todo caso
si es cero
no va a ser un loading
sería
no tenemos artículos
simplemente
no habría artículos
ya está
eso es lo que pasaría
así que vamos a ver
si esto funciona realmente
nos vamos a ir aquí
voy a refrescar
bueno voy a cerrarlo
voy a hacerlo bien
luego inhabilito
javascript
vemos la diferencia
¿vale?
refresco
parece que todo funciona igual
esto parece que
está todo exactamente lo mismo
¿vale?
pero
vamos a ver la diferencia
si le doy al botón derecho
ver código fuente
parece que está igual
pero voy a buscar este título
a ver qué pasa
fíjate
aquí aparece una vez
pero estos son las props
que están en un objeto
que esto es bastante interesante
lo que pasa es que
si me pongo a explicarte esto
ya me vuelvo un loco
pero tienes que tener en cuenta
venga te lo voy a explicar
porque yo lo que quiero
es que sepas bien
o sea quiero que entiendas bien las cosas
quiero que entiendas bien las cosas
¿vale?
¿por qué hay un objeto
con las props?
¿por qué aparece esto aquí?
¿por qué aparece esto aquí?
¿ves?
este script
y que tiene aquí props
page props
articles
y aquí toda esta información
¿por qué tiene que hacer esto?
¿por qué pasa esto?
lo que está pasando
es que NextYes
hace el fetching de datos
en el servidor
y luego
al cliente
le tiene que inyectar
la misma información
que ha utilizado en el servidor
para rendizar la aplicación
para que el cliente
sin hacer ese fetching de datos
sea capaz de renderizar lo mismo
y de esta forma
encajarlo
de esta forma
en el servidor
renderiza la aplicación
y en el cliente
lo que hace es hidratarla
esto es lo que se le llama hidratar
¿y qué quiere decir hidratar?
pues que va a aprovechar
lo que ha renderizado el servidor
que es un string
y lo que va a hacer
con ese string
que al final es estático
porque no tiene eventos
no se están ejecutando los efectos
lo que está haciendo es
como dotarlo de vida
eso es lo que está pasando
¿vale?
así que eso es lo que tienes que entender
que por eso tiene
y necesita
enviar este objeto
porque si no
no sería capaz
de el cliente
sin el fetching de datos
ser capaz de renderizar lo mismo
por ejemplo
imagínate
cómo debería actuar
o sea ejecutar un efecto
si no sabe
qué información
debería tener ese efecto
no sería capaz de calcularlo
así que por eso
es importante este objeto
¿vale?
para que lo sepas
tomo agua
Stanip
dice una cosa
voy a leer
voy a leer un poco
esto no es lo mismo
que L de Jason
como los Rick Snippets
no, no es lo mismo
lo que sí que tiene que ver
que los dos son Jason
pero no tiene nada que ver
en el sentido
de que uno es
para temas de
datos enriquecidos
y esto en realidad
lo que aprendo contigo
no tiene precio
los bits sí
los bits sí
cuentan dinero
muchas gracias hombre
yo prefiero que aprendáis mucho
os acordéis de mí
sí
había gente
decía por aquí
¿cómo quito el x2
en la velocidad del reproductor?
ay perdón
estoy hablando muy rápido
claro
a veces me decís
es que hablas muy lento
es que me aburro
es que claro
y ahora
es que voy muy rápido
bueno
si no se ha entendido algo
voy a estar 5 minutos
ahora leyéndoos
si queréis
si tenéis alguna duda
si alguna vez entendido
si queréis que revisemos algo
ahora es el momento
¿vale?
y os leo
y le damos cañita
no nos preocupemos
si hoy no nos da tiempo a todo
el viernes que viene
seguimos con Next.js
y el siguiente
y hasta que terminemos el curso
o sea que no pasa nada
y por debajo
¿qué servidor sirve?
bueno
Next.js utiliza por debajo
Express
que yo sepa
a día de hoy
me imagino que poco a poco
se lo querrán quitar
de encima
más que por un tema
de evitar dependencias
y cosas así
pero que yo sepa
a día de hoy
Express
Stanip dice
Midual
hacer el fetching
en el servidor
no sería también más seguro
ya que estaríamos ocultando
cuál es la dirección
y el endpoint de la API
de la que queremos obtener datos
efectivamente
Stanip
de hecho es muy interesante
de que claro
la URL antes
era totalmente visible
de hecho
os lo podía haber enseñado
y no lo he enseñado
como se veía
en la network
como se veía
en el cliente
que se estaba haciendo
el fetch
y ver la URL
y todo esto
con la API key
en cambio
con el getServerSideProps
no vamos a ver
en el cliente
ningún sitio
que se está haciendo
este fetch
si vamos aquí
y yo levanto aquí
el inspeccionar
y me voy aquí a red
lo que vamos a ver
que no vamos a ver aquí
ningún fetch
en fetch
no hay nada
en cambio
con la otra versión
que teníamos
con el useEffect
sí que hubiéramos visto
ahí un fetching de datos
a la API
entonces puede ser
como dice Stanip
puede ser que sea más seguro
especialmente
si estáis utilizando
APIs
que no queréis
que sean públicas
y hay veces
que pueden tener
todo el sentido del mundo
aún así
en este caso
no lo hacemos
en este caso
no lo hacemos
por eso tanto
sino lo hacemos
más bien
por los beneficios
que le da al usuario
primero
y luego
de cara a SEO
dice
no es peligroso
que el servidor
ejecute código arbitrario
en este caso
hiciste un fetch
pero quién sabe
lo que un dev
podría hacer
hombre
Asdolo
a ver
no es código arbitrario
es código
que efectivamente
está poniendo un dev
pero es que
estamos hablando
entonces
de la peligrosidad
de que existan
los desarrolladores
yo no estoy utilizando
NextDS
en mi empresa
pero también
tenemos desarrolladores
y desarrolladoras
que pueden poner
código arbitrario
entonces
no
no es peligroso
no es peligroso
en el sentido
de que esto
sería peligroso
en todos los sitios
no
esto no es nada
vale
me gusta mucho
como enseña a Midu
gracias hombre
el gordo
esto me lo tengo que ver
dos veces
bueno pues no pasa nada
me gustaría saber
todo esto sin Next
bueno yo todo esto
lo he hecho sin Next
y hay veces que hemos hecho
server site
sin Next aquí
Midu
y esas props
en producción
se ven tan bien
efectivamente
esas props
ahora mismo
sí que se ven
luego
esto es con el
en el modo
get server site props
vale
luego veremos
que con el estático
o sea se pueden
lograr diferentes cosas
pero ahora mismo
sí que sí que se ven
y se verían
y es una pena
pero es una cosa
muy interesante
porque si vais
a muchas páginas
por ejemplo
para que os hagáis una idea
que es un problema
no es un problema
es una cosa
que le pasa a todo el mundo
vale
por ejemplo
vámonos a
esta es foto casa
vale
que también tiene
también tiene
también tiene react
pero no tiene Next
pero fíjate que tiene
window.initialprops
y tiene básicamente
no lo mismo
pero tiene
la misma técnica
y fíjate aquí
toda la información
que hay
esto es uno
de los grandes problemas
que esto se va a solucionar
esto es una de las cosas
que quiere solucionar
justamente
los react server components
para evitar
este pedazo
de objeto
que tienes que enviar
y entonces hacerlo
como más granular
así que por ahí irían las cosas
hoy hablas por tres
joder
es que estoy intentando
abarcar muchas cosas
en poco tiempo
y por eso voy un poco
rapidito
lo siento
perdonadme
espero que no
no me lo tengan muy en cuenta
vale
pero ahora estoy intentando
ser un poco más
sosagado
eh
buena vida
gracias por la nueva suscripción
gracias
pablozwan
muchas gracias
guilledef00
muchas gracias a todos
eh
vale
hay mucha información
que decir
si es que hay mucho
mucho
mucho
ah
que hay un
hay un sorteo
vale vale
es que no
no estoy pendiente
hostia
hostia
bueno
o sea
pensaba que
vale vale
que vamos a hacer un sorteo
en directo
vamos a hacer un sorteo
en directo
amigos
vamos a hacer un sorteo
en directo
eh
si si
es que no había
no tengo twitter abierto
y no había visto
entonces
vamos a hacer un sorteo
en directo
al parecer
parece ser
que bueno
estaría bien
que o sea
está bien
o sea
me da mucha envidia
porque vamos a hacer
este sorteo
estoy que bloqueo yo
y no hay sorteo
ni hostia
eh
bueno
no pasa nada
vamos a hacer el sorteo
haremos el sorteo
haremos el sorteo
vale
ya tengo aquí
tengo un enlace
para el sorteo
lagrimita
porque es un sorteo
que está súper chulo
o sea
es una camiseta de vercel
y es una taza de vercel
que
que yo no tengo
yo no tengo esa taza
y todo el mundo me
me chulea
o sea vais a tener vosotros
la oportunidad
de ganar la taza
de vercel
y una camiseta de vercel
o sea
que es muy fuerte
me dais un poco de envidia
pero bueno
vamos a hacer
vamos a continuar
vale
pero luego al final
en
40 minutos
o así
haremos el sorteo
vale
al final de stream
hacemos el sorteo
así que estate atento
atenta
y ten la oportunidad
de ganar tanto la taza
como la camiseta
vale
o sea
y además hay camiseta
para mujer
que lo sepas
y muchas gracias a Lee
y a Gonzi
a los dos
justamente por
por dar esta
esta sorpresa a la comunidad
muchísimas gracias
hombre
vale
os sigo leyendo
y ya sabéis
al final tenemos sorteo
hola maestro
aquí te dejo un poquito de bits
por los cursos
que has subido a youtube
muchas gracias Adri
muchísimas gracias
crack
os agradezco un montón
la
el cariño
y los bits
vale vale
pues eso
que la verdad
es que está buenísimo next
pero para mi nivel
va muy rápido maestro
bueno
es verdad que para next
tenéis que tener en cuenta
que tenéis que saber react
tenéis que saber un montón de cosas
pero bueno
yo creo que ahora
un poco los ejemplos
que vamos a tener que incidir
en algunas cosas
iremos viendo
y a lo mejor vais
vamos cerrando un poco
el círculo
¿cómo harías un fetch
de datos en el server site
si necesitas autenticación
en los headers de la request?
pues lo harías ahí
es que a ver
tú aquí
justamente
en este fetch
como estás viendo
tú en este fetch
tú aquí le puedes pasar
lo que quieras
en los headers
¿sabes?
tú aquí lo que tendrías
le puedes pasar
tanto el mezzo
le puedes pasar los headers
y entonces
content time no tiene mucho sentido
pero imagínate
el beater token
beater token
pues se lo puedes pasar aquí
a ver si nos pone un token
mira nos pone un token
y todo
bueno pero se lo puedes pasar
y lo bueno
es que esto
queda en el servidor
y no lo vería el usuario
así que así lo podrías hacer
sin ningún tipo de problema
de hecho
para que
os hagáis una idea
de lo bestia
que es esto
porque a lo mejor
claro
he hecho un fetch
igual esto
no parece muy bestia
vosotros aquí
podríais hacer un mongo
de b.connect
de lo que sea
y hacer un mongo
o sea
podríais hacer un find
de la información
y devolverla
o sea
aquí podríais
directamente acceder
a la base de datos
para que os hagáis
a la idea
de lo potente
que es esto
¿vale?
para que os hagáis
a la idea
vale
que interesante
los data fetching
desde el servidor
son los que cobra
Vercell
a ver
sí
claro
ahí tiene
claro que lo podría cobrar
Vercell
pero bueno
tiene una
tiene bastante
bastante
es bastante
generoso
¿vale?
tiene transferencia de datos
y no sé si ese tipo
de transferencia de datos
que es dentro
de su red
no sé si esa la cobran
creo que la que más
tienen en cuenta
es la transferencia de datos
de su servidor
hacia el usuario
creo que la interna
que yo recuerdo
no la tiene
pero bueno
si está conci por ahí
igual te lo puedo decir
y access about
ah muy buena
esa justamente
ahora es lo que íbamos a ver
así que ahora
ahora comentaremos esto
ahora comentaremos esto
¿vale?
vale
a ver
os leo un poco así en general
me encanta
tus cursos
es mejor que la mayoría
que la mayoría
que la mayoría
bueno muchas gracias
me parece muy bonito
el comentario
vale
midu ando realizando
un blog en NextGS
pero no entiendo bien
vale eso lo vamos a ver también
¿vale?
lo del get a static path
lo vamos a ver
cómo funciona en su conjunto
y todo esto
lo vamos a ver ahora
¿vale?
vale
si hay un
hostia
Paul Camacho
muchas gracias
gracias por la
pedazo de suscripción
muchas muchas muchas gracias
muchas gracias
vale
pues venga va
vamos a continuar
hay diferentes cositas
de en get servers
hay props
que no he comentado
y que
hostia
se me ha
tenía por aquí
espérate que no me salga
ahí el enlace
que no me salga
el enlace
del tweet
momento
que muevo el twitter
que lo he puesto
todo notado
vale
perfecto
vale
muchas gracias Paul Camacho
por las subs
muchas muchas muchas gracias
vale
pues entonces
cosas que podéis tener
en cuenta
con el tema
de get server
side props
que en el get server
side props
podéis tener acceso
al objeto
de la respuesta
y la respuesta
vale
aquí justamente
aquí os llega
un parámetro
que es el de context
debéis tener un poco
de cuidado con este
porque
hay veces que os puede
no interesar
pero podéis por ejemplo
cambiar la cabecera
de la respuesta
podéis mirar
si realmente
estás en el servidor
o no estás en el servidor
porque hay que tener
en cuenta
que este método
este método
de aquí
este método
vale
este método
se ejecuta
en el servidor
como hemos visto
pero también
se ejecuta
en el cliente
a veces
y ahora te voy a enseñar
cuando se ejecuta
en el cliente
vale
hasta ahora hemos visto
que se ejecuta
en el servidor
y entonces en context
tendrías la oportunidad
de acceder
a la request
y a la response
cambiarle los headers
podrías hacer un montón
de cosas
básicamente
la request y el response
son los objetos
que tendrías en express
ahora
este método
solo se ejecuta
en el servidor
porque como pone
getServiceIProps
parece que solo se ejecuta
en el servidor
y no es exactamente así
y vas a ver por qué
vale
hasta ahora
en nuestro ejemplo
que teníamos aquí
de nuestra aplicación
cuando íbamos
vale
donde está nuestra aplicación
está aquí
vale
está aquí
nuestra aplicación
cuando íbamos a nuestra aplicación
y yo refresca
os he dicho que este fetch
justamente se hacía en el servidor
pero qué pasa
si nosotros
estamos en la página de about
vamos a poner aquí
en el patch layout
este que habíamos hecho
vamos a poner un enlace
vale
vamos a poner aquí
un
vamos a poner un dip
vamos a poner esto por aquí
y vamos a poner esto por aquí
vamos a poner esto
con el style
vamos a utilizar
vamos a hacer esto bien
vamos a hacerlo bien
vale
vamos a por aquí
esto
flex
eh
detection
no
justify
content
space between
vale
vale
este patch layout
este patch layout
ah
porque no
no he puesto
digo hostia
que me falta
en lo que estaba pensando
claro
estoy pensando en ello
pero no lo he puesto
hay veces que me pasa
no sé si os pasa
a mí me pasa a veces
que pienso en cosas
que creo que he puesto
porque a veces mi cabeza
demasiado rápido
vale
he puesto aquí un botón de about
entonces vamos al about
¿qué pasa si yo entro
directamente a la página
de about
¿no?
le voy a refrescar
y ahora
vamos a hacer que esto
al darle click
al logo
nos lleve directamente
a la home
¿vale?
vamos a poner esto por aquí
imagínate que ahora
pues tenemos este logo
y el logo
nos lleva a la home
¿qué pasa
cuando yo voy a la home?
porque no va a pasar
por el servidor
y por lo tanto
¿cómo va a hacer
el fetching de datos?
pues si le doy
podemos ver
que ha hecho
el fetching de datos
pero ¿cómo ha pasado esto?
vamos a verlo
mira
vamos al about
voy a darle a inspeccionar
voy a quitar todo esto
y nos vamos a enfocar
sobre todo
en la red
¿vale?
vamos a hacer esto
un poquito más grande
me gustaría quitar
esto
vale
vamos al about
vale
no tenemos fetch xr
esto en realidad
es un tema de desarrollo
fuera
nos vamos a la home
pam
vale
¿qué es lo que está pasando
por aquí?
lo que está pasando por aquí
fíjate que tenemos
este index.json
¿de dónde ha salido
este index.json?
lo que ha pasado
es que este index.json
lo que ha hecho
fíjate
es recuperar
en el servidor
cuando ha necesitado
justamente
estas props
o sea
el método
sí que se está ejecutando
en el servidor
pero
lo que ha hecho
es ejecutarlo
sólo cuando lo ha necesitado
¿vale?
el método
este
este método
lo ha ejecutado
en el servidor
pero lo ha ejecutado
también en una navegación
en el cliente
y lo que ha hecho
es recuperar el json
con la información
que necesitaba
de esta forma
este método
sólo lo va a ejecutar
cuando necesita
ya sea en el servidor
o desde el cliente
va a decir
ostras
voy a llamar a esto
para que me recupere el json
el servidor
de forma interna
ejecutará el método
y tendrás
justamente
el mismo json
que eso descargará
y podrá mostrar
lo que quieras
así que tenlo en cuenta
también
porque no siempre
o sea
a veces
hay gente que piensa
ah pero esto significa
que cuando haga una navegación
pues esperará
y tal
y ya hemos visto que no
porque de hecho
si esto
lo ponemos más lento
nos vamos al about
voy a refrescar
¿vale?
nos vamos a news API
espérate
porque ahora
he puesto esto demasiado
vamos a ponerlo sin limitaciones
¿vale?
vamos a ponerlo lento
nos vamos a la home
¿vale?
esto porque es de
tema de desarrollo
pero ahora lo veremos
pero fíjate
¿vale?
fíjate que lo está haciendo aquí
y entonces
lo ha tenido aquí
¿vale?
y esto es la imagen
y ya está
así que
con esto
ya tendríamos
todo resuelto
con el tema
del get server side props
pero
alguien podría decir
hombre
esto está muy bien
pero realmente
no es muy interesante
¿no?
porque
¿por qué debería hacer
esta llamada
en el get static
o sea en el
get server side props
y esto
como mucha gente decía
que estaba preocupada
decía
ostras pero esto
me va a costar dinero
o esto le costaría dinero
o esto
va a ser un poco más lento
porque si tengo que estar
haciendo todo el rato
tengo que estar haciendo
estas llamadas
desde el servidor
pues vaya rollo ¿no?
porque cada vez que entre
como hemos podido ver
justamente
pues vamos a tener que esperar
de hecho vamos a ver un poco
en la red
si le ponemos el rápido
tampoco hace falta
que pongamos el lento
si yo quiero diar
¿qué es lo que está pasando
por detrás?
el servidor está haciendo
el fetching de datos
y cuando está haciendo
el fetching de datos
entonces ya lo puede enseñar
pero tiene que esperar
a que se resuelva
esa promesa
del fetch
de la API
si no
no puede mostrar
la información
y ya podemos ver aquí
pues todo lo que ha tardado
justamente en enseñarnos
esa información
vale
pues hay otra forma
de hacer esto
tiene dos formas
de hacer pre-rendering
next.js
una
el servidor
como hemos visto
y otra
sería justamente
el get static props
que esto lo que nos va a permitir
es crear páginas
estáticas
en nuestra aplicación
así que
en este caso
lo que deberíamos hacer
lo voy a comentar
aunque vamos a ver
lo voy a copiar
y lo vamos a poner aquí
vale
¿qué pasa?
que ahora podemos cambiar esto
por get static props
vamos a quitar esto de context
porque no lo utilizamos
y lo podemos dejar
exactamente igual
no necesitamos hacer
absolutamente nada
¿qué es lo que va a hacer
el get static props
y cuál es la diferencia
con el get server side props?
mientras que el get server side props
va a hacer una petición
al servidor
y va a ejecutar esto
en cada request
el get static props
lo que va a hacer
es simplemente
hacerla una vez
y lo que va a hacer con esto
es pre renderizar
la página entera
con la información
que estamos creando aquí
así que cada vez
si aquí
hacemos
n
n request
se ejecuta
n veces
¿vale?
para n request
esto se ejecuta
n veces
por lo tanto
esto
será
¿para qué será bueno?
pues
para datos
que necesites
que sean
muy live
muy
muy live
porque luego veremos
que tiene
get static props
para mejorar esto
que tengan que ser muy live
y yo que sé
que por X motivo
no quieras que sea estático
o porque
tiene
demasiados
datos
dinámicos
y esto lo veremos ahora
¿vale?
y esto
¿qué es lo que hace?
pues esto es
tú haces n request
y esto
se ejecuta
una vez
en build time
¿vale?
en build time
o
para
refrescar
la página
que lo veremos después
¿vale?
pero esto por ahora
lo ponemos aquí
así
vamos a hacerlo así
lo dejamos así
¿vale?
entonces
vamos a guardar los cambios
y vamos a ver si nuestra página
sigue funcionando
¿vale?
funciona exactamente igual
no ha pasado absolutamente nada aquí
¿qué ha pasado aquí?
o sea
si no se ve ninguna diferencia
bueno
va a ser difícil
que veáis una diferencia
en modo desarrollo
¿por qué?
porque en modo desarrollo
obviamente
mientras queréis trabajar
vais a ver que
no vais a notar ningún cambio
y vais a querer que siempre
esté recuperando estos datos
y no
a lo mejor hace algún tipo
de cambio interno
pero no lo vais a notar
va a estar intentando
siempre tener
información fresca
justamente para esto
donde vamos a ver esta diferencia
y donde vamos a notarlo
es justamente cuando hagamos
en npm run
que antes hemos visto
que teníamos el dev
el build
el link y tal
vamos a hacer un build
con el get static props
y luego lo vamos a hacer
con el otro
y vamos a ver
cuál es la diferencia exactamente
vamos a hacer un npm run build
¿vale?
validando los datos
y no tengo tipos
o sea que
ah
ahora os explicaré esto
antes de que se me olvide
¿vale?
vale
ya podemos ver aquí
que nos ha compilado todo
y además
nos da bastante información interesante
aquí a nivel de página
y aquí fíjate que tenemos
esto sería el index
esto sería la app
esto sería el 404
esto lo ha creado
automáticamente
esta es la página de about
esta es la de api
que luego veremos también
cómo funciona
y aquí tenemos la de article
¿vale?
la de article con el segmento dinámico
¿qué significan estas cositas
que vemos aquí a la izquierda?
vale
pues lo que significa
es que son diferentes formas
en las que se han generado
esas páginas
tenemos páginas
que tienen get service iprops
tenemos páginas
que no tienen
get service iprops
ni tienen nada
entonces
lo que ha hecho
es dependiendo del tipo de ruta
ha hecho una cosa
o ha hecho otra
por ejemplo
en el índice
que el índice
justamente el que teníamos
en el estático
que hemos dicho
¿no?
hemos hecho el
get static props
nos ha hecho el ssg
¿vale?
static
creo que es
static site generation
el static site generation
es importante
la página generation
porque significa
que lo hemos generado
de alguna forma
y esto automáticamente
genera un
html estático
con un json
¿ves?
hemos utilizado
el get static props
luego estos de aquí
que son totalmente estáticos
que tenemos la página de about
el 404
esto lo que ha hecho
es renderizar
una página html
¿por qué ha hecho esto
y es totalmente estático
sin ningún tipo de generación
ni initial props?
porque si vamos a la página
de about
lo que ha hecho simplemente
es ejecutar
el react.render
react.dom.render
tu string
ha hecho esto
y esto lo ha convertido
en un string
y es lo que te va a devolver
punto pelota
y ha hecho una página estática
con eso
de hecho
para verlo
si no me equivoco
lo deberíamos tener
en static
no sé si en static
no sé dónde deja esto ahora
porque antes lo dejaba
en otro sitio
debería estar por aquí
bueno si no lo podemos buscar
sí
está por aquí
estos son los chunks
esto es el servidor
páginas
vale esto
tengo las páginas
aquí está el html
vale
vale
en la carpeta .next
esta que vemos aquí
pues lo que tenemos
es justamente
lo que ha generado también
así que tendría
de hecho
para asegurarme
y que no lo está poniendo
en otro sitio
y la estoy liando
lo vamos a hacer
ah y de hecho
aquí lo debería poner
lo debería haber puesto
pero bueno
debería
ves aquí tenemos
vale vale
es que hace tiempo
creo que lo hacían
en el auto
en el build
no me acuerdo
vale
pues entonces tendríamos aquí
pues un montón de archivos
que ha generado
de optimizaciones que hacen
y tal
pero si vamos un poco mirando
en static
no
en server
vamos a poder
pages
vamos a poder ver
las páginas que ha generado
así que vamos a ver
el index.html
y este es el html
que va a servir
así que fíjate
todo el html
y fíjate
que aquí está lo importante
con el get static props
que hemos utilizado
vale
hemos utilizado
get static props
fíjate que en el index.html
lo que ha hecho es
en tiempo de build
ha hecho el fetch
y ha generado la página
y aquí tenemos toda la información
de nuestras noticias
tenemos aquí el título
tenemos la descripción
tenemos la imagen
lo tenemos todo
para que te hagas una idea
de que esto es estático
de verdad
lo que puedes hacer
es simplemente
y te vas a next
nos vamos a server
vámonos a pages
npx server.server
es un comando
que lo que te permite
es servir estáticos
en tu página
en tu sistema de archivos
vale
y lo importante
es que tengas un index.html
pues vamos a hacer
npx.server.
y si yo voy a esta
a esta url de aquí
lo que debería
es servirme
este index.html
así que vamos a ir
y fíjate
lo que tenemos
es justamente esto
no sé por qué
no pilla los estilos
vamos a verlo
porque igual
hay algo ahí que
pero si los estilos
bueno
claro
es que a lo mejor
no me está pillando
el resto de
ya sé por qué es
es porque
sí que me sirven
des.html
pero el resto de cosas
las ha optimizado
y las ha puesto
en otras rutas
y todo esto
por eso no pilla
pero lo que quería
que vieses
en realidad
olvídate de los estilos
es el tema
de que el contenido
está aquí
y que si miramos aquí
inspeccionamos el elemento
y miramos en la red
y yo refresco
vamos a ver
que no tenemos
ningún tipo de fetch
o sea
esto es totalmente
estático
esto lo está haciendo
de forma totalmente
estática
se la ha descargado
y ya está
vale
si esto lo hiciésemos
con el client-side rendering
sí que lo veríamos
y esto no lo podríamos hacer
con el getServerSideProps
de hecho lo vamos a ver
en un momento
y vamos a ver
que el index.html
mira
vamos a copiar
este index.html
y este es con
getStaticProps
vale
este es el index.html
con getStaticProps
vamos a volver a poner
el getServerSideProps
vamos a poner esto
por aquí
vamos a dejar esto
por aquí
saca pam
vale
lo vamos a poner por acá
vamos a hacer otra vez
una build
y vamos a ver
la diferencia
que hay entre el index.html
del getStaticProps
y del getServerSideProps
vale
vale
fíjate que ahora
tenemos aquí justamente
la diferencia
ves aquí que ahora
sale un símbolo
que el index
ahora es
como este
signo de lambda
esto es porque
ha hecho un
server-side renders
addRuntime
esto significa que
en lugar de hacer
el fetching de datos
en build time
en build time
es en este momento
en esta compilación
lo que está haciendo
es que cuando hayan
a request de un usuario
entonces hará
el fetching de datos
obviamente
mucho más costoso
menos óptimo
tiene problemas de performance
pero hay veces
que tienes que hacerlo
porque si tienes
ilimitado número
de resultados
o sea esto porque
es una página
en concreto
pero como veremos
más adelante
hay veces
que si tienes
este article
y tienes
el id.js
y claro
tienes ilimitados
números de id.js
te puede ser
bastante complejo
hacer justamente esto
o te puede interesar
porque quieres que
sea inmensamente rápido
aunque bueno
siempre puedes hacer
workarounds
o puedes poner
cachés de headers
y ya lo tendrías
pero bueno
vamos a cambiar con esto
getServerSideProps
vamos a volver aquí
ahora a poner un
npnRuntBuild
ah bueno ya lo hemos hecho
vale porque ya hemos visto
aquí la diferencia
y ahora
si vamos aquí
al next
vamos a server pages
y buscamos el index.html
fíjate que es que ni siquiera está
fíjate que el index.html
que antes estaba por aquí
es que ahora ni siquiera está
es que simplemente
ni siquiera aparece
porque no nos ha generado
la página
no nos ha generado
la página de index.html
o sea que mientras que antes
ves que ahora
esto está tachado
esto es porque
la la la
o sea la ha quitado
porque esto ahora
lo va a generar
no no en el cliente
que lo teníamos aquí antes
con todo esto
sino que cuando reciba
la request
entonces devolverá
el html
desde el servidor
así que lo importante
es que tengas en cuenta
esta diferencia
vale
vamos a ponernos
vamos a ver el tema
de la de la imagen
que es importante
y ya está
ah
os puedo comentar otro
que es el de
el next export
vale export
que es un poco
es una funcionalidad
un poco
avanzada
pero que
te permite
básicamente exportar
toda tu aplicación
en html
estático
y está bastante bien
porque esto lo que te da
son todos los estáticos
pero
no soporta exactamente
la mayoría de las funcionalidades
de next.js
sí que las soporta
pero claro
ten en cuenta que al
escupir exactamente
estáticos
pues vas a perder
muchas de las funcionalidades
de next.js
por ejemplo
el incremental static
generation
el get server site props
y todo este tipo de cosas
al final lo que te va a hacer
es devolverte exactamente
pues
estáticos
para que lo veas
lo que puedes hacer
es ejecutar
no sé por qué
no va para aquí
pero si no me equivoco
es básicamente este
next export
y vas a ver un poco
la diferencia
si tú ejecutas aquí
el run export
esto lo que hace
es exportar
amigo
mira esto es nuevo
antes no
maple pages
ah mira
pues antes esto
no
claro antes
como cuando yo hice
el export
la última vez
no necesitaba este tipo
de cosas
del image optimization
default loader
is not compatible
with next export
using the provide
which report
os voy a decir
party loader
use the loader
no sé qué
no sé cuánto
claro me imagino
que es por el tema
de las imágenes
porque la optimización
de las imágenes
no sé si la estamos
utilizando
yo creo que no la está
utilizando
ah sí
mira en esta página
la vamos a quitar
y seguramente ya funcionará
porque claro
la optimización
ah no
pues no
tampoco
pero la optimización
de las imágenes
entiendo que necesitas
servido para funcionar
entonces claro
si pones ahí
la funcionalidad
de export
también podría hacer
que funcionase
sin ningún problema
la verdad
pues nada
nos vamos a quedar
con la ganas
de ver el export image
y ya está
pero esto básicamente
lo que te hace
es exportarte
todo el html
y ya está
export image api
no me voy a meter
en esto
y ya si eso
si os interesa
me lo miro
para el viernes
que viene
venga
vamos con el tema
de la imagen
ya que estábamos
que os he dicho
si van a echarlo
de la imagen
aquí se me estaba
quejando esto
de justamente
el tema
de la imagen
que es lo que pasa
bueno
pues que next
tiene un componente
que es el de image
from
barra
next
image
que es lo que hace
voy a bajar un poquito
la musiquilla
que además me tiene
me tiene un poco ya
frito
la música esta
a ver si puedo poner otra
esta misma
vale
pues
lo que hace este componente
de image
es que te va a optimizar
las imágenes que estás cargando
y como te las va a optimizar
bueno
le puede hacer diferentes
transformaciones
por ejemplo
de ancho
de hecho le tienes que indicar
el ancho
vas a ver que no
no va a funcionar tal cual
no funciona por defecto
con imágenes externas
o sea hay que hacer
unas cuantas cosas
por ejemplo
vamos con este image
que es el que se está quejando
y vamos a poner aquí
image
hasta aquí parece que todo bien
así que vamos a hacer
el en pie en run dev
y vamos a volver
ya estoy haciendo el en pie en run dev
así
ya tenemos aquí
en pie en run dev
pues venga
vamos a esta página
vale
ya se queja
vale
ya te dice
uy
se estaba quejando
y salió un error
bueno
aquí sale otra vez
dice
el componente imagen
necesita justamente
un width
y un height
¿por qué?
porque es
o
le puedes decir
light out fill
lo que pasa es que
normalmente es mejor
que le digas
el ancho
y el alto
porque de esta forma
va a poder
ocupar el espacio
de la imagen
y no tendrás saltos
en el contenido
que además esto es una métrica
una web vital
súper importante
el
el cls
que es el cumul
a tu layout shift
que esto ya podría dar
una charla entera
otro día
porque me encanta
la performance
pero
aparte de esto
lo que vamos a conseguir
diciéndole un width
y un height
es justamente
que ocupe
le vamos a decir
bueno pues ocupa
no sé
sería más importante
la reacción de aspecto
¿no?
pues yo que sé
vamos a ponerle algo así
300
¿vale?
con esto
nos va a dejar
de dar problemas
vamos a mirar
de hecho
no sé si hay otro
vale
ahora nos da otro problema
no sé por qué
no me aparece
normal
a este
no sé
se ha quedado un blanco antes
y ahora me da otro problema
me dice
vale
sí está muy bien
me has puesto
el ancho
el alto
perfecto
pero
este hostname
no está configurado
en las imágenes
de next.conf
y .js
claro
¿qué pasa?
que como este tipo de imágenes
va a llegar realmente
a nuestro servidor de Vercell
y las va a tratar
lo que quiere evitar
con esto next
es que te puedan colar
cualquier tipo de ataque
y se cuele en el servidor
y ya está
así que tienes que ser tú
el que le indique
cuáles son los hosts
que vas a soportar
en tu configuración
de hecho
vamos a ir a next.config
y aquí
ya nos dice
que son images
vamos con domain
y aquí tendría que ser
el dominio
quien se está quejando
que era algo de TechCrunch
mira
es que te lo dice y todo
estaría bien aquí
poder tener
sabes que te diga
quieres añadir este host
directamente
y poder darle
eso sería genial
eso sería genial
es una cosa que hacemos
en mi empresa
con este tipo de
cuando sabemos que es un error
de es que
a ver
solo tienes que hacer esto
y te lo cambio yo
entonces
lo que hemos puesto
es que aquí te pregunte
¿quieres que te haga este cambio
por ti?
y se lo hacemos
pero bueno
eso ya es
a lo mejor
un poco
invasivo
quién sabe
vale
ya he cambiado esto
vale
he añadido el dominio
el host
vamos a ponerle otra vez por aquí
y ahora sí
sí que funciona
el problema
bueno el problema
que como puedes ver aquí
tenemos el tema este
de que ahora
la imagen es mucho más pequeña
pero claro
es que aquí lo que está haciendo
es una optimización
de decir
bueno voy a poner
el ancho
que necesito aquí
justamente
puedes tener otro tipo de
puedes hacer más cosas
por ejemplo
en layout
tienes aquí otra prop
que es layout
y en el layout
lo que puedes hacer
es cómo se va a comportar
cómo se va a comportar la imagen
cuando vaya cambiando
el
bueno
el viewport
cuando va cambiando su tamaño
puedes decirle que sea intrínseco
puede ser que
que sea responsive
que hagas fill
vale
creo que
como un ejemplo
ves
sería ahí
súper grande
puedes hacer diferentes formas
en este caso
podrías poner que sea responsive
responsive
por ejemplo
vale
el responsive es el que nos interesa
porque lo que queremos
es justamente que se adapte
así que de esta forma
ahora cuando yo vaya haciendo esto
fíjate
voy a hacer
esto
pues ahora es responsive
nos ha bajado la calidad de la imagen
a la resolución
al ancho y alto
que le hemos dicho
pero hemos hecho
que nuestras imágenes
ahora sean responsive
para ver un poco la diferencia
ahora veríamos
que si
ponemos aquí la imagen
fíjate
que la imagen
mira la imagen
o sea la imagen ahora es la bomba
o sea la imagen
para que veamos un momento
rápidamente la diferencia
voy a copiar
dos veces
y voy a poner una
con la imagen normal
y otra con el componente de react
y vas a ver
todas las optimizaciones
que hacen
que no son pocas
como por ejemplo
también
en el tema de añadirle
el easy load
es que tiene un montón
mira
vamos a quitar todo esto
vamos a utilizar aquí
la imagen normal
ahora saldrán repetidas
las imágenes
pero solo voy a compararlas
vale
entonces veremos las dos
fíjate como ha tardado
como han tardado un poco
las imágenes en cargar
sobre todo la de arriba
mira
esta es la de arriba
esta es la de arriba
quien no utiliza el componente
de next.js
esta es bastante sencilla
es la etiqueta de image
con el alt
y el source
o sea esto es
justo lo que hemos puesto aquí
o sea no tiene más misterio
pero
el componente de next
está en un span
que tiene aquí un montón
de estilo en línea
que la verdad
que esto es una cosa
que me sorprende
que imagino que
esto solo en modo desarrollo
y que luego
quitarían
o sea que en modo producción
entiendo que esto
a lo mejor no lo repiten
tantas veces
porque tampoco parece
que sea necesario
y mira
con el padding
todo esto
son como medio hacks
digamos
para justamente dejar
el espacio que necesita
con el aspect ratio
que necesita
este padding
66666
este chungo
que parece
el número del diablo
de las imágenes
esto
lo que ha hecho
en realidad
es dividir
el ancho y el alto
creo que de 300
entre 450
esto ha sido
sin querer
no lo he hecho
a posta
ni estoy invocando
ningún demonio
ni nada
total
aparte de este span
que este es para dejar
el espacio
tenemos aquí
img
pero fíjate
la de cosas
que tenemos aquí
lo que ha creado
aquí next
es básicamente
para la misma imagen
lo que ha hecho
es crear
diferentes imágenes
dependiendo
del tamaño
en el que se encuentre
el viewport
y así que tenemos
imágenes
cada vez más pequeñas
que ocupen menos
cuando tiene este viewport
y tal
de esta forma
lo que podemos ver
es que va a estar
optimizando al máximo
la carga
y le ha cambiado
la calidad
bueno
también esto
también se lo podríamos
configurar
o sea que se pueden hacer
un montón de cosas
pero lo que puedes hacer
con esto
también le puedes cambiar
la calidad
por ejemplo
aquí veis que pone 75
pero le puedes poner aquí
la calidad que tú quieras
dices
bueno pues yo creo
que la quality
puede ser 50
vale perfecto
pues veríamos aquí
que se cambia a 50
de hecho
ya se ha cambiado a 50
y se vería más
se vería peor
en este caso
no veríamos la diferencia
y podríamos ir
como ir mejorando
poco a poco
este tipo de cosas
también imaginad
que la prioridad
por ejemplo
es obvio que
cuanto más arriba
está la imagen
más prioritaria es
pues podríamos hacer
priority
index igual a 0
y le podríamos decir
que la prioridad
no sé si
no sé si
creo que con high load
creo que estos son correctos
a ver si lo podemos poner aquí
ah no es boleano
vale pues vamos a poner esto
que si es prioritario
vamos a decir esto
vale que si index es igual a 0
es prioritario
y si no
o le podemos decir
si index es menor a 2
vale para que las dos primeras imágenes
sean prioritaria
pues también lo podrías hacer
también puedes ponerle un placeholder
y le puedes poner ahí la imagen
que tú quieras
por ejemplo es interesante
con el blur
si no me equivoco
ahora lo vamos a probar
creo que una de las cosas
que añadieron
era el tema
de que automáticamente
te hacía uno
ahora lo veremos
vale de hecho
vamos a quitar esto
y vamos a probar
esto del placeholder
vale voy a refrescar
vale
vemos a la imagen
vale
fíjate que si yo refresco
fija
has visto que estaban vacías
las imágenes
eso es porque tiene
lazy load por defecto
lo que podríamos hacer
es dejarle un placeholder
en lugar de que se vea
que se ve vacío
se ve el hueco
lo cual está bien
porque no hace un cambio
de layout
esto seguro que lo habéis visto
muchas veces
que mientras vas cargando la página
va dando saltos
pues aquí
fíjate que no hay
ni un salto
o sea yo voy haciendo esto
si bajo
no hay ningún salto
simplemente
aparece la imagen
ya está
pues aquí lo que le puedes hacer
es cargar el placeholder
y creo que esto era
blur
o empty
puedes ponerle blur
y fíjate
esta cosita que hace
que es bastante chula
ah
blur data url
the contents
super small
static import
ah
porque solo lo hace
con esta
ah que lástima
pensaba que lo haría también
con algunos no estáticos
o sea
este playholder
blur
que te hace automáticamente
solo lo hace con imágenes
que importes aquí directamente
o sea tú puedes importar
aquí una imagen
o sea image
from
y aquí puedes ponerle
public
image
que lástima
pensaba que también lo haría con
porque total
como puede descargarse la imagen
y tal
pero no
ya imaginaba que era demasiado
es una pena
porque hace un efecto
super chulo de blur
en el que la imagen
está en muy baja calidad
y ya está
si no lo que se puede hacer
como nos estaba diciendo el error
es poner el nuestro propio
este blur data url
lo que puedes hacer
es meter aquí
tu propio data url
que sea el que sea
esto no sería así
entiendo que sería en base 64
imagina
imagino que sería en base 64
y lo que te permitiría
es como poner ahí algo
para evitar justamente
justamente esto
de hecho mira
aquí tenemos una demo
para que lo tengáis
pero veis que se ve algo ahí
se ve como
como una cosilla
de hecho
igual lo podemos copiar
a ver que es eso
que se ve ahí al principio
y nos lo copiamos
y lo pegamos
y a ver si
eh
inhabilitar
javascript
a ver si así
vale
de hecho
mountains
no sé si es este
no
creo que no era este
porque tiene como un barrido
así
super chulo
no sé si será este
pero bueno
pero bueno
esto
no sé que
no sé que será
pero hay que añadir algo
más bien así
vale
algo así
bueno
que lástima
que lástima
esto hubiera sido la bomba
que luego que funcionase
vale
a ver
que os leo
os leo
es con base 64
si claro
hay que ponerlo en base 64
no tendría sentido
tenerte en cuenta
que tiene que ser
como base 64
porque no tendría sentido
poner otra imagen
o sea
no tiene sentido
poner una url
vale
porque si pones
o sea una url
rollo http
porque si tienes que cargar
una imagen
para hacerle el playholder
pues no tenía mucho sentido
vale
a ver que
era playholder
que hace la prioridad
vale
la prioridad lo que hace
es que
hay que tener en cuenta
que en el desarrollo web
hoy en día
hay muchos recursos
que se quieren cargar
en una página
hay muchas imágenes
hay muchos scripts
pero no todos
son igual de prioritarios
no es lo mismo
una imagen
que está arriba del todo
y que es enorme
y que es lo que se ve
en el centro
que a lo mejor
una imagen
que a lo mejor
está arriba del todo
pero es así de pequeñita
y está arriba a la derecha
y no le prestas
tanta atención
entonces tú lo que puedes hacer
con esto de los resources
hints
es simplemente decirle
qué es importante
muchas veces el navegador
hace bastante buen trabajo
a la hora de indicarlo
pero para que te hagas una idea
para que te hagas una idea
mira vamos a ver la página
de Everset
¿no?
vamos aquí
la vamos a inspeccionar
le vamos a dar aquí
a la red
y voy a poner
sin limitaciones
vale
aquí justamente
hay una
una columna
que pone prioridad
obviamente
la de las más altas
son primero
el HTML
por supuesto
porque no tenía
ningún tipo de sentido
no cargar primero el HTML
y a partir de ahí
pues puede haber
el CSS
suele ser también
lo más prioritario
a no ser que tú le digas algo
de hecho es
priority
más alta
alta
más alta
alta
baja
no todos los scripts
que cargas
cualquier recurso
tienen la misma prioridad
no tendría sentido
que todos tuvieran la misma prioridad
porque hay algunas
que son
necesarios
para que se vea la página
y otras no
pues esto también pasa
con las imágenes
por ejemplo
tú vas a
voy a hacer
publicidad
de mi web
de mi trabajo
en este caso
esto es
fotocasa
podría haber sido cualquiera
¿cuál es la imagen
que crees que es la más importante?
hombre
pues obviamente
es esta de aquí
por lo tanto
de prioridad
debería tener la prioridad
más alta
no sé si lo tiene
igual no lo tiene
y tenemos que decirle a alguien
oye
¿cómo no tiene la prioridad más alta?
de hecho veo que es una imagen
que es aquí
un background image
que tampoco tiene por qué estar mal
de hecho puede ser que la hayan puesto aquí
en los pre-connects
y hayan puesto por aquí
pues que tengan que hacer una pre-conexión
y con una buena
a ver si veo alguno
mira ves
un script que tiene una importancia baja
pero le hace un preload
pues este tipo de cosas pasan
con las fuentes
con lo que sea
así que esta imagen
que es la más importante
tendría que tener la prioridad más alta
porque si tiene que luchar por los recursos
con otra imagen
es la que habría que importar
en este caso
a ver
en este caso
no es tan necesario
porque tenemos lazy load
pero es interesante
que a lo mejor
si fuese una imagen
que está muy arriba
pues le pusiéramos
oye prioridad
pues que sí
que tiene que tener la prioridad
porque esta
nos interesa
que esté bastante bien
a ver
hay que tener en cuenta
que esto
o sea
tiene sentido
solo para
imágenes
que tengan mucha prioridad
porque esto va a hacer
un preload seguramente
de la imagen
y entonces
tiene que ser una imagen
muy importante
no pongáis esto
en todas vuestras imágenes
porque si tú haces
que todas sean prioridad
prioritarias
entonces ninguna es prioritaria
y de hecho puede ir
todavía ir peor
la página
pero en este caso
que esta imagen es tan grande
seguramente impacta
en la métrica
de Largest
Largest Paint
Largest Contentful Paint
el LCP
y por lo tanto
sí que te interesa
porque el usuario
la va a ver
y cuanto antes la vea
pues mejor
así que esa sería
un poco la explicación
Blur solo funciona
en imágenes estáticas
ya me he dado cuenta
que caca
la verdad
ya me he dado cuenta
que caca
Midu
eres un tesoro
invaluable de la humanidad
joder
muchas gracias
por enseñarnos
tan detalladamente
y con tanto cariño
sí la verdad es que
os quiero enseñar
con
con detalle
las cosas
¿vale?
o sea
estoy intentando
ser bastante
que entendáis
no quiero enseñaros
la API
ya está
sino que quiero que
entendáis el valor
que tienen
por qué son importantes
y cómo funcionan
un poquito
¿vale?
y por eso
pues estoy intentando
ser bastante
detallado
en las explicaciones
¿no?
porque luego os puedo decir
pues el componente
de image
y esto
y ya está
¿no?
pero quiero
quiero que entendáis
¿no?
pero qué hace
el componente de image
por qué lo debería utilizar
por qué es importante
qué me aporta
y cada atributo
¿cuándo lo tengo que utilizar?
no sé
este tipo de cosas
porque luego sé que
hay vídeos en YouTube
que os van a enseñar
NextGS en 7 minutos
aprende NextGS en 7 minutos
pero bueno
conmigo prefiero que
yo no quiero que aprendáis
NextGS en 7 minutos
quiero que lo entendáis
de por vida
¿acabado de llegar?
¿estará subido el stream?
hostia
eso sí que no me habían preguntado
todavía
Davichu
pero gracias
me imagino que sí
no sé
que la gente tenga
en el chat
si estará subido
¿si server sideprop
se ejecuta también
el cliente?
¿eso no implicaría
que es inseguro?
no
igual me he explicado mal
el método de server sideprops
solo se ejecuta en el servidor
solo se ejecuta en el servidor
lo que pasa
es que
hay que tener en cuenta
que cuando tú haces
la navegación
en el cliente
se llama internamente
a ese método
pero el fetch
que tú ves
es el del JSON
solo el del JSON
pero no ves
lo que hace por dentro
o sea tú no ves
el fetch interno
¿ok?
o sea lo que está haciendo
es hacer una petición
al servidor
el servidor ejecuta
ese método internamente
y devuelve
el resultado
del get server sideprops
¿vale?
o sea que no
no se vería la API key
no se vería
porque no sabes
desde el cliente
no sabes lo que hace
por dentro
ese método
es lo importante
¿has puesto algún wildcard
en nextconfig para los dominios?
a día de hoy
no he necesitado nunca
la verdad
hola Amidu
¿cómo estás?
¿tú respondes de MS en Insta?
es que me gustaría comentarte algo
no
no
mira
tengo
hoy he visto
en Instagram
y tengo
400 mensajes
hay veces
de vez en cuando
que igual contesto alguno
pero
o sea
no
no contesto
¿podrías explicar
cómo sería un context?
es decir
información global
disponible para todos los componentes
pues mira
esa es una muy
muy buena pregunta
a ver
un context sería bastante sencillo
no sé por qué no he explicado esto
la verdad
no sé por qué no he explicado esto
porque justamente
uno de los usos
bastante interesantes
que tiene el tema
de la app
es el tema
del context
¿no?
así que no sé
no sé por qué no lo he dicho
a ver
vamos
os lo voy a intentar enseñar
código aquí
vale
el tema del context
que comentas
imaginemos que necesitamos
como esto
es que no sé
por qué no he contado esto
ahora me arrepiento
bueno
imaginemos que queremos crear
un context
de react
¿no?
pues aquí
bueno he dicho
muchas veces
tienes provider
terceros
de lo que sea
¿no?
bueno
pues
pongamos que
queremos crear
yo que sé
vamos a poner aquí
el típico
thin context
y ponemos el
create context
¿vale?
y le ponemos aquí
que es dark
por decir algo
¿vale?
entonces
tú aquí
lo que harías
es justamente
hacer el thin context
punto provider
con el valor
que quisieras
en este caso
dark
esto no es una explicación
de context
¿vale?
no os estoy explicando
context de react
porque si no estaría aquí
todo el día
lo que estoy enseñando
es
cómo deberíais utilizar
justamente
context
o providers
que necesitéis
donde lo harías
el sitio más correcto
seguramente
sería este
el archivo
de app
este con la
con el underscore
¿vale?
¿por qué?
porque esto es
justamente el componente
que engloba
toda la aplicación
y por lo tanto
es el sitio
perfecto
para hacer esto
y de esta forma
si necesitáis
ahora acceder
a este contexto
pues lo podríais hacer
sin ningún tipo
de problema
los providers
es aquí
donde iría
¿vale?
creo que esto
es decir
una información global
bueno
pues aquí lo tendrías
justamente
hacerlo así
¿vale?
aquí es donde
lo tendrías que hacer
este es un ejemplo
pero habría
muchos más ejemplos
de providers
que puedes tener aquí
y lo harías
justamente
en este sitio
¿vale?
creo que todas las imágenes
son por defecto
defer con prioridad
lo configuras
para que cargue en preload
o sea
por defecto
tiene lazy load
efectivamente
y el priority
lo que hace
es tener un preload
no sé si le pone
el importance
también se lo pone
en high priority
o lo que sea
pero ya está
¿por qué pones tanto
el default
en los export?
¿por qué los pongo tanto?
a ver
por diferentes cosas
por un lado
por un lado
las páginas
en Next.js
tienen que hacer
un export default
¿por qué?
uno
no se importan
en ningún sitio
porque se importan
automáticamente
y porque es necesario
si tú pones
si quitas esto
pues lo has liado
y si haces esto
también
así que tiene que ser
export default
luego si lo he hecho
en otro sitio
en realidad
ha sido más por un tema
de hacerlo rápido
que otra cosa
o sea
no lo he hecho
por ninguna otra cosa
pero en las rutas
es súper importante
¿vale?
el logo de fotocasa
también sería importante
podría ser
pero seguramente
cuando sus imágenes
están pequeñas
igual lo interesante
es ponerlas en línea
si server
side props
ejecuta también
el cliente
eso no implicaría
que es inseguro
bueno no
eso ya lo he comentado
muchas gracias
13 perros
por renovar
suscripción
y me tomo
la hidratación
vale
joder
con la pregunta
hola amigo
acabo de llegar
esto se subirá a youtube
la leche
increíble
o sea
yo creo que la mitad
del chat es eso
que lo he comentado antes
y si se acaba de llegar
debería saber
si me conoces
que siempre se sube
a twitch
y a youtube
la leche
mido
entonces con get static props
si suben un nuevo post
al blog
toca hacer el build
de nuevo
sí
sí
sí
sí
sí
sí
porque
lo que se
es que
nos ha quedado
por
en la siguiente clase
seguiremos hablando
del get static path
y cómo funciona
justamente para
trabajar con blogs
vale
así que
y veremos eso
y entonces
veremos que necesitamos
saber cuándo son
segmentos dinámicos
como por ejemplo
artículos de un blog
necesitamos saber
justamente
cuáles son
esos segmentos dinámicos
antes de poder
generar
todas las páginas
estáticas
por lo tanto
si quieres
si creas
una nueva
vas a necesitar
seguramente
hacer un nuevo build
porque lo que
si cambiase el contenido
sería diferente
pero tú estás creando
una nueva
un nuevo artículo
y eso no tengo claro
que si lo puedas hacer
para ejecutar fetch
del lado del server
¿te está valiendo
la última versión de note
o es alguna magia negra
que cnex?
muy buena pregunta
que no lo he comentado
pero en el caso de
versell
puedes hacer fetch
porque fetch
tienes polyfill
con isomorphic fetch
y por lo tanto
en get server side props
puedes utilizar fetch
no es una magia
de note.js
es una de
next.js
¿es mala práctica
bajarme las imágenes
de una API
con el get static props
y dejarlas en una carpeta
temporal para usarla
hasta que cargue
la próxima vez la API?
pues depende
de cuantas imágenes sean
quizás sí
quizás sí
quisiera estar en el sorteo
pero estoy esperando
una llamada
bueno pues lo vamos a hacer ya
lo vamos a hacer ya
vamos a hacer el sorteo
hola midu
¿borrarás este vídeo?
sí
no
¿has considerado
cambiarte el nombre
de midu def?
sí se subirá a youtube
puede ser
lo voy a poner
el título
en la siguiente
midu
tengo que hacer una web
y mobile
con autenticación
mi pregunta
¿se puede usar
next para la versión web
y real native
para mobile?
claro que se puede
sí
sin ningún problema
midu
¿cuándo debería utilizar
get static props
y cuándo
get server side props?
esa es muy buena pregunta
y es bastante compleja
muchas veces
a ver
a ver
es obvio
que get server side props
solo lo deberías utilizar
cuando quieres
pre-renderizar tu página
y recuperar información
que se tenga que
hacer un fetch
en el tiempo
de la petición
porque eso es exactamente
lo que hace
pero claro
¿qué pasa?
que
cuando tiene mucho sentido
get server side props
es cuando tu página
tiene que
cambia muchísimo
o por ejemplo
es imposible
que la puedas
generar
como por ejemplo
una página de búsqueda
con muchos filtros
mira te voy a poner un ejemplo
y lo vas a ver mucho más claro
sé que estoy haciendo
mucha publicidad
pero es que
me parece un ejemplo perfecto
y lo vais a entender muy bien
vale
por ejemplo
esta página
esta página
si te fijas
esto tiene aquí un montón
pero un montón
de filtros
con todo este tipo
de filtros
que al final
la combinatoria
es imposible
y fíjate
que te dice
cuántos anuncios tiene
o sea
es imposible
que tú
antes de
o sea
en build time
puedas calcular
todas las combinaciones
es imposible
que hagas
todas las páginas estáticas
de los filtros
no puedes
no puedes
entonces
¿cuándo tiene sentido
get server side props?
en este tipo de
casos
no sabes
de antemano
o te enfrentas
a un número
ilimitado
de posibilidades
dinámicas
a la hora de generar
y dependiendo
de esos inputs
de filtros
opciones
pues tienes que mostrarle
una información
a un usuario
en este caso
pues lo más seguro
que podrías hacer
es justamente esto
¿no?
si tienes que
todos estos
es que no podrías
generar las todas estáticas
es que al final
entonces te
no podrías
sería una compilación
eterna
no podrías
ni reventarías la API
porque fíjate
con todo
no puedes
aquí
get server side props
¿cuándo tiene sentido
get static props?
cuando tienes
un
o sea
unos resultados
finitos
por ejemplo
en el caso
este de esta página
pues ¿qué sería finito?
pues a lo mejor
las
a lo mejor
es estas páginas
estas páginas
imagínate que estos son
estas páginas
y ya está
en las que vas a mostrar
ahí los resultados
de viviendas
en diferentes
localizaciones
¿cuántas son?
pues a lo mejor
son 100
pero son 100
punto
no son más
no van a empezar
a
no hay
ilimitadas ciudades
en España
o combinatorias
de ciudades
en España
infinitas
a lo mejor
hay 100
pues estas 100
como ya lo sabes
de antemano
son 100 peticiones
a la API
las haces una vez
creas el archivo
estático
y ya está
además
ese archivo
estático
como son infinitas
o sea
como son finitas
no infinitas
como son finitas
con el incremental
static generation
lo que podemos hacer
es
regeneration
lo que podemos hacer
es decirle
bueno
pues cada 5 segundos
que pasan
cada minuto
o cada hora
vamos a volver
a generar
esa página estática
y ya lo tendrías
entonces ahí tiene la diferencia
yo creo que la diferencia
está más bien
en el número
si es finito
o casi infinito
de combinaciones
de los resultados
¿vale?
yo creo que ese sería
cuando debes usar uno u otro
por ejemplo
para los artículos
de un blog
yo
aunque tenga muchos artículos
¿cuántos artículos puedes tener
tu blog?
100
200
300
get static props
que imagínate
que modificas
el contenido
de un artículo
pues con incremental static
regeneration
ya lo tendrías
pero ahora imagínate
que tienes una página
donde puedes filtrar
a través de
el tema
del artículo
a través de
yo que sé
un montón de cosas
un montón de cosas
pues a lo mejor
ahí sí que podría ser
que tengas que utilizar
get server site props
ese es el espíritu
mira me estoy arremangando
y todo
o sea
cuando me arremango
para programar
solo pasan cosas increíbles
a ver
es que lo que tengo en la cabeza
va a obligarme
a que hagamos un poquito
de Node.js
lo cual
está muy chulo
porque
vamos a hacer medio scrapping
pero muy rápidamente
de una cosita
vamos a traernos esos datos
lo vamos a tener en local
vamos a hacer el proyecto
en Next.js
¿de qué trata el proyecto?
ahora la gente
hostia no me jodas
que el proyecto es esto
bueno yo os lo explico
y os explico
por qué voy a hacer este proyecto
bueno aquí tengo ya algunas
mira vamos a utilizar
Next.js
para la UI
vamos a utilizar Next.js
como framework de React
vamos a hacer un proyecto
de
este es nuestro proyecto
y diréis
¿qué mierda es esta?
quieto parado
vamos a ver
hay un
hay un
joder
Kevin
ya
voy a empezar
y ya regalando
luego regalo la sub
¿vale?
cuando llevemos un rato
va
gracias Kevin
no sé si conocéis
a este dibujante
de cómics
pero es muy
muy bueno
muy chulo
muy bueno
que cada dos por tres
no sé si uno al día
uno a la semana
yo que sé
cada dos por tres
este hombre lleva años
haciendo cómics
sobre desarrollo
justamente
entonces
lo que tenemos aquí
es que cada semana
pues van saliendo
como veis
aquí cómics
sobre programación
de todo tipo
y es muy famoso
este hombre
pero tiene un problema
su página web
su página web
a mí personalmente
no me gusta
me pone hasta nervioso
por diferentes cosas
¿vale?
uno
no es una SPA
¿no?
como podéis ver
no es una SPA
porque está recargando
la página
cada dos por tres
dos
no se puede buscar
a mí me toca mucho
la moral
que no se puede buscar
de ninguna
de ninguna forma
no se puede buscar
¿sabes?
tú aquí no hay un buscador
ni hay nada
tres
a mí la UI
sinceramente
me produce un poquito
de urticaria
¿ok?
o sea
me pone un poco nervioso
que no es su culpa
si es que esto tiene más años
que andar para adelante
o sea
ya estaba ahí
cuando se inventó
andar para adelante
él hizo la página
no pasa nada
lo entiendo
¿vale?
está feita
el contenido está súper
pero
el encontrar el contenido
Danicaris
es un poco rollo
¿sabes?
eso no es una página
es un panfleto
ya te digo
pero de verdad
o sea
hay muchas cosas
que le veo
como muchas posibilidades
pero por desgracia
pues no
¿ves?
random
y los tienes que descubrir
con random
vamos a hacer esta página
vamos a hacer esta página
la vamos a hacer minimalista
la vamos a hacer sencilla
la vamos a hacer con NextUI
la vamos a hacer que tenga modo oscuro
y modo normal
es la primera vez que lo hago
porque bueno
entiendo que esto
tiene dark mode
así que lo haremos con esto
y lo que haremos
es que además
pues tenga que tener las rutas
vamos a ver
donde necesitaremos
server side rendering
donde necesitaremos
static rendering
o sea
vamos a hacer un scrapper
para robarnos
todo el contenido
de esta página
porque
he estado mirando
su licencia
¿vale?
he estado mirando su licencia
esta no
esta
esperando esta licencia
y dice
que si
que puedo hacer cualquier tipo de copia
me puedo hasta follar el contenido
si quiero
siempre y cuando
no
no lo haga comercialmente
y total
no vamos a hacer nada comercial
aunque sería muy divertido
vender sus dibujos
y hacerme rico
a través de ello
lo que vamos a hacer
es
algo totalmente gratis
educativo
educativo
no vamos a hacer otra cosa
que eso
¿vale?
entonces
he visto
que tiene como una
una API
no
yo no le llamaría
ni siquiera API
se llama
interfaz de JSON
¿vale?
si hombre
claro
le podríamos
lo pondremos en los créditos
claro que si
no pasa nada
le vamos a poner en los créditos
no tiene sentido
pero
pero bueno
tiene como una pseudo API
¿y por qué te digo pseudo API?
porque resulta
que son JSON
esta es la API
que tiene
¿vale?
es esta la API
y entonces tú lo que haces
es entrar a
cómics en concreto
por ejemplo
si quieres entrar al número 1
pues vas aquí
1
si quieres entrar al número 2
pues aquí 2
es muy raro
¿vale?
es muy raro
si los hago
NFT
el navegador que uso
de Safari
para que no me pete el string
que si no peta
bueno
el tema es que hay que entrar
a cada uno
y tiene como 600 cómics
para simplificar un poco
la cosa
vamos a partir
vamos a ir a partir
del 500
¿vale?
del 500
al 600
y algo
creo que el último es
a ver
el anterior
¿cómo?
vamos a ir a la home
la home
vamos a la anterior
va por el 2587
ostia
2587
este hombre
ha hecho 2587
viñetas
o sea es una locura
bueno vamos a poner
2000
vamos a empezar
desde el 2400
ostia
pero este no tiene
ah si
si que tiene imagen
y tiene
vale
lo que me interesa
es que tenga alt
y tenga imagen
todo lo demás
bueno me lo copiaré igual
pero tampoco es tan importante
así que vamos a tener que hacer
scrapping
harás una caché
con esos JSON
bueno ya veremos
el scrapping
es para ver en cual va
no el scrapping
es para bajar
estos JSON
porque no me lo voy a bajar
mano a mano
claro va a ser un poco rollo
así que
lo primero que vamos a hacer
ya empezamos ya
vamos ya con el código
¿cómo sabes cuántos cómics hay?
bueno lo acabo de ver
acabo de ver
que el último
es el 2588
¿ves?
este ya no
¿cómo lo he sabido?
me he ido a la portada
le he ido al previous
le he dado al next
y ya he visto
que el último
es el 2588
este es el último
que ha sacado
ya sé que el 2588
no me iba a sacar
los 2588
porque ahora mismo
sería un poco raro
pero a partir
podemos sacar 88
por decir algo
¿vale?
entonces vamos a hacer
desde el 2500
al 2088
me voy a descargar el JSON
esto lo vamos a utilizar
sí
es que pensé que ocuparía
los JSON como API
y next como
bueno
es que lo vamos a hacer
lo que pasa es que me voy a descargar
el JSON
luego utilizaremos la API
para otra cosa
para la búsqueda
porque fijaos que no tiene búsqueda
haremos una búsqueda también
¿vale?
haremos también una búsqueda
y lo que
total
como es bastante estático
pues ya me va bien
tenerlo como archivos estáticos
me da igual
tenerlo como archivos estáticos
pero seguramente
lo podríamos subir
a un índice de Algolia
para poder buscar el alt
porque veis aquí
que se puede buscar cosas
o sea que
como strings
claro
pues esto lo vamos a poder utilizar
para ponerle una búsqueda
que me da mucha rabia
que no tenga una búsqueda
a esta página
porque muchas veces
quiero encontrar una viñeta
y ya no me acuerdo
y me pone de los nervios
así que con el alt
que le ha puesto aquí
como el texto alternativo
para las imágenes
pues vamos a poder buscar
ahí lo tenemos
Víctor
hola amigo
¿recomiendas aprender React
con TypeScript o sin TypeScript?
te recomiendo aprender React
con lo que te dé la gana
y con lo que te guste más
si es con TypeScript
muy bien
si es sin TypeScript
pues genial
si te cuesta mucho
aprender React
a la vez que TypeScript
porque a lo mejor
no sabes
o sea no sabes TypeScript
pues a lo mejor
puedes hacerlo sin TypeScript
y luego dar el proyecto
bueno pues
vamos con xkcd
¿vale?
y vamos a ver
por donde salen las cosas
y vamos a darle
¿se puede con PlayGrid
o mejor con Node?
en este caso mejor
mucho mejor con Node
mucho mejor con Node
porque va a ser mucho más rápido
de hecho
vamos a ver
xkcd
eh
quick dirty scrapper
¿vale?
xkcd
quick dirty scrapper
vamos a hacer
que yo no sé
igual
igual
ni siquiera hace falta
pero bueno
vamos a instalar
fsextra
¿vale?
fsextra
es un file system extra
y te permite
simplificar bastante
como se
hostia
coño
si que está tardando
hola
coño
ha tardado la vida
a ver si
no tengo nada
esta es la VPN
quita VPN
estate quieta
VPN
ta ta ta
digo a ver si tengo algo aquí
que me está molestando
no
ahora si
vale
perfecto
venga empezamos
vamos
vamos tirando
vamos tirando
hostia
voy a apretar las cosas
hombre
midu
cuánto te tengo que donar
para que me pisen la cara
yo creo que más que donarme
tienes que estar cerca de mí
vale
han petado cosas
¿verdad?
es que
me ha abierto tantas ventanas a la vez
esto
que
¿ahora?
¿ahora ya?
sí, sí
ha clipeado un momento
¿no?
se ha abrido la Wikipedia
sí
el M1 Max
pero si están agotados
¿ya volvió?
sí
he petado el stream
para no pisarte la cara
exactamente
¿ya?
vale
perfecto
gracias
perdónate
es que
se me han abierto
demasiadas cosas a la vez
voy a cerrar este
el Chrome
y voy a cerrar
¿qué más puedo cerrar?
bueno
ya no puedo cerrar más cosas
ya me
ya me pillaré
tengo el M1
pero ya me pillaré
me pillaré otro
¿eh?
no
¿cómo voy a terminar?
bueno
vale
vamos a crear el index
index.js
que no sé ni hablar yo
y os explico que es el fsextra este
¿vale?
y ¿qué podríamos utilizar?
podríamos utilizar axios también
¿no?
axios tiene sentido
vamos a instalar axios
y ahora os explico un poco las dependencias
básicamente
fsextra
esto es filesystemextra
que es como el filesystem de Node
pero que tiene unas cuantas
cositas más ¿vale?
la semana que viene
por cierto
vamos a hacer en directo
vamos a estar revisando
las cositas de Apple
no sé si habéis visto el contador en Instagram
pero vamos a estar aquí en directo
revisando lo que trae Apple
vale
y axios es básicamente para hacer una petición
¿qué es esto?
he puesto axios.com
y me habla de Rusia esto
Dios
Dios
Dios
sácame de aquí
sácame de aquí
sácame de aquí
que me
que me banea Twitch
¿para cuándo?
fetch nativo en JavaScript
en JavaScript ya está en nativo
el fetch
Node está
ahí
ahí
de hecho
igual
no sé qué versión estoy utilizando
bueno está en la 17.5
vale
pues
bueno total
como esto no es muy importante
me voy a copiar esto
y ahora
y ahora vamos haciendo esto
for
let
i
vamos a empezar
hemos dicho en el 2500
¿no?
y
i
es menor que 2588
creo que hemos dicho
¿no?
hemos dicho
max
id
xqcd
comics
¿vale?
2588
y vamos a hacer
que empiece
¿vale?
initial
id
xkcd
comic
vamos a poner el 2500
lo vamos a hacer con
constantes
¿vale?
para que esto se vea un poquito mejor
esto mientras sea menor
y vamos a hacer un
i++
un ford de toda la vida
básicamente
y aquí lo que vamos a hacer es
ir haciendo peticiones
y descargando
desactiva el linter
si lo tengo desactivado
si no tengo el linter
¿qué linter?
si no
no me he instalado el linter
alguien me ha puesto ahí
desactiva el linter
modo verijar
y lo he instalado
justamente por eso
o sea
no lo he instalado
no hay linter
para que veas que no hay linter
mira
ves que
o si utilizo aquí una
o esto
bueno claro
es verdad
no pero ves
este hola
me está petando
sí que
qué sigla más difícil es
xkcd
una cosa más rara
vale
entonces
fs extra
esto es un file system
es un reemplazo al fs
que es nativo de node
¿vale?
es un paquete de node
que te permite manejarte
con el file system
¿por qué utilizo el extra?
bueno aparte de porque
todos son promesas
tienes todo lo que sería
el file system
el sistema de archivos de node
pero con promesas
y además
creo que tiene por aquí
ves tiene un read
read json
y un write json
perfecto
es justamente lo que quiero
y como queremos simplificar bastante
voy a utilizar justamente este
lo que voy a hacer es
leer el archivo con axios
igual
otra vez esto
déjame tranquilo
pero ¿por qué no me buscas en google?
maldito
aquí
o sea si encima la primera es esta
¿por qué me metes en esa página chunga?
ay dios mío
vale
che midu
pero hay uno de node
con promesas
che maximineto
yo lo sé
pero no hay
primero
pero es que
a ver
tendría que hacer fs promise
¿vale?
importar de fs promise
luego no hay un write json
tendría que escribir lo de write json
quería hacerlo lo más rápido posible
¿vale?
no es que lo quiera hacer bien
es que lo quiera hacer rápido
al menos esta parte
a ver que tampoco lo estoy haciendo mal
¿eh?
tampoco creáis que lo estoy haciendo mal
vale
ahora estoy pensando una cosa
esto lo voy a pasar como
en más script module
¿vale?
vamos a utilizar en más script modules
con imports
vamos a pasar aquí
type module
type
module
y si me preguntáis por qué
es porque
vamos a tener aquí el top level await
y así podremos hacer aquí await directamente
y ya está
¿vale?
entonces
entiendo que aquí
lo único que tenemos que hacer
es irnos a la página
esta de la
API
entre comillas
de este chico
¿vale?
y aquí vamos a generar
la URL
para recuperar el json
así que vamos a tener
este json
pam
y aquí
iría la id
que en este caso
sería la i
así que
de hecho podríamos poner
hostia
podríamos poner que esto sea id
¿no?
que queda mejor
id
id
id
más más
está bien que las cosas
tengan información útil
madre mía
esto debe de no estar con liter
vale
recomendamos la URL
esto debería tener
una promesa
o bueno
podríamos hacer una wait
aquí también
const
y qué es lo que debería
tener esto
en axios
que hace mil años
que no utilizo
vale sí pero response
tiene response.data
¿no?
si no me equivoco
eso
pues vamos a hacer aquí
data
await
console.log.data
¿vale?
por ahora vamos a hacerlo así
vamos a poner que solo me descargue
el primer
no
porque esto no me lo va a descargar
ni el primero
¿vale?
entonces
venga
node index.js
vamos a ver
parece que ha ido bien
¿vale?
ya tendríamos aquí el primero
perfecto
perfecto
sí
get json
el del jQuery
¿no?
Mae
¿cómo le fue con el standing desk?
pues bien
lo que pasa es que
cuando me compro un nuevo portátil
porque es que este portátil
lo tengo que devolver
así que
vale
hostia
este me ha dejado
el fs
no sé por qué me ha hecho esto
vale
vale
pues ya vemos que aquí funciona
ya me he traído uno
lo que podríamos hacer
¿vale?
este num
a mí no me
no me gusta num
es un poco raro
así que vamos a traernos
vamos a traernos
veo que aquí tiene
me gusta todo
menos el num
me gusta todo
menos el num
o sea que vamos a poner
num
lo vamos a cambiar
y de
y luego es
¿qué más podemos sacar de aquí?
transcript
news
es que no sé
no sé qué trae estas cosas
pero este de news
lo vamos a sacar también
y también vamos a sacar
para afuera
este transcript
me sabe mal
porque como no sé lo que significa
no vaya a ser que sea interesante
que alguno se que lo tenga
pero bueno
para simplificar
vamos a quitar transcript también
¿vale?
y esto va a ser
rest of comic
lo tenemos en data
¿vale?
y lo que vamos a hacer aquí
es crear
vamos a hacer
fs
fs
punto
write
json
y aquí el json
que le
ah le tenemos que decir
justamente el archivo
vamos a poner aquí
comics
esto luego lo utilizaremos
en nuestro proyecto de next.js
¿vale?
hola midu
todo el css
que se genera con ssr
¿no se puede linkear
para que no quede el html
final de demasiado grande?
un saludo
linkear
o sea
que es decir
que ponga el link
depende de como lo estés creando
pero yo creo que sí
id
se te pisará con el id del for
¿no?
sí
tienes toda razón
tienes toda razón
vamos a poner aquí
comic id
tienes toda razón
madre mía
menos mal que os tengo aquí
por eso me gusta que estéis por aquí
hombre
ay por cierto
vamos a probar el proyecto este
hay un proyecto
de musiquita
vamos a probarlo
a ver si soy capaz de utilizarlo
que se llama
lofi generator
no sé si la habéis visto
que esto es lo que se supone
ah sí mira
se puede poner la música
se supone
que te genera
música
al azar
de lofi
me gusta
me gusta
me gusta
para el viernes
me gusta
a ver
no tiene la misma energía
que tengo yo seguramente
pero
pero me gusta
me gusta
vamos a poner por aquí
chuuu
vale
comic id
comic id
comic id
aquí ponemos el comic id
y aquí vamos a poner
id directamente
y ya está
que a ver
realmente
este id
este id
y este id
debería ser el mismo
pero bueno
vamos a utilizar
comic id
por si acaso
por si acaso
de hecho este
lo vamos a sacar
claro
es que tiene sentido
mira lo quitamos de aquí
y lo que vamos a hacer aquí
en lugar del
porque se me ha rellenado
todo esto
esto se ha llenado
como le ha dado la gana
vale
lo que quería
lo que quería poner aquí
era
comic to store
vale
y en el comic to store
el que vamos a guardar
vamos a tener
la id
del comic
y ahora sí que podría haber
utilizado esto
como id
vale
vamos a tener la idea
vamos a tener
el rest of comic
vale
y esto es lo que vamos a guardar
en nuestro archivo
en el json
y yo no sé si esto funcionará
pero lo bien que nos lo vamos a pasar
vale
fs extra
write json
bueno yo creo que esto mejor
si lo hacemos así
con el write json
directamente
esto
cuidado
cuidado que es asíncrono
hacemos esto
y ahora ya
vamos a poner
un 5 más
solo para ver
como va esto
vale
vamos a ver
como va esto
y le doy
vale
mal
ha ido mal
ah
hostia
fs extra
es que cabrón
vale
no se puede importar así
porque fs extra
es un paquete
common gs
ya sabéis
si me estáis siguiendo mucho
ya estas cosas
las deberíais
ya las deberíais saber
vale
me faltan a wait
donde falta la wait
donde
este está bien
no
y este está bien
no
no me engañéis
no me engañéis
vale
voy a poner aquí
fs
y vamos a sacar
el write json
esto
poco a poco
a ver si se termina ya
el common gs este
y empezamos a poder tener
venga
note
vale
comic id
vale
se me ha olvidado cambiar este
claro es que no me habéis dejado
poner el inter
pero no pasa nada
venga vamos otra vez
ah
vale
habría que crear antes
la carpeta
a ver
la voy a crear a mano
pero programáticamente
también se podría crear
lo que pasa es que
no vale la pena
que me ponga aquí
voy a crearla programáticamente
vale
voy a crear aquí comics
directamente
voy a hacerlo
y ya está
vale
pues ya tenemos esto
y si me voy a comics
a ver
he visto
he visto scripts
más chungos que este
vale
pero algo hemos conseguido
y vamos a ver si tenemos aquí las cosas
mira mira mira
mira mira
buenísimo
buenísimo
riquísimo
vale
entonces ahora sí que vamos a pasar
vamos a pillar unos cuantos más
más
no sé si
no sé si
bueno da igual
vale
estaba pensando una cosa
una tontería
vamos a pillar más
es que he pillado 5
y cuántos hemos dicho que había
hasta el 2588
creo que
a ver
lo podemos mirar un momento
aquí nos vamos
aquí
y aquí
este
hostia era el 2500
no puede ser
previous
next
y aquí
2288
yo creo que con 88 comics
tenemos suficiente
¿no?
si es que
le damos el link
del home
donde sale el último comic
el link
del home
donde
es que es muy fácil
¿no?
88
a ver
Juanma
más adelante
pillaremos más
pero ahora
yo creo que podemos empezar
pillando 88
y luego
sabes para
en lugar de estar aquí
un buen rato
pues
pillamos 88 comics
y seguimos con el proyecto
de
de
de Nexies
y luego
pues podemos pillarlos todos
y tal
mira ahora tarda más
como se nota que son 88
mira mira mira
como van haciéndose
mira mira mira
que vienen que vienen
que vienen
que vienen
que vienen
vale pues ya está
ya tenemos aquí unos cuantos
yo creo que con estos
ya podemos ir justamente
a nuestro proyecto
de Nexies
con todo esto
nos llevamos los comics
y ya está
se te han repetido
los que tenías
no los ha machacado
o sea si
este write file
o sea si yo vuelvo a ejecutar
vas a ver que otra vez
aparecen los mismos
o sea exactamente lo mismo
ya te lo digo yo
o sea que no se han repetido
los ha vuelto a descargar
pero bueno
me da igual
no importa
había que hacerlo con Dino
sería muy parecido
pero bueno
para otro día
lo importante es que ya tenemos aquí esto
de hecho
estoy pensando
vamos a crear aquí
vamos a crear un proyecto
vamos a crear un proyecto
mkdir
xkcd
y en el xkcd
vamos a poner
npm
bueno espérate
porque
xkcd
a ver que no la lía
vale
vamos a hacer el
npm init next
y esto
nos debería preguntar
¿habéis visto lo fácil que es
acordarse de esto?
para crear un proyecto
dice
Compromissor
dice
los puedes hacer en paralelo
pero no lo he hecho en paralelo
aposta
Julio Burgos
y te voy a explicar por qué
si yo lo hago en paralelo
lo que va a ocurrir
es que
estos 88 cómics
me los va a descargar
en 88 conexiones de golpe
si yo le hago 88 conexiones de golpe
a su servidor
o imagínate que pongo
los 2.888
lo que puede ocurrir
es que
me baneé directamente
sabes de
ostras
me estás haciendo una denegación de servicio
entonces lo que intento
es hacer uno a uno
porque es mucho más fácil
y de hecho
pues con el tiempo que tarda
en escribir
y tal
pues a lo mejor
cada segundo
pues a lo mejor hace 8
bueno
como no es crítico
por eso no lo he hecho
Compromissor
más para que lo sepáis
más o menos
vale
venga va
vamos a seguir con
el tema
vámonos
creamos un proyecto de Next.js
lo hacemos con
npm init next
procedemos
se puede hacer
backend con java
si
de hecho es lo que más
se puede hacer
con java
hacen falta
argumentos
no opcionales
que
como
pues nada
voy a tener que utilizar
el de siempre
es que es raro
porque yo juraría
que el otro día
utilizar el npm init
y me pareció mejor
pero bueno
igual
lo hice de otra forma
vamos a utilizar este
vale
el proyecto es
xkcd
app
vale
venga instala
instala
instala
instala
ta ta ta ta
vale
bueno
ya he hecho una cosa
sin linter
ahora no me digáis
que desactivo otra vez
el linter
que os conozco
os conozco
madre mía
con las instalaciones
es una de las peores cosas
que llevo
en javascript
el tema de las instalaciones
de las dependencias
como que ves pasar tu vida
por delante
vale
pues
con esto
empiezo un run dev
vale
vamos a abrir este proyecto
vale
espero que no pete mucho
durante un rato
igual si
ahora
si no
peta
es que cuando levanto
un nuevo proyecto
es lo que hay
no peto
ah bueno
la vida es lo que pasa
mientras esperas
que existan las dependencias
ya te digo
ya te digo
vale
entonces
el otro día
hablamos un poco
de las rutas
no voy a volver a explicaros
toda la estructura
de ficheros
porque la gente que vino
la semana pasada
estará aburrida
pero
en pages
podemos crear
un enrutado físico
físico quiere decir
que los archivos
que vamos a ir creando
son los que vamos a ver
que se ven en la pantalla
por ejemplo
vamos a crear uno
que sea
cómic
y dentro
vamos a tener
que esto
no sé si lo comentabas
el otro día
creo que no
creo que sí
que vamos a tener
porque necesitamos
justamente la ruta
que sea dinámica
porque necesitamos
recuperar la id
así que
no sé si ya tengo
vale
ah mira que bien
que maravilla
que maravilla
además con estar jsx
bueno no sé si
eso ha sido un poco
porque le ha dado la gana
pero bueno
vamos a poner
export default
no sé qué
cómic
vale
y esto aquí
creo que no tenemos nada
y null
me parece perfecto
vale
por ahora voy a dejar
esto así
vámonos al next UI
que es lo que vamos a utilizar
es la primera vez
que lo utilizo
así que nada
vamos a darle cañita
your new development
hostia
le han puesto publicidad
ya hay todo
ya le han puesto publicidad
uy la letra
no sé si es safari
por regular
venga vamos a instalar
next UI
oye muchas gracias
a todos por sus suscripciones
que os como la cara
joder
jomar sánchez
gracias
gracias
mozgaugix
y gracias
al que me ha pagado
la hidratación
mefistops
grey sunset
y hola midu
todo el que te he dicho
es que depende del proyecto
que se genere con SSR
no significa que no lo puedan linkear
o sea hacer link
rel
style sheet
se puede también
kitsune dev
hostia muchas gracias
kitsune
además tiene el nombre
de restaurante japonés
tío
y recuerdo mucho
ese restaurante japonés
está increíble
bultak soy yo
ya sé que eres tú
gracias por tus 8 meses
y gracias
a tantra
que he desactivado
linter
gracias
sky
skinny
bojik 21
joder muchas gracias a todos
y gabriel dice
poly gabi function
a la primera función
que declares
hostia
como todavía no declara una función
bueno vamos a poner el gabi function
aquí
mira como este
no pasa nada
lo vamos a poner aquí
vale gabi
gabi function
en latín
gabi función
total
el nombre de este componente
no pasa nada
y gracias
shiju
y muchas gracias a todos
tú tienes un curso de note
no
todavía no
vale
venga vamos a ver
next ui
me dice la instalación
que te vamos a hacer
el npm install
de esto
pues vamos a ejecutarlo
nos vamos a nuestro proyecto
abro la terminal
y aquí
el npm install
de next ui
org
barra react
me encanta esto de react
porque parece ser
como que
en algún momento
habrá otro sitio
que no sea react
no
a lo mejor es vert
quien sabe
vale ya tenemos esto
setup
para
vamos a hacer esto
un poquito más grande
vale
para que lo veamos todos
para next ui
para que trabaje bien
tenemos que hacer
un next ui provider
en el root
de tu aplicación
en react
tiene que ser tal
pero como nosotros
tenemos next ui
nos vamos a pages
guión bajo
app
que esto es
como el punto de entrada
como lo que envuelve
toda la aplicación
el componente que envuelve
toda la aplicación
ya dijimos en la última clase
que aquí es donde deberían ir
todos los providers
y aquí lo podemos ver
porque justamente
necesitamos un provider
vamos a quitar
entiendo el estilo global
que no vamos a facilitar
porque esto ya tendrá
sus estilos
envolvemos
nuestro componente
que esto sería
toda la app
con nuestro
next ui provider
vale vale vale
vale vale vale
y
vale el 2
ah
hostia que hay que hacer
más cosas en el document
vale el document
es otro archivo
un poco especial
que dice
que lo cree
vale y se pone aquí
barra
bueno guión bajo
document.js
este document
si la app
es el componente
que envuelve
tu aplicación
en realidad el document
va un poquito más allá
y es un componente
además que sirve
tanto en servidor
como en cliente
y lo que te permite
de alguna forma
es también envolver
lo que sea el body
y el html
por si necesitas cambiar
cualquier cosa de ahí
entiendo que por eso
por ahí van los tiros
porque ves que pone aquí
css vaseline
vaseline
de vaselina
baseline
punto flush
vale
y esto
por qué lo necesitará
para poner algo
de estilos en línea
me imagino
alguna cosa
ahí preguntaremos
no sé si estaba aquí
jr garcía
pero
preguntaremos
un poco
un poco rollo
pero bueno
si tiene que funcionar así
pues a esto lo dejamos
vamos a quitarle
todos los puntos y comas
que no me gustan
no me gustan
pero bueno
esto lo que hace
esto tienes que chipear
el get initial props
que esto
no sé si esto hace
que pierdas alguna
optimización
a ver que lo pienso
al menos antes sí
me imagino que lo han arreglado
porque este
get initial props
a ver
un momento
esto también
como
server render
a ver
si
tienes que customizar
el document
vale
que es justamente
lo que hemos hecho
custom server
bueno
esto
en principio
no lo necesitamos
porque no
no hemos hecho
nada de esto
a ver
que pongo aquí
en el document
del document
de este
caviets
a ver
vale
document
correct
de su support
next year
data fetching
methods
like
ta ta ta
customizing
typescript
vale
es que antes
antes
si tú
tocabas aquí
initial props
perdías
como ciertas
optimizaciones
veo que lo han quitado
o sea que fantástico
vamos a dejarlo
entonces
acá habla sobre
ah
un juego
Facundo Capua
no ya ya
pero me refiero
en el document
en el document
ves que hemos utilizado
aquí
este que tiene
initial props
pues antiguamente
si se tocaba
esto
como que no le gustaba
mucho
y te la podría
liar parda
pero bueno
mira esto
ah bueno
vamos a dejarlo
en inglés
body main
bla bla bla
bueno
ya hemos hecho
lo que nos ha pedido
o sea que
no me falles
next UI
vale
no veo ningún cambio
perfecto
no sé si es bueno
o si es malo
no sé
supongo que es bueno
yo creo que sí
o sea quiero pensar
que todo está
como debería estar
vale
next UI
next UI
next UI
bla bla bla
esto ya lo hemos hecho
esto ya lo hemos hecho
bueno vamos a probar algo
no sé
a ver este container
que pone aquí
container
default
container
no sé qué
no sé cuánto
que sé
vamos a probar esto
por probar algo
vamos a la home
y así tocamos
todos los estilos
que había por aquí
por defecto
todo esto
mira vamos a quitar
todo esto
que es lo que se ve ahí
que no nos interesa
vamos a poner todo esto
y lo vamos a importar
este dip
lo vamos a cambiar
por un main
esto lo movemos
por aquí
y este dip
lo cerramos aquí
vamos a intentar
de esta forma
que los estilos
nos vengan bastante hechos
así que vamos a quitar este
estos estilos
que importamos
vale
y aquí se me queja
de que esto
pues no está definido
vamos a importar
esto de
next UI
react
vale
vamos a importar
el container
está loading
tú puedes
bueno
no vamos a esperar
row
y creo que ya está
y text
vale
pues ahora tenemos que utilizar
siempre esto
next UI
es un catálogo
de componentes
que tiene bastante buena pinta
que se ven bastante chulos
no puedo encontrar
variables styles
styles
porque he dejado este de aquí
vale
fuera
vale
ya vemos que sí que funciona
que ya tenemos los estilitos
pues ya está
vale
que hace la etiqueta main
en un componente
y pueden haber varios main
creo que no debería haber varios main
y en este caso
este componente
es que es la página
entonces el main
es donde tendríamos
el contenido principal
entonces
no creo
que deberíamos tener varios main
así que
utilízalo
con sabiduría
en este caso
es que ya te digo
esto es el componente principal
o sea
esta es la página
vale
el index.js
que tenemos aquí
esta sería la página
la página home
entonces sí que tiene sentido
que tenga el main
pero no lo tengas
en todos los componentes
solo deberías tener un main
vale
vale
pues venga
vamos por ahí
main
head
footer band de uno
no eh
el footer y el header
bueno el head este sí
pero el footer y el header
puedes tener más de un header
más de un header y un footer
de hecho
ahora que has dicho eso
me has recordado
que deberíamos tener
una carpeta components
y vamos a tener aquí
el header.js
vamos a poner aquí
header
vamos a poner
y así veremos también
el active link
que creo que el otro día
no lo vimos
y vemos como podemos hacer eso
vale
entonces
vamos a tener aquí
el header
y vamos a poner
por un lado
xkcd
o next
vamos a poner next
vamos a ponerlo así
vamos a hacer una cosa
rechulona
creo que
deberíamos utilizar
el componente
text
todo el rato
¿no?
vamos a utilizarlo
vamos a intentar utilizarlo
a ver que sale de esto
a ver
vamos a ver la documentación
tenemos por aquí
text text text
este
este componente
text component
sirve para renderizar
texto y parágrafos
vale
y te dice headings
a ver
como es esto
h1
h2
h3
h5
h6
ah mira
encima que tiene gradientes
ya de gratis
bueno este no se nota
una
ah coño
es que hay que hacerlos
hay que hacerlos a mano
me siento engañado
vale vale
pensaba que tenía ya
algunos preestablecidos
me siento un poco timado
me ha timado
vale
esto sería small
pues yo creo que todo
tiene que ser todo esto
tendría que ser small
porque el text este no me lo ha importado
porque no me lo importa
bueno ahora sí
todo esto tendría que ser pequeño
vamos a hacer que esto esté
en el div
aquí
esto por aquí
y en el otro
vamos a poner un app
donde vamos a tener por ejemplo
vale
li
vamos a tener link
href
esto sería la home
así que vamos a poner
home
claro
que vamos a poner si no
vamos a importar el next link
link from
next link
que es esto de link
yo te lo explico
no te preocupes
el link este
es un componente especial
que tiene next
para que puedas hacer enlaces
que
que funcione como spa
porque si utilices el a
pues bueno
lo vamos a ver ahora
pero
voy a dejarlo con el a
para que lo veas
vale
y te lo vuelvo a explicar
bueno de hecho ves
que el linter ya me lo dice
no utilices el html anchor
para navegar
usa el link
ya es que te lo dice
o sea que puedas ver
hola primera vez que veo tus directos
dice
dead spawn
pero he visto tus vídeos de youtube
y son excelentes
me encantan los partidos proyectos
que te has aprendido bastante
gracias por este acento contenido
gracias a ti
guapo
guapo
no sé
no sé que escondes
detrás de ese nombre
pero gracias
te lo agradezco un montón
además ayer
os voy a enseñar un mensaje
que me llegó ayer
que me rompió el corazón
me rompió el corazón
en mil pedazos
jodió mi existencia
en realidad mentira
tampoco me jodió tanto
pero hostia que grande
que me he buscado en instagram
y fijaos
quien sale aquí
porque
mi dudez
y mirad quien es este hombre
es una persona
que se ha comido
a mi dudez
y se está haciendo pasar
por mi dudez
gracias feral
por poner mi propio
gracias por poner mi propio
mi propio instagram
porque ni siquiera yo me lo sé
pues si si si
bueno al menos es una persona feliz
aquí os he contado la historia
de que a este chico
yo le escribí
y le dije
hola
mi dudez
te importaría
cambiar
tu nick
porque la verdad
es que
me gustaría tener
ese
por cierto
por cierto
por cierto
por cierto
o sea que fuerte
que instagram
una vez que scrollé
un rato
me dice
no no
ahora tienes que iniciar sesión
que he visto aquí
que he visto aquí
ojo
ay
me ha echado ya
instagram ya no quiere cargar más
pero durante un momento
creo que he visto
porjap ahí
pero bueno
me ha dado la sensación
si si verdad
he visto porjap
y como
y ahora la pregunta es
y como sabes tú
que porjap es así
tan tan tan
bueno
el tema
yo lo he visto por el tiktok
la verdad
porque en tiktok
hacen mucha
mucha de esa broma
vale
vamos a ver
vamos a buscar
al verdadero
mi dudez
os voy a enseñar una cosa
que me pusieron
en el otro día
que
ay joder
que no puedo
mido
no puedes
si no inicia sesión
que
que locura
que locura
no poder ver
mis propias stories
tu contraseña es incorrecta
y cuál es mi contraseña
no me la sé
no me sé mi contraseña
actualiza la contraseña
no
no actualiza la contraseña
a ver
no puede ser tan difícil
espérate
que voy a intentar
entrar en mi instagram
si no soy capaz
madre mía
ahora me va a enviar un
oye me parece increíble
que el generador este
realmente
parecen diferentes
las
vale
me ha llegado un mensaje
vamos a ver
el mensaje
que me ha llegado
para poder acceder
a mi propia cuenta
vale
vale
venga
vamos
vamos
facebook
guardar información
sí
sí
me voy a fiar de mí mismo
vale
ya está
vamos
vamos
vale
pues vamos aquí
este soy yo
haciendo publicidad
este soy yo
este soy yo
no
¿dónde está?
ah este
este
pues eso
que me llegó este mensaje
que os lo puse
un poco con mi
mi opinión y todo
la verdad
te soy sincera
he visto un par de vídeos
de los que has publicado
y he salido más confundida
de lo que me he encontrado
no les encuentro cabeza
o pie
o lo que tratas de explicar
es como que quisieras
jugar a Jesús
¿cómo se juega a ser Jesús?
la verdad es que eso
me lo pregunté muy fuerte
¿cómo juegas a ser Jesús?
o sea
¿intento tocar el agua
y lo convierto en vino?
¿cómo se juega a eso?
no
no tengo ni idea
¿deja que los niños se acerquen a mí?
no sé cómo se juega
explicarlo todo en parábolas
lo explico todo en parábolas
tal vez tú crees en tu mente
tú en tu mente
esta chiquitita
mi mente chiquitita
realmente crees que enseñas
cuando puede ser que el espectador
como yo
sienta que le confundes más
de lo que ya estaba
y esto de la programación
es frustrante
máximo
si has intentado
de una u otra forma
las cosas
y no funcionan
tú viste
y encima
luego pillo
el midu Jesus
pilla después
dice
el que se hace por Jesus
Jesus va a pillar
va a ser ahora mismo
ataladrado
a la
iba a decir a la horca
pero a la cruz
dice
si has intentado
de una u otra forma
las cosas y no funcionan
tú viste suerte
de que tus padres
te apoyaran
hasta la universidad
a mí mis padres
no me pagaron
ni un solo año
de estudios
toda mi primera
fue becada
al igual que la secundaria
el bachillerato
y la universidad
y tuve que gosteársela
por su propia cuenta
te imaginas vivir
en un mundo
donde tu propio padre
te dice que para lo único
que sirves
es para tener hijos
y atender a un cabrón
y de allí no sirves más
para ni mierda
si amigo
tu vida
tu vida
fue una gloria
comparada
con las de otros
y bueno
lo que digo debajo
es que
la verdad es que la entiendo
o sea que
no pasa nada
que está bien
amiga
que
me he cruzado en tu camino
y me has echado
todo eso encima
no pasa nada
no es la primera vez
que me echan cosas encima
así que no pasa
yo te quiero igual
de verdad te lo digo
entiendo tu frustración
porque ya te digo
que a mí casi me expulsan
de la universidad
por insultar a mi profesor
porque lo odiaba a muerte
porque no me salían las cosas
entiendo tu frustración
a todos nos pasa
pero bueno
que a ver
que no es mi culpa
que tu padre
sea un misógeno
el problema de tu padre
dile algo a tu padre
no me lo dejes a mí
en un comentario de youtube
eso también te lo digo
digo más que nada
porque tu padre
de repente
no va a entrar
en un vídeo random
de youtube
y va a decir
mi hija me dejó
un mensaje
en mitad de youtube
aquí escondido
en este vídeo
para mi dudé
dios
o sea que eso
no va a funcionar
o sea creo que deberías
hablar con tu padre
o alejarte de él
que al final
es verdad que es familia
que es un padre
que tal
pero a ver
que si es tóxico
pues mejor que le pegues
una patada
y te vayas
y hagas tu vida
en otro sitio
y tal
te mando un abrazo
de verdad
de verdad
de cariño
te lo digo
que no te
o sea si estás ahí
no pasa nada
no pasa nada
lo entiendo
estás frustrada
y bueno
también es verdad
que me sabe mal
que hayas entrado
en el canal de youtube
como pensando
voy a aprender a programar
a un vídeo
bueno
vamos a hacer
un tiktok desde cero
vale
o sea creo que no es
la mejor forma
o sea tienes que tener cuidado
creo que hay que
hay que un poco
hay que un poco
no sé
tener un plan de estudio
me parece
porque no puede ser
la programación
no va a ser
entrar en un vídeo
y a ver que dice este
y a ver que entiendo
porque
te vas a frustrar más
no quiero
no quiero que la gente
se me frustre
no quiero
pero entiendo la frustración
programar así
encima
es que yo me acuerdo mucho
por eso empatizo mucho
mucho
y recuerdo
esa furia incontenida
lo recuerdo
vivamente
así que
hostia
señor
gracias por
una suscripción
al extremo
gracias también
por suscribirte con
prime
y es game player
por estar 8 meses
con jesus
por estar con jesus
has visto
zobi
gracias también
dos mesecitos
ramalama
gracias también
por suscribirte
y
gracias a todos
salir modo jesus
ya está
se acabó el modo jesus
hasta aquí
hasta aquí hemos llegado
subirás el curso a youtube
depende
si esta chica
me vuelve a escribir
si lo subo
yo me frustro
cuando midu no hace directos
bueno a ver
estoy por ahí
multiplicando los peces
los pescados
midu cambiando de tema
los links tienen que tener
dentro una o no
la duco dice que
the link is similar
to using app
instead of a
si
se supone que si
pero
a ver si y no
si y no
la pregunta que me hace
nuestro compañero
Alexiño
Axeliño
perdón
Axeliño
es si los links
deberían tener
un A
en principio
si que lo deberían tener
de hecho aquí los ejemplos
ves que tienen un A
o sea que si que deberían
tener un A
porque
ves
if the chili is a custom component
that grabs an A
vale pues aquí lo tienes
entonces lo que te comenta
es que
bueno no se si en algún momento
lo comenta
pero si
solo tiene un A
te lo puedes evitar
o sea lo hace automáticamente
no se si es una cosa que
pero la buena práctica
sería
la buena práctica
sería poner siempre el A
porque son como dos cosas diferentes
y de esta forma
este link
hace como lo que tiene que hacer
y luego este A
hace otra cosa
así que
pero si no le pones la A
o sea si lo único que haces
es envolver un anchor
no vas a ver que no tienes ningún problema
pero por tema
yo creo
o sea de hecho lo podemos ver
¿no?
en el proyecto que estábamos haciendo aquí
bueno que se ha quedado así
si tú dejas el link
vamos a copiar esto
y esto era
about
no sé por qué
vamos a poner about
pero
vamos a poner aquí el search
por poner algo
¿vale?
search
y si nos vamos aquí
vamos a cargar este componente
en el index
¿vale?
ah espérate
espérate
vamos a
vamos a hacer que sea
nombrado
import
header
¿vale?
lo cargamos
y en el header
el header lo vamos a poner aquí
header
¿vale?
y ya está
y aquí podemos ver justamente aquí los botoncitos
si lo miramos
aunque yo no he puesto la A
aquí deberíamos ver que está la A
así que por defecto
si lo único que haces es envolver texto y eso
pues no necesitas
no es que no necesites
es que lo hace automáticamente
pero sí
lo correcto
o lo recomendado
es hacer esto
envolverlo en la A
en el anchor
no en la A
queda un poco raro decir
en la A
no
el anchor
¿vale?
y automáticamente esto debería
verse exactamente igual
que como lo hemos hecho antes
no que vas a ir dos veces la A
¿vale?
¿veis?
o sea se ve el anchor
pero es lo mismo
pero sí
lo correcto debería ser esto
yo entiendo la frustración como un estilo de vida
eso está bueno
eso está bueno
joder
dice yo me frustré estudiando C
¿quién no se frustra estudiando C?
qué bueno
ay
qué risa
midu
si a la A le signas el class name
claro
por ejemplo a la A le puedes
¡uala!
¿qué dices Imanolde?
Imanolde es Jesús
Jesús ha bajado
y dijo
tomad
tomad y aprended
hijos
tomad y aprended
pues he llegado
yo Imanolde
de entre
de entre los ángeles
para regalar 10 suscripciones a la comunidad
de nivel 1
tomad y seguid aprendiendo
pues solo el crecimiento
entre hermanos
es el crecimiento
que necesitamos
mira le ha tocado de Julio Xuna
qué grande
qué grande
oye muchas gracias
muchas muchas muchas gracias
muchas muchas muchas gracias
Imanolde
madre mía
vamos vamos
que a tope
vamos a tope va
me gusta me gusta
venga
como voy siguiendo
pero muchas gracias Imanolde
como puedo
tirar citas aquí
por ejemplo
esto no tiene
algún tipo de
container
spacer
vale
container
pero no quiero que el container
este tenga
color
porque este container
ah el container
xl
card
vale
es porque tengo la card
vale
qué más tiene esto
vale
flex
grab
no sé qué
vale
entonces
vamos con el header
un momento
header
a esto se le puede decir
que cómo se tiene que renderizar
o sea se le puede poner un as
entiendo que sí
¿no?
flex
justify
o sea no se le puede poner
renderízate como un
o no
o por defecto se
a ver
lo probamos y ya está
lo probamos y ya está
vamos a poner aquí el container
madre mía
no paran las subs ahí
muchas gracias
as
header
vale
y este container
lo vamos a dejar por aquí
y vamos a poner
draw
align
vamos a ver
autolad columns
responsive
fluid
set max width
vamos a poner responsive
lo vamos a inventar aquí
vamos a aprender aquí
a saco
responsive
¿qué más tienes?
xs
extra small
bla bla
esto es el booleano
el gap
grab
justify content
vale
queremos que sea el display
queremos que sea
display flex
suena pena
no se pueda poner flex
directamente
y el
justify
ah mira
space
between
¿no?
vale
más o menos
más o menos
solo nos queda que esté en app
no sé si
puede haber un container
en un container
dentro de un container
con un container
y display
flex
container
container
container
bueno la verdad es que no sé si hay uno mejor
hostia
hostia
hostia
estamos liando
la verdad es que
este es el problema que muchas veces me encuentro con el
responsive
es que no he puesto responsive
response
ay
he puesto response
gracias
en realidad lo hago para ver si estáis atentos
bueno si somos capaces de estilar eso
yo me daré con un
canto en los dientes
vale
¿por qué se ven este?
¿sabes?
¿por qué los sul se ven así?
uno encima
es que claro
esto tendríamos que hacerlo aquí
¿no?
o sea esto
esto
esto
esto tendríamos que hacerlo aquí
y esto
que sea el flex
direction
row
vamos a poner nap
nap
y el container
esto lo pasamos arriba
esto lo pasamos aquí
esto aquí
vale
más o menos
y no sé si aquí
como style
vale
bueno
va tirando
y aquí le podemos poner el gap
directamente
así
no
no se lo ha comido
ya veríos increíble
esto ya no se lo ha comido
tampoco tanto
pero bueno
vamos a hacer esto así
y esto por aquí
venga va
lo están haciendo apenas el componente nap
sí
nos estamos
queda queda
gracias por todo el contenido
midu
gracias a ti hombre
gracias a ti
no he visto un componente nap
la verdad es que es la primera vez
pero
ah sí
es que pone
coming soon
coming soon
o sea que todavía no
habrá
pero todavía no
claro es una pena
porque hay muchas cosas
que hay que hacerlas
todavía a mano
collapse
¿qué es esto del collapse?
ah mira
esto es este componente
bonito
me gusta
no te está pillando los as
a ver
ya
me lo he imaginado
ah pues aquí sí que pone
que está
no sé
a que el container
no tiene as
¿verdad?
no
es que el container
parece que no se puede renderizar
con as
o sea no
no tiene
no tiene esa opción
así que
qué rollo ¿no?
qué rollo
claro
porque entonces esto no
no vas a ir bien
a ver
que decías que no
sí
me está dejando
en deep
pues qué rollo ¿no?
porque si no
entonces
¿cómo estilas aquí
con lo que te dé la gana?
todos
espero que
le llegue
ah bueno
si no podríamos
haber utilizado el grid este ¿no?
grid
mmm
spacer
mmm
pues nada
mmm
a ver
tampoco
tampoco pasa nada
pero
esperaremos que
actualicen los
las cosas estas
vale
vamos a dejarle
voy a quitar esto
entonces
vamos a dejar este
en gap
que entiendo que ahora sí que funcionará
tampoco
¿por qué no funciona el gap?
ah es que no tiene gap
pensaba que tenía la opción de gap
y no
justify
que no sé qué
md
bueno
a ver un momento
porque en el container este
antes he visto
separaciones
a ver que os leo
hola midu
gracias por todo
tu ayuda desde Argentina
nada un placer
es una mala práctica
combinar una librería
de componentes como esta
con una como un tailwind
hombre yo creo que sí
que podría ser un rollo
ponle el gap en el style
claro
sí
se lo podría poner aquí
ya está
ya es toda razón
toda razón
pero
me hubiera gustado
seguirla
no, tampoco
¿qué está pasando?
es que tampoco tengo claro
que estos estilos
a ver
estilos
na, na, na
na, na
na, na
na, na
na, na
na, na
na, na
na, na
na, na
na, na
column gap
row gap
pero es que le está poniendo
o sea yo he puesto gap
y pone row gap
column gap
flex
column gap
pero no está poniendo
el gap normal
pero bueno
tampoco está haciéndolo
¿por qué no está poniendo
el gap?
a ver
que si no estilo
lo de abajo
ya está
está un poco verde
bueno
no creo tampoco
¿no?
mándale bootstrap
puedes quitar
el list style
bueno sí
ahora lo puedo quitar
tienes toda razón
tienes toda razón
a ver
si no
claro
el problema que veo
el problema que veo
es que
si no tienes
para estilar rápidamente
este tipo de cosillas
o sea
¿cuál es el componente
que debería utilizar
para estilar
rápidamente
cosas?
para poner espacios
y cosas así
eso es un problemilla
con Tailwind
como que
mira
alguien decía
de mezclarlos
que era mala idea
pues me parece
lo he dicho yo
que era mala idea
normalmente no deberían
necesitarlo
porque obviamente
si lo hacemos
pues mira
también con Tailwind
vamos a hacerlo
con Tailwind
que Tailwind
al final
va a ser bastante
más rápido
a ver
next.js
what to read next
vamos a
Tailwind
next.js
installation
y ya está
y lo que no se puede hacer
con lo otro
lo hacemos con Tailwind
y así vamos a hacerlo
en un momento
creamos el proyecto
esto todo esto
ya lo he hecho
hay que instalar esto
es que vamos a estilar
y mucho más rápido
mucho más rápido
con las cosas
que no
que no podamos
y si no sabes Tailwind
no te preocupes
porque se entiende
muy fácil
se entiende muy fácil
en la 2 dicen
que debe ir gap
como prop
pero hemos probado
el gap
y no funciona
y de hecho ni está
ah mira
aquí sí que pone
que está
pero que puedo poner aquí
porque si pongo 4
no me lo está pillando
lo que me
me da la sensación
no me lo puedo creer
que ahora sí
que me lo ha pillado
ahora sí que me lo ha pillado
¿por qué no me lo estaba
pillando antes?
me parece
que no se está
actualizando
¿puede ser?
no lo sé
no lo sé
pero ahora sí que me lo ha pillado
bueno
quizás seamos
demasiado inmaduros
para comprenderlo
no sé
pero ahora sí que lo ha pillado
vale
es una pena
pero muchas gracias
por mirarlo
me ayuda un montón
de que vayas mirando cositas
es la vida
align content
vamos a poner center
vale
¿otra vez?
estoy flipando
estoy flipando
¿por qué?
¿por qué pasa eso?
no tiene
faltaba comando S
no
pero si estoy guardando
todo el rato
se guarda solo
no entiendo
porque
si no he cambiado
nada
y ahora
vuelve a no salir bien
no sé si es un tema
del CSS
que se vuelve
tonto
pero
bueno
no pasa nada
que
lo utilizamos
donde podamos
y ya está
vamos a instalar
Tailwind también
por si nos puede ayudar
para este tipo de cosillas
y ya está
y donde no llegue una cosa
lo haremos con Tailwind
y ya está
total
al final
no me frustro
tampoco es eso
para personalizar
si le metes padding
aumentas el width
te lo separas fijo
sí
en peores plazas
hemos toreado
no os preocupéis
sí
bootstrap
a ver
no nos pasemos
no nos pasemos
bootstrap
ahora
vale
vamos a poner esto
styles.global
no sé si
yo quiero pensar
que sí que se puede utilizar
que sí que se puede utilizar esto
vale
lo que pasa es que esto
ahora tenemos que importar
styles
styles
global
globals
vale
puede ser
que estoy pensando
que a lo mejor
no se lleva muy bien
el CSS de uno
con el otro
yo creo que Safari
es el que está dando problemillas
bueno vale
vamos a
ha petado mucho este
esto parece una feria de mercadillo
ya es que Chrome consume
me consume hasta la vida
vale
pero ahora bien
¿no?
vale
pues ya está
venga va
vamos
vamos por faena
vamos por faena
que si no esto
no lo vamos a terminar nunca
h1
h1
¿cómo funcionaba?
tailwind
que ahora se me ha olvidado
flex
ok
vale
es que este text
ahora no tiene sentido
span
hostia
se me ha olvidado un poco
tailwind
cago en la leche
bolt
¿cómo era?
font
bolt
vale
class name
font
light
me había olvidado un poco
tailwind
vale
la verdad es que me gusta mucho tailwind
para estas cosas
me gusta
al final se abortó
no no
vamos a utilizar
next UI
con lo que podamos
pero
pero
no sé
o sea
utilizamos más los componentes
y ya está
y ya está
que al final
hostia
es que me ha metido
este div
aquí en medio
también
trajo
que igual es culpa mía
también alguna cosilla
tenía que ser
este div
o sea
no era necesario
ese div
que igual era culpa mía
puede ser
quien sabe
quien sabe
igual
algo de culpa mía
había por ahí
mira
es que
header
clan
vamos a poner
flex
justify
center
align
no
justify
between
align
o item center
no es align
esto es lo que peor llevo
de tailwind
muchas veces
es el
align
esto
que me dice
gijaco pilot
a ver si
se la pega
venga
header
vale
lo que pasa es que ahora no se ve un coño
esto es porque me ha puesto esto
vale
ya empieza
ya empieza a pintar un poco mejor
vamos a poner que el max
quiz sea de
2
max
quiz
auto
vale
lo vamos a hacer bastante cortito
vale
así que ya está
ya está
vale
y ahora esto
venga
vamos aquí con el
ul
li
vale
y esto lo vamos a hacer así
un momento
y lo otro lo utilizaremos más para componentes en concreto
que
que no para estilar cosas
y hacer
secaciones
y todo esto
vale
venga
venga
venga
venga
venga
y venga
vamos a poner ul
class name
flex
row
flex row
puede ser
sí
vale
y con
vale
aquí el gap ha funcionado bien a la primera
no quiero decir nada
no quiero decir nada
pero
a ver
que no tiene culpa de lo otro
es que tampoco
a lo mejor es que
vete a saber
vete a saber
la que
la que he hecho yo
antes
vale
bueno
no sé por qué no me funciona
este
text
vale
es
lo trajo
vamos a poner
este
porque el text
ahora
vale
sm
vale
eso es lo que quiero
y el font
bolt
y luego lo sacamos
en un componente
ya está
a ver
que no pasa nada
porque esto va a ser de código abierto
y si lo queréis refactorizar
lo refactorizáis entre todos
y creo que podéis ir aprendiendo además con esto
vale
más o menos
venga
vamos a seguir con el tema de lo demás
que es más interesante que el género
vale
si obvio no iba a ser
vercel que hizo algo mal
hombre no
vercel que hizo vercel
pobre
hizo vercel
aparte de chakra
para esas cosas sencillas
tailwind es lo mejor
la verdad es que claro
lo bueno de tailwind es que tampoco tiene magia
sabes es lo que es y punto
y tampoco te engaña
es mira estos son los estilos
y ya está
venga vamos a abrir
no esto no
vamos a dejar
lo ves yo creo que aquí
pues con safari está bien
aquí lo que lo que estábamos haciendo
aquí se ve
se ve chulo
vale
venga
sigamos con
con el tema este
queremos
listar primero
la
en la home
queremos listar
algunos de los cómics
que tenemos
vamos a mover aquí los cómics
vámonos aquí a cómics
y vamos a empezar a ver
un poquito de la magia
que
que tiene
que tiene justamente
cd cómics
vamos a hacer un copy
de
de lo que hemos tocado antes
vale
barra cómics
y esto tenía
todos los jason
los vamos a copiar aquí
no sé si se lo has copiado
vale
los ha copiado
perfecto
entonces vamos a empezar
con alguna de la magia
que tiene
que tiene
nextds
y una
es la de
get static props
vale
el get static props
al final lo que nos permite
es generar
páginas estáticas
y para hacer eso
pues tenemos que hacer
un export
sync
function
del get static props
get static props
context
context
vale
vamos a hacer un return
de las props
y aquí es donde deberíamos
devolver las props
y estas props
le llegará aquí al home
y aquí podremos hacer cositas
que es lo que deberíamos hacer aquí
bueno
lo que podemos hacer
por ejemplo
es recuperar los últimos 6
podríamos listar
lo bueno que tenemos aquí
en el get static props
es que al final aquí
lo que tenemos
es justamente
lo que
lo que queramos
o sea
esto debería
poder ejecutarse con node
y ya está
next
next
lo cambio por
next tailwind
claro
tailwind es como estilar en línea
entonces igual es rapidito
si totalmente
consulta
ya que estamos con next
como hacer funcionar
cuando tenemos páginas
con static props
pero el componente
navbar
tiene componentes dinámicos
como el login
bueno lo puedes hacer
justamente
a ver
tienes diferentes formas
de hacerlo
pero una forma
como lo hace versell
por ejemplo
es hacer el cambio
en clients
al rendering
y ya está
y entonces no lo muestras
hasta que no estás en clients
al rendering
y ya está
vale
tengo una pregunta
o sea
yo aquí puedo
traerme
puedo ejecutar
cosas de
node
sin ningún problema
¿sabes?
o sea
porque dice
este load post
dice fetch
no sé qué
¿sabes?
o sea
quiero ejecutar
a ver si en el get static path
hay un ejemplo
quiero ejecutar
with this tool
o sea
quiero ejecutar
directamente
quiero mirar
en el
como estos son todos
de fetch
pero es que no quiero hacer
un fetch
yo entiendo que sí
sé que puede
porque esto lo he visto
un montón de veces
el hecho de mirar
lo que pasa es que
o sea
lo que quiero
para que lo veamos claro
es que quiero mirar esto
¿vale?
hacer un fs
pero lo que me da
un poco de miedo
es que esto
no funciona
¿qué es lo que quiero hacer?
con el get static props
quiero mirar
en el comics
fs.readdir
creo que es
¿no?
readdir
quiero leer
el punto
barra comics
y esto
que si no me equivoco
esto debería ser
una promesa
el readdir
a ver
no, no es una promesa
porque no he utilizado
el barra promises
¿vale?
y este readdir
promesa
y nos devuelve
string
¿vale?
tiene los files
eso es lo que quiero
los files
const files
¿vale?
vamos a ponerle
por aquí
console.log
de files
y por ahora
vamos a hacer esto
y esta propia
es la que llegará
por aquí
¿vale?
comics
vamos a mirar
esto de console.log
de files
y debería tener
todos los jasons
a ver
el ejemplo
que he visto aquí
decía
readdir
console.log
file
y el file
intento que tendrá
la información
que necesitamos
este console.log
lo deberíamos ver aquí
cuando entra la página
que
por cierto
voy a hacer una cosa
voy a hacer una cosa
para no perder mal
la página
porque
veis que
estoy perdiendo la página
ya no sé cuál es
¿qué es esta?
la voy a pinear
aquí
claro
la primera
¿vale?
vale
claro
es que yo también
si no
la espero
mira que
mira que lo he dicho
pero lo he pensado
y no lo he hecho
vale
aquí tenemos ya
todas las cosas estas
pues lo que
vamos a hacer
es
podríamos poner
el files
puntos
vamos a quedarnos
con
estoy pensando
si el slice
lo puedo hacer
en negativo
a ver
la forma más pirata
de hacer esto
sería hacer así
y hacer esto
pero sé que esto
no es lo que debería
estar haciendo
pero bueno
voy a esperar
que me lo digáis
se puede negativo
sí
pero
como no
ya
pero quiero
o sea
no desde el 0
al menos 1
quiero del
o sea
yo puedo decirle
del
o sea
recuperar
del files.length
al menos
8
esta es mi pregunta
puedo hacer esto
como nunca me he encontrado
con estas cosas
pues no lo he hecho nunca
vamos a ver si esto
me devuelve
los 8 últimos
si me devuelve
estamos aprendiendo
ya
no
no me los devuelve
obviamente no
no me los devuelve
entonces
no sé si a lo mejor
tenemos que hacerlo así
sí
así sí
así sí amigos
mira
tenemos aquí el
menos 8
y el files.length
claro
esto es desde el inicio
hasta el final
qué interesante
qué interesante
last comics
vale
si tenemos
latest comics
los últimos comics
van a ser estos
y estos últimos comics
los tenemos que leer
tenemos que leer
esta información
aquí a saco
así que esto
es que esto es lo interesante
que este tipo de cosas
realmente se puede
se puede hacer aquí
para qué quieres utilizar
una regex aquí
para qué quieres obtener
aquí una regex
vale
entonces
vamos a hacer
este
me lo voy a copiar
ah no
porque esto es
mira
aquí sí que vamos a hacer
un promise all
vale
vamos a hacer un
promise all
para los
latest
latest comics
vale
y nos lo vamos a leer
vamos a hacer un fs
read file
de
comics
latest comics
vale
vamos a hacer
read files
o
promises
read files
y aquí vamos a hacer
the latest comics
exacto
eso es lo que vamos a hacer
vamos a leer
cada una de estas
joder
con el gijaco pilot
macho
tío
o sea
me estás
me estás haciendo el stream
gijaco pilot
me estás haciendo el stream
bueno
básicamente
lo que queremos hacer
es leer cada uno
de los archivos
aquí
bueno
no está perfecto
pero bueno
revisándolo un poco
ya lo tendríamos
y bueno
yo el file
en realidad
no lo quiero para nada
lo que quiero es el content
punto pelota
entonces
para este promises read files
estamos haciendo un mapeo
de todos los comics
al final son 8
tampoco mucho
y
lo que hacemos aquí
es esperar todas las promesas
expuesto las promesas
hacemos una wait
y aquí esto
lo vamos a meter
en
le vamos a llamar
latest comics files
le vamos a llamar
latest comics
¿vale?
y ahora esto
va a ser justamente
esta prop
en este latest comics
deberíamos tener
todo lo que hemos leído
vamos a echarle un vistazo
¿vale?
eso parece que está funcionando
aquí
no switch file
directory
¿vale?
¿por qué?
porque he ido de listo
y este file
en realidad ya tiene el json
y yo que
o sea
ha sido mejor
gijaco pilot que yo
¿qué os parece?
¿qué os parece?
latest comics
es un arreglo de promesas
como las que me hizo ella
jajaja
que bueno
¿promis all
se podría escribir
de otra forma?
hombre
en este caso
creo que tiene más sentido
un promis all
lo que faltaría
poder hacer un catch
por ejemplo
o podríamos hacer un
en lugar de un promis all
podríamos hacer un promise
joder
all settle
pero
entonces
tenemos que mirar
este latest comics
porque cambiaría la app
en este caso
vamos a poner promis all
que creo que tiene más sentido
y nos simplifica un poco
la vida
vale
vale
pues ya tenemos
¿ves?
content
vale
lo que deberíamos hacer
con este content
como tal
lo que vamos a devolver
en realidad
es un json parse
de content
json parse
de content
y esto
ahora sí
vamos a tener
el content
del fichero
¿vale?
ya los tenemos
tenemos un array
con los últimos comics
ahora que tenemos
los últimos comics
latest comics
lo que podemos hacer aquí
pues es simplemente
mostrarlos
se podrán
enlazar
e iremos a cada uno
de los detalles
el detalle
lo pondremos aquí
a la derecha
y chino chano
¿vale?
así que
vale
vamos a quitar esto
y
uy perdonad
perdonad
que se me ha ido el ratón
o sea
entiendo las ventajas
pero eso de todo
o nada
este horrista
pero no me gusta
porque si una serie
te tira todo
sí estoy de acuerdo
pero en este caso
igual
si una te falla
te puede quedar
un poco raro
pero bueno
es verdad
que es mucho mejor
normalmente el old setter
si no
tiene bastante peligro
vale
entonces estos comics
si estamos pasando aquí
en props
latest comics
aquí
pues ahora
vamos a tener aquí
los latest comics
hacemos un map
y cada comic
vamos a hacer
algo aquí
¿qué es lo que vamos a hacer?
bueno primero
vamos a ponerle aquí
un h2
latest comics
vale
latest comics
de hecho podríamos separar
el último
de los
¿sabes?
el último comic
y ponerlo ahí bien grande
a ver como lo hace él
o sea
vamos a mejorar un poco
su UI
¿ves?
aquí tendría la última
ahí pone
el último
¿no?
y party
bueno
demasiado
es que tiene
la paginación aquí
y aquí
¿sabes?
o sea
por si acaso
además otra cosa
que podríamos hacer
es ponerle
accesibilidad
de que se te puedan mover
con el teclado
que es otra cosa
que me da bastante rabia
pues lo que podemos hacer
en este caso
sería poner uno grande
pero bueno
por ahora vamos a dejarlo así
y aquí vamos a poner
image source
comic punto
image
creo que es
creo que lo tenía por aquí
¿no?
tú tú tú tú tú
vale
me voy a copiar esto
un momento aquí
por tenerlo como referencia
para no ir cambiando mucho
save title
¿qué querrá decir
save title?
da bastante grima
save title
vale
es punto image
alt
comic punto alt
title
y save title
¿por qué será save title?
¿qué esconderá eso?
¿sabes?
¿cuál será la...?
¿cuál será la historia de eso?
vamos a poner esto dentro
aquí con la A
vamos a poner esto por aquí
esto por acá
esto lo cerramos por aquí
vale
el link
link is not defined
lo vamos a importar
link from
next barra link
vamos a tirar para arriba
ahora vamos a mirar esto del cart
a ver
ah mira había row aquí
hostia
no había fijao
o sea que igual es
vale
dice que no deberíamos utilizar este image
pero bueno
no pasa nada
bueno vamos a utilizar el nuevo
vamos a tirar el image
el componente image
de next
también
pipipi
y esto me va a petar
pero tiene sentido
¿vale?
tiene sentido
porque
ah no
no está petando como tal
y debería
vamos a ver
me parece que este
image
punto img
y esto lo he puesto en el source
ah
porque no estoy devolviéndolo
no estoy haciendo un return de esto
y no lo está renderizando
madre
madre
madre
madre
mía
¿vale?
por eso ni siquiera se queja de la key
ni de nada
así que
vamos a ponerle aquí ahora la key
y la key
vamos a decir que es comic
punto
id
la id del comic
ahora sí que se debería quejar
porque
¿ves?
href
peta strings
or object
in link
but got undefined
hostia
vale vale
href
vamos a poner que esto es
para cuando queramos ir a ese comic
comic id
que esto ya lo hemos preparado
hemos puesto la ruta comic
con el id
¿cómo estáis?
lo del safe title
debe ser el título
solo con caracteres azzi
para evitar hacer
errores con caracteres raros
puede ser
si usas la API de next
¿cómo haces el build
de la app
con rutas que se usan
en static generation?
no puedes tener levantado el entorno dev
y hacer el build a la vez
¿no?
a ver
el static generation
bueno
en el tema de la API
esto lo hace automáticamente
tú cuando levantas
el npn run dev
este modo
lo que son
statics
estos statics
aunque se hacen en build time
cuando estás en modo dev
en realidad funciona
casi como un
get server side props
porque esto se ejecuta
pero se ejecuta
como si estuviese en el servidor
porque si no es lo que dices tú
sería imposible
poder hacer la build
y tener el modo dev
entonces tú solo tienes que tener
el modo dev
y ahora funcionará
como si fuese un get server side props
y no te tenéis que preocupar
esto funcionará perfectamente
¿por qué no solo lo envuelves en paréntesis
y quitas el return?
por si acaso
tengo que hacer alguna cosa
por ahora lo había dejado así
¿vale?
modo dev
es diferente a midu dev
¿qué quiere decir eso?
midu no es mejor usar
el get static path
para que te genere una página
para cada cómic
ya que tienes el ID del cómic
pero si no hemos llegado a eso
Julio Burgos
¿cómo va a ser mejor
si no lo estamos haciendo?
si estamos en la home
ahora mismo
y la home
o sea lo que tú dices
no es que sea mejor
es lo que tenemos que hacer
aquí ¿no?
que todavía no hemos llegado
cuando ahora
estamos haciendo el enlace
para llevar ahí
pero claro
si no tenemos un enlace
que nos lleve
pues entonces
no podemos hacerlo
vale
aquí se me queja
de que tiene que tener
width y todo esto
vamos a poner aquí
en el next
image
width
claro el problema
el problema es que esto
no puede tener un width
¿sabes?
porque esto
a ver
properties o layout fill
vamos a poner layout fill
porque no tengo muy claro
que esto
vale
y ahora me dice
que no está configurado
el image
no sé qué
vale
esto tenemos que crear
un archivo
next config
aquí
y aquí en los
¿cómo se llama?
hostnames
images
vale
domains
vale
y ahora con esto
tenemos que reiniciar
esto me da mucha rabia
porque realmente
no entiendo
no entiendo
por qué no se reinicia
solo
me da rabia
midu
estoy por probar
gatsby
¿qué fue lo que no te gustó?
bueno me gustaba en su momento
pero
me parece excesivamente
complicado
para muchas cosas
el hecho de graphql
hostia hostia hostia
no sé
tiene como cosas
que no me terminan
de gustar
la verdad
hostia
el problema
de utilizar
el image
es que claro
tampoco me sé
las
yo creo que no vamos
a poder utilizar
el image
en este caso
y de verdad
que creo que no
porque no
no sabemos
cuál es
sabes qué espacio
es el que tiene que dejar esto
no tenemos ni puñetera idea
así que
esto va a ser un poco
tal cual
va a ser un poco así
vale
ya más o menos
tenemos lo que serían
los
los cómics
bueno los cómics
las viñetas
y cuando le damos click
ahora nos lleva a la página
de la viñeta
que es aquí lo que decía
que íbamos a tener que hacer
justamente esto
vale
por lo menos ahora tenemos esto
vamos a poner
este latest comic
esto
class name
vamos a poner aquí
text
xl
3xl
font bolt
text center
vale
latest comics
estoy pensando
hostia
estoy pensando una cosa
que estaría muy chula
no
la app no devuelve el tamaño
por desgracia
por desgracia
pero estoy pensando una cosa
que puede ser muy chula
estoy pensando una cosa
que puede ser muy chula
podría
hacer
que esto en realidad
vamos a probarlo
a ver si
puede quedar más o menos bien
claro
el problema es
o sea
podríamos poner
que el alto
siempre fuese el mismo
podríamos hacer como un slider
que
puede quedar súper bien
y cuando le das
pues nada
entras
y lo puedes compartir
y tal
y aquí se vería
pues un poco pequeñito
pero bueno
no quedaría mal
gracias por la hidratación
pero
el tema es ese
que dice
no te sirve
object fit
y el container
lo define las dimensiones
a ver
el tema es
que si
le defino
es que las dimensiones
quedaría
muy pequeñito
o sea
que tenéis razón
o sea
podríamos hacerlo
el image
por ejemplo
vamos a intentarlo
vamos a ponerlo
el image
vamos a hacerlo
con image
y vamos a poner
total
si esto no puede ir bien
500
y vamos a poner
vamos a poner 500 también
vale
y en el layout
vamos a poner
field intrinsic responsive
vale
no
pero veis
es que se ve mal
porque
como le puedo decir
creo que
este no
obvio
fix
no
fix
no puede ser
o sea
lo que me gustaría
intrinsic
tampoco puede ser
porque tampoco
lo va a cargar bien
y pues
no
es que no
con el object fit
pero es que
el object fit
ya es demasiado
no
a ver
ah
claro
aquí si
tienes toda razón
object fit
contain
vale vale
tienes toda razón
tienes toda razón
lo que
el problema
del object fit
es que no queda
del todo bien
con lo que yo
quiero hacer
porque
yo lo que quiero
es que todos
tengan el mismo
alto
como puedo hacer
en realidad
es que estoy pensando
en el slider
claro
tendría que ser
un cover
para poder verlos
de izquierda
a derecha
y que todos
tengan la misma altura
para poder hacer
el slider
y ya está
pero bueno
si no
vamos a hacerlo
con una grid
y ya está
esto era yo
soñando en cosas
porque es que
lo malo es eso
¿no?
este pedazo
de separación
que dejan
algunas cosillas
vale
vamos a dejarlo
un poco más pequeño
y aquí
vamos a hacer
que esto sea
deep
bueno
vamos a poner
section
class name
grid
grid calls
vamos a poner 2
vamos a poner también
un gap
de 4
vamos a poner
un section
vale
más o menos
¿cuál el gap?
me he pasado un poco
o cosa mía
luego también
el max width
vamos a poner
como este
lo había puesto antes
margin auto
vale
bueno
por aquí van
van un poco
por aquí los tiros
vale
ay
y si lo montas
dentro de un segment
a un article
no entiendo
¿por qué estás usando
safari?
estoy usando safari
porque con chrome
me peta
de vez en cuando
el stream
y no quiero que os pete
el stream
¿cómo tienes pensado
que se descargue
automáticamente
los últimos cómics
con github actions
cada día
lo que voy a hacer
es que vaya viendo
¿cómo pones varios cursores
en las variables
repetidas de code?
¿esto qué es decir?
pues dejo pulsado
el alt
edge
también es chrome
y pasaría exactamente
lo mismo
¿se te desincronizó?
a ver
hola
hola
bueno a veces pasa
¿viste la conferencia
visual de studio code?
no lo he visto
¿cuánto pesa
en xgs?
pues no lo he pesado
en la balanza
pero
no es muy
no es muy rápido
no
todo normal
vale
bueno
al menos ya tenemos
más o menos esto
y la
la idea sería
quizá va a quedar mejor
con el image
no más
y con un grid
así se vería como revista
bueno
es como lo hemos hecho
¿no?
más o menos
no hemos hecho esto
vale
vamos a poner aquí
un margin bottom
margin bottom 10
vale
que haya bastante separación
latest comics
igual pondremos arriba
el que ha sido
el último
como el último
y a ver
vamos a tener
poner esto un poco más
tenemos la imagen
hasta aquí bien
pero tendríamos que poner
claro esto tendría que
ocupar siempre lo mismo
entonces
vamos a poner aquí
un h3
y aquí el comic punto
bueno
save title ese
no sé si ponerlo
arriba o abajo
vale
vamos a poner aquí
el class name
vamos a poner
text semi bold
text sm
vale
text center
vamos a centrar
vamos a centrar el texto
y vamos a ponerle
bold
es que es font bold
no text bold
vale
y ahora que tenemos esto
esto vamos a hacer
que también tenga
un
una separación hacia abajo
y un padding
hacia abajo
vale
un margin bottom
de 4
que 4 no es que sean 4 píxeles
sino que es el espacio
espaciado 4
creo que lo puedes poner
16 píxeles
vale
bueno
son un rem
16 píxeles
en el caso por defecto
vale
un poquito por esto
y esto también vamos a darle aquí
un poquito de espacio
vale
y ya lo tendríamos
un poquito
así de esta forma
vale
ahora lo que tendríamos que hacer
es el
bueno si ya haremos el
el break
vale
hacemos el breakpoint
va
vale
vamos a hacer el breakpoint
vamos a hacer
para poner el breakpoint
primero vamos a hacer
calls 1
para que sea como
el que sería por defecto
hostia
porque aquí
no me
espérate
que es lo que no me está centrando aquí
será aquí
sí
vale
vale
vamos a poner
call 1
que sería como por el defecto
vale
lo malo son estos
que dejan demasiado espacio
en estos que parecen
sería genial
poder saber
la resolución
sabes
la relación de aspecto
de cada imagen
lo vamos a hacer
eso también
lo podremos hacer
lo podremos hacer
vale
pues hacemos esto
y lo que podemos hacer
básicamente
es que cuando
estamos
tú tú tú tú
por ejemplo
es
grid calls
2
vale
o sea que esto lo vamos a hacer
ves
ya más grande
y podríamos incluso hacer
no me acuerdo cuál era el siguiente
MD
sí
MD
grid calls
3
y ya está
joder
menta suave
tío
tío
tío
ha venido
ha venido
jesus
menta suave
10 subs
madre mía
muchas gracias
madre mía
así sí que se puede estar
de viernes
así sí que se puede estar
de viernes
madre mía
muchas gracias
menta suave
dice
cuando haces el scrapping
no puedes hacer una petición
de la imagen
y ver sus dimensiones
sí que lo podría hacer
y sería interesante
lo podríamos hacer
tendríamos que hacer algo más
porque no es
how to get
image dimensions
hay paquetes de node
que lo hacen
from node
que creo que puede
descargar un trozo
de la imagen
y
y
cuáles son las
las
image size
size of
claro pero
esto
image size
esto no funciona
o perdónate
que no estoy
compartiendo
ahora
comparto
image size
esto me suena a mí
de haberlo utilizado
el problema es que
creo que esto
funciona con imágenes
que tienes
descargadas
que a las malas
no las descargamos
ah no mira
image
bueno claro
podríamos hacer esto
o sea pero
check
bla bla
vale
vale
¿qué hacemos?
¿qué queréis que hagamos?
va
vamos a poner una poll
¿vale?
vosotros decidís
tenemos
vamos a hacer
un juego de error
¿qué hacemos ahora?
seguimos
con next yes
conseguimos
la
dimensiones
de imágenes
pide comida
que se alarga
bueno
eso
eso lo digo después
venga
vamos a poner
estas dos
votad
juego de rol
tú decides
la aventura
podemos hacer
cuando se ponga
el focus
sobre la imagen
sea grande
para ver todo el texto
también puede ser
de hecho
podríamos hacer
un zoom
brutal
para que ocupe
todo el espacio
pide comida
MVP
solo imágenes
y los width
face fijos
y con grid
que se adapte
vale
lo de la grid
ya lo tengo
y Gómez dice
soy mujer
¿qué es mujer?
¿quién es mujer?
Gómez es mujer
¿qué comeremos hoy?
pues yo creo que
no sé
pero quizás mexicano
quizás mexicano
el modo
midu
midu got
nice
leer sus metadatos
sí
pero hay un paquete
que te lee
los metadatos
soy mujer
¿quién me da sub?
pero cómo
si ya te han dado sub
o estás tú
suscrita
con
gaming
con prime
Kaeden
gracias por suscribirte
gracias
ijdef
muchas gracias
mentasuave
por esas 10 subs
muchas gracias
gracias
gracias
gracias
gracias
¿subirás el proyecto?
claro que sí
hombre
a mí me apetece
fabada
pues esta cosa jodida
esta cosa jodida
hostia
está la cosa
muy
muy
está casi
empatado
esto
a ver
midu
también podrías
hacer algo
como esto
vamos a ver
qué es lo que me dice
hago ed
hostia
me da miedo
me da miedo
no hombre
no
no
haga clic
en cada imagen
que contenga
un río
vertical
hostia
estoy nervioso
esto es un río
es un camino
dios
qué difícil
venga
más
joder
joder
qué cabrones
venga
codepen
y qué querés
que hagamos
con esto
no entiendo
el hecho
que salga
de izquierda
a derecha
si el problema
claro
es que esto
es muy fácil
pero es que
el problema
es que nosotros
tenemos imágenes
que tienen
diferentes dimensiones
que ese es el tema
dimensiones de imágenes
han ganado las dimensiones
de imágenes
vale
pues venga
vamos con las dimensiones
de imágenes
amigos
vamos con las dimensiones
de imágenes
que lo hacemos en un momento
va
teníamos aquí
xcd
teníamos el
quick dirty scrapper
vamos a instalar
el
vámonos aquí
teníamos
el image dimension
image size
se llama este
vamos a ver
si no da problemas
espero que no dé problemas
con
con m1
image size
instalamos la dependencia
vale
vale
vale
por aquí esto
entonces
es una versión
dos en world
input
vale
por aquí había uno
que ya te decía
cómo hacerlo con url
y todo esto
pues esto
lo podemos sacar
justamente
en un módulo
aparte
get image size
punto
jts
lo vamos a convertir
en
en más
crin módulo
si me deja
si me dejas
gracias
parse
get image
este es el que hemos importado
el que hemos instalado ahora
y
todo esto que está haciendo aquí
lo que vamos a hacer con todo esto
en realidad
es
convertirlo en una promesa
vale
lo que vamos a hacer es
vamos a hacer
export
const
get
image size
y habrá que pasarle la url
vamos a hacer un return
de new promise
y esto
el new promise
lo que
pasa como parámetro
es justamente
la promesa que queremos resolver
o hacer un rejec
así que
esta magia
que se está haciendo aquí dentro
la vamos a meter aquí dentro
es la forma que vamos a tener
de convertirlo en promesa
este
image url
no lo necesitamos
porque
esto lo vamos a poner aquí
no tengo muy claro
para qué es este options
parse url
esto yo creo que no es necesario
porque este get
con este options
ves puede ser un string
o sea
a esto se le puede pasar directamente
la url
y ya está
vamos a cambiar este
response
por una row function
esto
si os estáis preguntando
oye esta cosa tan rara
que es
esto básicamente
es el
https
get
o el http
http
get
de
de note
vale
que es bastante bajo nivel
pero bueno
lo que va haciendo
es que va leyendo
esa información
va recuperando
chunks de información
y en cada
cada vez que se le llega
un poquito de información
lo que se está haciendo
es guardar estos chunks
que al final son como bytes
los va guardando
en este chunks
y cuando termina
pues por fin
lo puede convertir
en un buffer
y este buffer
lo estamos pasando
al size of
y este size of
es el que nos va a dar
cuál es el cálculo
del tamaño
pues lo que vamos a hacer aquí
es el resolve
del size of buffer
voy a poner esto por aquí
bueno
podríamos poner aquí
image size
size of buffer
así puedo reutilizar esto
image size
image size
esto lo deberíamos hacer
con cada imagen
hacemos el resolve
estamos devolviendo
la promesa
y la promesa
envuelve
todo este código
para que
pueda escuchar esto
así es
quedará pending
hasta que se resuelva
y esto es lo que
necesitaríamos
hostia aquí
porque me dice que este
ay
porque esto lo he liado
y este parse
yo creo que no es necesario
ese parse
pero bueno
no sé
ahora me ha hecho
me ha hecho dudar
la verdad
vamos a ponerlo
todo como error function
para que se lea
un poquito mejor
vamos a quitarle cosas
que no sean necesarias
y así entenderemos
un poquito mejor el código
vale
vale
response
image size
ok
pues a eso nos falta
utilizar este image size
bueno que interesante
estas tipo
estas son cosas
que no se suelen ver
mucho
de
de utilizar
voy a hacer esto
bastante menos
vale
voy a hacer que
llegue a
no sé
que sean pocos
no sé
menos incluso
para que solo descargue 3
que si no es un poco rollo
vale
y vamos a recuperar
la imagen
que si no me costaba
aquí en
image
bueno puedo ver aquí
image
vale
image
aquí que no se me olvide
volver a poner la image
y de cada una
vamos a hacer
el get image size
del url
image
y aquí tendríamos
dimensions
pero que no sé
no sé que tiene estos dimensions
voy a hacerlo con uno solo
y veo si funciona
y si no funciona
iteramos
vale
module not found
empezamos bien
no puedo encontrar
no puedo encontrar
el módulo
index.js
como
ay
es que
pero porque me ha sacado
de que ha pasado aquí
o he sido yo
en algún momento
o que que ha pasado
bueno
a ver ahora
invalid protocol
vale
porque esperaba
http
vale
esto no pasa nada
esto es que este
https
tiene que ser
en principio
este debería ser
así
vale
pues con una imagen
ya vemos que tenemos aquí
la altura
y la anchura
pues con esto
ya tendríamos
la altura
y la anchura
o sea que tendríamos aquí
las dimensiones
sería
high
width
la verdad es que podemos
que sea del tipo
png
me da lo mismo
y aquí
vamos a recuperar
justamente lo mismo
¿no?
high
y width
y aquí
vamos a añadirle
el high
y el width
yo creo que
directamente
tampoco pasa nada
vamos a ver ahora
de hecho
voy a hacer una cosa
vamos a añadir
un poco de login
vamos a crear
aquí una función
lock
que esto
se le pasen
unos argumentos
y esto llame
al console.log
que se le pasen
los argumentos
pero
el primer argumento
va a ser justamente
el
dirty scrapper
lo voy a llamar
dirty scrapper
¿vale?
y vamos a ponerle
una cara
dirty
¿sucio?
sucio
sí
sí
sucio
el dirty scrapper
así que ahora
vamos a
vamos a poner un poco
de login
y de esta forma
fetching url
vale
así iremos viendo
la información
fetched
comic
with
num
vale
y
getting
image
dimensions
así vamos a ver
cómo está cada cosa
¿vale?
cut image
dimensions
con el
vale
y esto
al final
growth
placa
plam
bueno
espérate
json file
pon esto así
esto aquí
json file
growth
json file
vale
vale
el dirty scrapper
hostia
mucho undefine
he visto aquí
a ver
¿qué ha pasado?
que la hemos liado
aquí con alguna cosa
ah es que esto aquí falta
una wait
¿vale?
aquí esto hemos dicho
que era una promesa
aquí la wait
mucho undefine
he visto
getting image
dimensions
no sé qué
no sé cuánto
venga otra vez
ahora sí
tenemos aquí las imágenes
y si vamos aquí
a nuestro
2587
vemos que ahora sí
tenemos el width
y el height
¿cuánto hemos tardado?
si no hemos tardado nada
no hemos tardado nada
y con eso ya podríamos
calcular el aspect ratio
de hecho igual
podríamos hacer
podríamos calcular
el aspect ratio
también
podríamos calcular
menos de 10 minutos
pues sí
el aspect ratio
al final es dividir
aspect ratio
how to calculate
creo que es
dividir
¿no?
la
dividir el height
por el width
simplemente
para asegurarme
que no era el width
contra el height
no sé si ponerlo
en el json
bueno
no tiene mucho sentido
¿no?
o sea
si se puede calcular fácil
pues no hace falta
guardarlo y ya está
vale
pues ya con esto
vamos a ver
hacer lo que teníamos antes
pero con los 2500
o sea
vamos a pillar unos
88 resultados
y a ver cuánto tarda
de hecho podemos empezar
a poner
mira podemos poner
otra cosa aquí
para saber cuánto tarda
podemos poner
console
time
time
mira de hecho
joder
al final este dirty scrapper
que iba a ser muy pequeñito
voy a liarla un poquito
¿vale?
venga
log
export const
export const
eh
time
hostia
es que iba a hacer una cosa muy creepy
¿lo hago?
no sé si hacerlo
debería
venga va
hazlo
hazlo
¿lo hago?
venga va
sí
lo hago
¿sí?
sí
hazlo
vale vale
lo hago
venga
es un poco rata
o sea un rata
no es rata
es
console
time
end
string
y vamos a poner aquí
const
app
dirty scrapper
esto lo vamos a poner por aquí
así podemos reutilizar
oh tía
me ha quitado esto
venga hazlo
hazlo
hazlo
app
log prefix
vamos a llamarle
log prefix
esto aquí
vale
console
time
con el log prefix
y el string
esto así
y el time end
lo vamos a poner así
y entonces
este time
vamos a exportar esto
vamos a importar aquí
tanto el log
como el time
from
barra
log
punto js
este ya lo necesitamos aquí
y ahora aquí vamos a llamar
end time
time
de hecho
podemos dejarlo vacío
podemos dejarlo vacío
vamos a hacer que esto por defecto tenga un
stream vacío
porque esto
time
y vamos a poner aquí
end time
y vamos a ver si esto funciona
voy a probar otra vez con uno
para que no se me quede esto aquí pegado
mientras
note in djs
vale
mira ya tenemos ahí cuánto ha tardado
1,416 segundos
o sea que nos va a decir cuánto tarda
no es mejor usar performance now
para esto
para qué
performance now
es un poco
muy para saber al detalle
esto da igual
si tarda segundos
sabes o sea
performance now
es más
para mirar a nivel de milisegundos
realmente la diferencia
pero no necesitamos ser exactos
en este caso
no estamos haciendo una performance
sabes de mirar
realmente cuánto nos tarda
entonces
bueno
da igual
con esto
y podemos ponerle un poquito más de info
con estos dos puntos
pues
no sé qué decirle
da igual
si es que para qué me voy a liar con esto
si ya está
lo importante era ver esto
entonces
vamos a poner el 2500
lo importante es que ya vemos
más información
vale
de hecho
vamos a poner un último log
aquí
con un espacio
para que deje separación
ya tenemos nuestro dirty scrapper a tope
vale
míralo como empieza
vamos da
muévete
muévete
muévete
y ahora me llama la policía
policía
policía
bueno
ya va por la mitad
ves que cada vez le cuesta más
esto es porque seguramente
el servidor
donde estamos ahí
dándole cañita
no le va gustando
las cosas que vamos haciendo
pero bueno
no pasa nada
yo quiero pensar
que no nos van a banear
quiero pensar
que tampoco va a pensar
tampoco es tan bestia
es un jason
sabes
si fuese un servidor
hostia
otra cosa sería
mira hidratación
gracias
pero si lo hago en paralelo
Julio Burgo
yo sé que tardaría menos
pero si lo hago en paralelo
me da más miedo
porque en paralelo
al final
haría los 80
de golpe
y hombre
no es lo mismo
hacer una request
una detrás de otra
que 80 request
de golpe
¿entiendes?
¿no había un paquete
que te ponía música?
sí
pero no me fío
mira 60 segundos
bueno ya está
FBI
open up
open up
¿te imaginas?
bueno lo importante
es que ya tenemos aquí
nuestra altura
nuestra anchura
justamente lo que queríamos
nos vamos aquí
a nuestro proyecto
comics
cp
podemos copiar otra vez esto
y ahora volvemos
a nuestro
nextgs
aquí tenemos
nuestro proyecto
¿y para qué hemos hecho
todo esto?
para esto
comic
with
comic
ahí
vale
ahora se supone que
uuuh
¿qué ha pasado?
no le ha gustado
no le ha gustado eso
can't read properties
of undefined
reading map
vale
vale
¿qué hemos arreglado
con esto?
¿qué hemos
¿qué se supone
que hemos arreglado
con esto?
ahora me lo estoy preguntando
porque
vale
está bien
tenemos aquí
el tema este
pero
no sé
esto
podemos ponerle
class name
sí
vale
vamos a poner
aspect ratio
no
aspect
square
no
no
no le gusta
no le gusta
que hagamos esto
justamente
bueno
es que
este layout
igual
ahí
encima
voy a quitar esto
que me
hostia
hostia
¿qué le ha pasado?
¿qué le ha pasado?
¿a esto en rojo?
¿y ese rojo?
a ver
hostia
super raro
¿no?
estaba todo un rojo
ahí a saco
vale
bueno
ahora tengo la
preparation
pero no sé
muy bien
para qué
nos ha servido
porque
como podéis ver
nos sale todavía
esto
de aquella forma
¿no?
o sea
antes
al menos
lo teníamos todo
que claro
el tema es que
es como para
dejar un espacio
y eso es un rollo
a ver
no para nada
porque lo que podemos
hacer es
esto
envolverlo
con esto
hacemos aquí
el aspect square
este
y
y ya está
y esto
debería dejar
siempre el
el espacio
ese
bueno
si
no veo yo
que
que ha dejado
mucho
siempre el espacio
ese
¿qué estoy pensando?
si lo dejamos
como lo teníamos antes
o seguimos con esto
los rusos
te hackean
tss grid
esto tiene
tss grid
lo que podemos hacer
es
por ejemplo
a ver
a ver
vamos a hacer una cosa
¿vale?
hay dos cosas
podemos
uno
mover
que esté arriba
pero el problema
es que no vamos a tener
como tal
no vamos a tener bien
el orden
¿no?
o sea
una cosa que podríamos hacer
a ver
que es que esto
mal mal no está
solo que
habría que hacerlo
otra forma
podríamos hacer
como un más sonríe
tenemos diferentes opciones
para hacer un más sonríe
¿no?
vamos a dejarlo hasta así
y en lugar de utilizar
el grid
lo que podríamos hacer
sería el columns
y podríamos hacer exactamente
lo mismo que hemos hecho antes
el columns
vale
no
no
a ver qué tal
así se ve mucho mejor
pero
pero no
podría
si el columns
debería funcionar
¿por qué no funciona el columns?
ah y porque he dejado
este grid aquí
vale
lo malo
del columns
como podéis ver
es que se carga esto
o sea
se carga
el título
y hace un salto de línea
o sea que el columns
como tal
no nos gusta
entonces
react más sonríe
porque es que
la única forma
es hacer un más sonríe
o sea instalar algo
que haga un más sonríe
¿sabéis lo que es un más sonríe verdad?
el column gap
al final es lo que acabo de hacer
lo ideal sería un más sonríe
eso es lo que yo creo
que quedaría de lujo
entonces
¿os sabéis alguno?
un más sonríe
para que lo sepáis
es esto
¿os sabéis alguno?
sí pero es que
los nativos
no funcionan bien
mira esto es un más sonríe
los nativos
no funcionan
del todo bien
porque no guardan bien
el orden
de hecho
a ver
vamos a verlo
¿ves?
esto es
1, 2, 3, 4, 5
¿y dónde está el 6?
aquí
¿sabéis?
el orden no es del todo
bueno
es que esto no existe
este grid template
esto no existe
esto es mentira
¿eh?
this will
esto es del futuro
esto no existe
eso no existe
para empezar
esto no existe
vale
siguiente
otra solución
más sonríe
autoflow
esto creo que también es mentira
todo esto no existe
todo esto es mentira
¿ves?
esto es una imagen
que esto no vale
esto es cosas del futuro
que me encantaría
que lo tuviese
pero no existen
¿ves?
your feedback
feedback needed
pero no
vale
pasadme
pasadme más sonrís
mira
un más sonríe es esto
como podéis ver
esto es un más sonríe
son imágenes
que quedan por aquí
y que van quedando
como encajadas
y da igual
siempre tienen como
el mismo ancho
pero su altura es
da igual
y en este caso
bueno
sí que tiene más o menos
la misma altura
pero como que encajan
bastante bien
como un tetris
sí
efectivamente
acabo de llegar
pues un más sonríe es esto
como poder hacer un tetris
de que vayan
alguien había puesto uno
responsable más sonríe
me da mucha rabia
porque
mira este
me dudé
me da rabia
porque
¿cómo se llamaba?
react bricks
había uno
react bricks
no
no es este
ah que rabia
había uno
super chulo
mira
ahí está
mira el de giphy
bien dicho
clicks
el de
cuando haces una
búsqueda
¿no?
¿qué puedo buscar?
dragon ball
¿ves?
esto
mira que bonito
que queda de lujo
sí
dice google
tailwind
tailwind más sonríe
sí
seguro que alguien
lo que pasa es que
estos más sonríes
que son solo con tailwind
normalmente
lo que utilizan
son
lo que hemos hecho
y no es exactamente
¿ves?
el column gap
es que esto no es más sonríe
parece más sonríe
pero no queda exactamente igual
no es exactamente
lo que queremos
¿cómo se llamaba este?
masonry javascript library
había uno
este
el de sandro
este es super antiguo
este
de hecho esto es masonry
aquí lo tenemos
pero después de este
de sandro
este hombre
hizo otro
ponle el título
sobre la imagen
podría ser una
este
packery
que está super chulo
de hecho
este de packery
¿veis esto de aquí?
todo esto es como masonry
todo esto
y la verdad que queda súper
de lujo
las cosas van encajando
y se quedan en su
en su sitio
midumasonry
ponle el título
sobre la imagen
bueno
podría ser
lo podemos hacer
venga va
vamos a ver
cómo queda
no sé por qué
le pasa esto
que se queda rojo
¿qué le pasa?
es muy extraño
se queda rojo
porque veis que
no encaja bien
está
otra safari
está hot
es una maldición
si no
el de sandro
este hizo
podríamos
ah mira
masonry
ojo
ojo
mínima sonria
a ver
a ver
a ver
que este me suena
igual es este
el que decía yo
masonry
js
lo malo de estos
react component
a react
yes component
hostia
react
framer
motion
massive
waterfall
layout
el waterfall
hostia
es que se va poniendo
en rojo esto
pero es como un tema
de los estilos
no sé
es un tema
de
ahora es porque
ha entrado en un cómic
pero bueno
aparece nul
pero eso ha sido
por el tema
de la otra
si la app
más comunista
puedes agregarle
20 pics
al height
a las imágenes
poner un before
con el título
también
cuando cerraste el inspector
se saturó el stream
puntualmente
hostia
algo pasó
entonces
con las herramientas
de desarrollo
a lo mejor
algo pasaría
ahí
vale
o sea
alguien decía
que lo que podía hacer
era la imagen
lo que pasa es que
la imagen
no me queda muy claro
padding top
4
bueno a ver
vamos a hacer una cosa
como esto
tampoco es muy importante
vamos a darle para atrás
ya tenemos el aspect ratio
en el caso de que nos interese
luego para el detalle
sí que va a ser importante
porque ahí sí que no hay tutía
vamos a dejarlo como estaba
que tampoco se veía mal
antes
e incluso me gustaba
un poco más
que teniendo el aspect ratio
por ahora
lo podemos dejar así
y luego volvemos a ello
y así seguimos
con la navegación
esta
que la tenemos que hacer
porque ahora mismo es null
y luego miramos
el tema este
además así podéis ir pensando
a ver si tenéis alguna
ah y esta de bricks
también me suena
este
este es el que
este es
sí sí sí
este es el que vi hace poco
este es
lo probamos
venga va
vamos a probarlo
que es lo peor que puede pasar
que reviente todo
venga vamos a
tirarlo para adelante
venga vamos a ver
venga
cómo se instala esto
documentation en GitHub
va
vamos a cerrar aquí
unas cuantas cosas
que tengo muchas cosas abiertas
bla bla bla
bla bla
bla bla
bla bla
bla
bla
bricks
hostia hace 5 años
la madre que me parió
pero esto es
hace mil años
esto es hace mil años
estamos seguros
que queremos utilizar esto
estamos seguros
me da la sensación
que esto no va a funcionar
hostia
es que encima
es que encima
el problema es
si hubiera un componente
de React
que lo hiciese
muy tiene uno
lo cual me da
bastante rabia
pero claro
no vamos a utilizar
este muy
o sea
no vamos a instalar
todo muy solo
para esto
pero me da rabia
porque
esto es justamente
lo que queremos
¿por qué no lo tiene
XUI?
¿cuántas columnas
quieres poner?
espero que se vayan
dos, una, tres
depende
al final
claro
si es una
no tengo ningún problema
si es una
si es una
la ves tú
grid calls
grid calls
si es una
no queda mal
queda bastante bien
cuando es una
pero cuando son más
ya la cosa cambia
bueno
vamos a ponernos
con el null
no pasa nada
2017
no está mal
usa tablas
putifarra
que grande
con Tailwind y Brappens
no vale
no vale
no es lo mismo
no sale mejor
con Flexbox y Grab
es que no es lo mismo
es que no
no sé si es que
no se entiende
exactamente lo que es
o sea
podría volver a lo de antes
y entonces volvería
o aquí
otra cosa que podemos hacer
para que quede un poco mejor
porque veis que quedan
los títulos mal
lo que podemos hacer
es el
este
deberíamos poner
el align
justify content
no justify
start
no
align top
hostia es que ahora
no sé si sería este
no
items
start
hostia
bueno esto
ahora no
no caigo como
pero se puede subir arriba
se puede subir arriba
para que quede justamente
alineado arriba
porque si os fijáis ahora
queda
queda abajo
justify
stop
no
pero esto puede
se podría hacer que
suba para arriba
align top
bueno a ver si alguien
se le ocurre
me lo dice
con Dreamweaver
ya estuviese resuelto
ya te digo
ya te digo
baseline
siempre baseline
¿cuál es el
este?
baseline
me engañaste
me engañaste
claro
un masonry
sería sin espacios
pero en este caso
hay espacios
que no es lo que queremos
no es lo que queremos
bueno
vamos a darle al otro
que es más interesante
¿vale?
porque aquí tenemos
el gaby función este
que hemos hecho antes
y aquí
vamos a utilizar
todo este del header
aquí vamos a poner
el xk
cd
comics for developers
comics for developers
vale
esto
vamos a copiarnos
esta parte
este div
en realidad
no se ve para nada
pero bueno
no se para que
lo he puesto antes
vamos a poner esto
por aquí
vamos a poner por acá
pam pam
pam pam
vale
esto lo he repetido
importamos el head
para
el tema de SEO
vale
el header
components
vamos a hacer también
esto de importar
voy a crear un archivo
js config
.json
vamos a poner aquí
creo que era
compiler options
base url
y vamos a poner el punto
y de esta forma
ahora cuando importemos
ficheros
podemos hacerlo
así
vamos a ver
que esto funciona
ahora
comic
vale
no lo puedes resolver
porque ha encontrado
un cambio
y puede ser que no lo haya visto
vale
ahora sí
vale
ya empieza a tener mejor pinta
vale
este comic
es que lo he puesto
antes del header
así que esto fuera
vamos a poner aquí el main
eso lo arreglaremos después
ahora necesitamos aquí toda la información del comic
vale
aquí tendremos el name
el image
el alt
el title
de hecho el name no es necesario
el id
el width
el height
todo esto
vale
tenemos aquí el image
también
y aquí sí que tendrá todo el sentido del mundo
que utilicemos el width
el height
y todo esto
aquí sí que lo vamos a tener
vamos a importar el componente de react
para esto
next image
vale
y
aquí vamos a tener el nombre
el title
title
image
alt
vale
vale
vale
vale
vale
hasta aquí bien
pero
ahora el save title
bueno no sé
me voy a fiar del save title
ojo
masonic
masonic tiene buena pinta
high performance
bueno bueno bueno
este tiene buena pinta
me gusta me gusta
vamos a verlo
está petando esto
main masonry
items
pues sí
este tiene buena pinta
column width
sets over sky
this is the fake grid
item component
items
y esto de items
como son estos items
cat names
none
pero
hay una cosa que no entiendo
ah el render
es el fake card
y este
se tiene que pasar esto
vale
bueno
tiene buena pinta
le damos cañita
si tiene gatetes
pinta bien
que bueno
venga va
vamos
vamos con ello
vamos con el masonic
vamos con el masonic
va
masonic
ese es
todo con gatos
siempre mejor
bueno
voy a terminar
el de la idea
vale
que está interesante
porque ahora vamos a ver
el get static
paz y todo esto
y volvemos con este
vale
is missing required
esto se está quejando
porque básicamente
ahora mismo
estas props
de donde vienen
pues no vienen
de ningún lado
vamos a ponerle aquí
comic
que ya gaby
creo que se fue
hace rato
perros
igual que gatos
mejor que gatos
ojo
midu es hora de comida
si pero puede aguantar
puede aguantar
venga
vamonos con comic
y ahora vamos a hacer
el export
async function
get static props
y aquí
es donde vamos a encontrarnos
bueno no se si el context
es necesario
en la home
habíamos utilizado
este get static props
y habíamos leído
el fichero y tal
bueno
esto lo
necesitamos todavía
tenemos que irnos aquí
y necesitamos algo
parecido
pero ya no necesitamos
leer todo el directorio
recuperar los últimos archivos
no
porque ya sabemos
se supone
en el get static props
deberíamos saber
cuál es la idea
y de dónde sacamos la idea
pues entiendo que lo vamos a sacar
de aquí
params
y aquí en params
si hago console log
de params
y vamos a hacer esto
lo voy a
comentar mientras
bueno de hecho esto
lo voy a descomentar
y por aquí
por ahora
vamos a dejarlo así
ahora lo arreglo
aquí en params
si todo va bien
deberíamos ver
que cuando
entre a la página
vale
vale
vale
bien
que está diciendo esto
que está pasando
porque no funciona
como si que ha funcionado
antes
antes habíamos añadido
este esto
y esto ya ha funcionado
perfectamente
como habéis visto
al intentar utilizar
el get static props
me da un error
y me dice
get static path
is required
for dynamic
SSG pages
vale
static
SSG
static generator
site static generator
static site generation
and is missing for comic ID
¿qué pasa?
que esta idea
esta idea de aquí
es dinámica
y por lo tanto
no sabría
cuál
cuál tiene que
que crear
las tiene que crear
todas
en base a qué
¿sabes?
o sea
si tiene que hacer
un número infinito
de páginas estáticas
¿cómo lo haría?
pues no lo puede saber
para eso
es justamente
lo que nos está comentando aquí
que necesitamos añadir
otro método más
que es get static path
y este get static path
que si lo vemos en next
lo que nos va a comentar
lo que tenemos que hacer
es devolver
cuando es que debemos
generar una página estática
¿ves?
¿cuándo deberías utilizar
get static path?
pues eso
cuando tienes una
bueno
en este caso
cuando tienes un get static props
y estás en una página dinámica
así que
vamos a ver
como
que es lo que te queda devolver
ya vemos un poquito esto
el hecho del fallback
ahora luego lo veremos
que debería aparecer por aquí
el fallback
que nos lo explica
aquí
este fallback
luego lo veremos
vámonos para aquí
export
async
function
get static path
get static path
path
o paths
paths
¿vale?
vale
y lo que tiene que devolver
básicamente es esto
veo que tiene dos
será true
blocking
o false
a ver si
salen por aquí
porque me
tengo interés
true
en algún sitio
estaba esto mejor explicado
lo del fallback
fallback
pero aquí
no parece que
que salga
mmm
vaya
pues nada
luego nos enteraremos
luego nos enteraremos
igualmente
vale
aquí en este params
se supone
que le tendríamos
ves que aquí en path
esto es una re
y aquí en params
tendríamos que decirle
indicarle
cada una de las ideas
que tiene que generar
si yo aquí le pongo
id 1
lo que va a hacer
es que para
cuando tú intentas
entrar a la ruta 1
o sea cuando tú vas aquí
localhost 1
entonces
sí que generaría esto
¿no?
así que
bueno
en este caso
es que ni siquiera
he guardado el cambio
sí
sí que lo guardo
ahora sí que lo he hecho
es que esto tiene que ser un string
no puede ser el número
porque claro
aquí
no lo
no es un número
aunque
o sea es un número
pero luego lo parsea
como un string
vale
pongamos que voy a hacer
solo una ruta
para que veamos bien
la diferencia
aquí en comics
que tenemos un montón de comics
voy a decirle que
me utilice la del 2500
por lo tanto
si yo guardo los cambios
e intento ir otra vez
al 1
le doy al enter
vale
pues me ha hecho lo mismo
o sea
¿qué pasa aquí?
¿ha pasado de mí?
¿me los ha hecho todos?
¿qué ha pasado?
¿qué ha pasado?
ah porque
a lo mejor es por lo del fallback
que me está haciendo esto
vale
ahora sí
es que claro
por eso quería enterarme
de lo del fallback
porque no me acuerdo
de lo del fallback
cómo funcionaba
vamos a leerlo aquí
runs in the background
when using fallback true
o sea
get static procs
se ejecuta
en el background
cuando utilizas fallback true
o sea
que lo que está haciendo
es que
esta id
me la está
si le pongo aquí a true
lo que va a pasar es
que la que me va a generar
la id que me va a generar
la página estática
es la 2500
pero
si intento entrar
luego en otra
este
o sea
intento entrar
la id 1
pues igualmente
lo va a ejecutar
y va a utilizar
el fallback
este de true
va a intentar
ejecutarlo todo
y va a funcionar
se supone
correctamente
se supone
porque si intentas
entrar a una id
que no existe
pues igualmente
tendrás un problema
y tendrás que manejar
ese error de otra forma
el fallback a false
lo que le estamos diciendo
de alguna forma
es que no no
o sea
estas son las id
que estamos creando
y si intentas acceder
a una id
que no está aquí
pues lo que va a pasar
es que no la va a encontrar
o sea
vas a tener un 404
que es justamente
lo que pasa ahora
fíjate
y al intentar entrar
en el 1
no me entra
y si vamos al 2500
se supone
que sí que entra
no funciona
porque no hemos terminado
de hacer el get static props
de hecho
vamos a hacerlo
y de esta forma
vemos exactamente
como funciona
así que tenemos aquí
el params
que deberíamos ver
que está aquí
tenemos la información
de la id 2500
así que en el params
pues vamos a recuperar
la id
params
y aquí tendríamos
el 2500
¿qué vamos a hacer ahora?
pues vamos a leer
con el FS
no
con el Flush Sync
no
no me importe
lo que te dé la gana
Visual Studio Code
porque entonces
vamos a tener problemas
a ver
vamos a
vamos a traernos
del de promises
y vamos a traernos
creo que hay un
read
red file
eso
read
anda yo también
red file
vale
read file
vale
perfecto
muy bien
Guija Copilot
por ayudarme
mientras estoy pasando hambre
vale
vamos a leer el archivo
vamos a hacer una wait
porque esto es asíncrono
y aquí deberíamos tener
el contenido de este archivo
del comics
.json
no sé qué
este contenido
lo deberíamos parsear
y aquí tendríamos
el json
bueno
tendríamos el comic
ya aquí
básicamente
y ya deberíamos poder hacer
un console log del comic
y ver si está aquí
la id
¿de dónde sale esta id?
esta id sale
de la url
la estamos capturando
justamente
de la url
y ahora deberíamos ver
que si yo guardo estos cambios
me voy aquí
refresco
todavía petará
pero en la terminal
ya tenemos
toda la información
del comic
porque lo hemos leído
en el json
como lo tenemos en el json
de hecho es que no tiene sentido
ni siquiera que hagamos una petición
o lo que sea
sino que ya
lo tenemos ahí
aunque aquí
podríamos haber hecho
esto yo he hecho el scrapper
porque me ha dado la gana
pero una cosa que podríamos hacer
solo para que lo veamos
solo para que veáis
la potencia que tiene esto
es que si nos vamos al scrapper
lo que podríamos hacer
y ahora te explicaré
por qué no lo hago
¿vale?
pero
¿os acordáis que teníamos esto?
vale
pues lo que podríamos hacer aquí
en lugar de hacer esto
esto sería una forma de hacerlo
¿no?
porque lo tenemos en local
pero lo que podríamos hacer aquí
es tener el content
el await
de un fetch
vale
hacemos esto
y ahora os explicaré
por qué no lo hago así
aunque lo podríamos hacer así
perfectamente
esto
esto sería la response
el JSON
lo tendríamos
con un await
res.json
y luego
lo que tendríamos aquí
en el console.json
sería la petición
que está haciendo esto
o sea
si ahora guardo los cambios
me voy aquí a Safari
vale
¿por qué dice
readfile
can resolve?
¿cómo?
dice que no puede resolver
¿qué?
pero si esto lo ha resuelto antes
vale
no sé por qué
ahora se ha vuelto
tonto con esto
bueno a ver
no pasa nada
porque no estoy utilizando
tampoco
pero bueno
vale
bueno esto es normal
¿vale?
que ahora me sale aquí
esto
esto es porque no estoy
pasando todavía las props
ahora lo arreglaremos
pero fíjate
que si voy a la terminal
y voy a lo último
esto
lo está sacando
justamente
de la
del JSON
de la API
externa
hemos hecho un fetch
y hemos recuperado esto
y para que veas
que sí que es diferente
nosotros hemos puesto
el nombre id
y aquí vemos el de num
porque esto lo está sacando
de este fetch
de este fetch
entonces la pregunta es
bueno midu
¿por qué no lo has hecho así
desde el principio?
¿no?
¿por qué no has hecho directamente
el fetch
contra este sitio?
no lo he hecho así
por diferentes motivos
el primero
es que esto
aunque se va a ejecutar
solo en build time
esto significa
cuando haces el npm run build
se va a ejecutar
este método
y lo que va a hacer
es crear
las páginas estáticas
aunque esto es así
también es verdad
que el tener que tirar
cada vez que haga un build
de los archivos
estos externos
de 2588 páginas
que son
pues como te puedes imaginar
esto significa
que va a hacer
2588 fetch
cuando ya haga el npm run build
¿sabes?
tú ejecutas npm run build
y hace las 2588 peticiones
a esta API externa
entonces tiene más sentido
que la descarguemos
una vez
y entonces
pues cuando hagamos la build
ni siquiera tenga que hacer un fetch
sino que lea el archivo
y ya está
luego
esto
el problema de depender
de una API de terceros
para este caso
es que a la mínima
imagínate que me bloquean
el acceso
pues es que el problema
es que yo podría hacer una build
y me podría petar
todo el rato
en continuous integration
y además
he perdido la posibilidad
de seguir haciendo builds
porque ya estoy bloqueado
entonces no quería
encontrarme esa posición
así por eso
lo que hemos hecho antes
es el scrapper
donde hemos descargado
todos los jasons
bueno todos nos
hemos descargado
un número de jasons
y de esta forma
pues ya los tenemos ahí
y perfecto
¿vale?
entonces
lo he hecho por eso
pero ¿se podría haber hecho
de otra forma?
sí
¿es lo más adecuado?
yo creo que no
no tiene mucho sentido
si no cada dos por tres
estaremos haciendo esas peticiones
y bueno
ya te lo he explicado
vale
y entonces este cómic
que la verdad es que no sé
por qué no lo ha pasado ya
porque este cómic al final
es lo que queremos pasar
como props
así que podríamos hacer aquí
cómic
o podríamos pasar todo
separado del cómic
toda la información
separada del cómic
y de esta información
separada del cómic
que tenemos esto
el gear
save title
transcript
alt
bla bla bla
todo esto
va a estar por aquí
nos va a llegar por aquí
esta idea
no sé por qué
no sé
no sé si tiene sentido
que la pongamos
bueno
por ahora vamos a poner que no
de hecho
una cosa que podría ser interesante
también
es ver si tenemos un siguiente
mira esto es muy interesante
¿vale?
esto es muy interesante
porque
claro
es que podríamos hacer paginación aquí
aquí podemos hacer paginación
de una forma súper sencilla
que va a salir
va a alucinar
mira
podríamos hacer una cosa
aquí tengo el string
¿vale?
de la idea
o sea yo pongo el console.log
y me saldría que estamos intentando
pues mirar
la idea
la 2000
me diría 2500
bueno espérate
vamos a mirar que esto funcione
primero
read file is not defined
vale
lo vamos a poner por aquí
import
read file
ahora sé que funciona
y ya tengo la imagen
no sé
es que está funcionando
perfectamente
esto está
vamos
para la merlo
vamos a poner section
vamos a poner aquí la imagen
vamos a poner
el
el alt
aquí
alt
más que nada
para tener esto
vamos a poner aquí
bueno este title
lo podríamos poner aquí
¿vale?
vamos a poner aquí
para tener un max width
d
lg
margin auto
más o menos
más o menos
luego ya
font
no
text
text bold o font
nunca me acuerdo
¿por qué nunca me acuerdo?
porque no me acuerdo
porque es font
¿por qué hicieron esto
la gente de tailwind?
nunca lo sabremos
bueno ya tenemos esto
¿no?
bueno
vamos a hacer la paginación
y la vamos a hacer
de una forma tan fácil
que vas a alucinar
porque es un troll
que he hecho yo
una pregunta
mi tío es desarrollador
pero le falta un brazo
vos decís que es posible
que pueda entrar
como tester a accenture
también da diabetes
le falta un brazo
sí que podría ser un tester
podría testear
yo que sé
por ejemplo
la velocidad
de su brazo
a la hora de desarrollar
pero como tester
no creo que
a ver
yo creo que un tester
debería programar
pero bueno
también diabetes
podría testear
las líneas impares
que bueno
vale
vale
vamos a hacer la paginación
y vas a ver
cómo la podríamos hacer
cómo la podríamos hacer
¿vale?
lo bueno
es que aquí
tenemos acceso
a mirar
realmente
el sistema de archivos
por lo tanto
tenemos la id
pero como un string
vamos a transformarlo
en un número
¿vale?
vamos a poner id number
vamos a transformarlo
con el unary operator
y lo que podemos hacer
es mirar
justamente
la siguiente id
vamos a ir de
el id number
y también
el previous id
que sería
id number
menos uno
vamos a ver
si tiene anterior
y posterior
y para ello
ahora podríamos
hacer una wait
creo que sería
exist
no exist
no
stat
creo que hay
este
stat
stat
con esto
lo que nos debería decir
stat
es si existe un archivo
o no existe
si nos da la información
del archivo o no
así que
con estas dos cosas
vamos a hacer un promise all
aquí
bueno un promise all
no
un promise all settle
perfecto
mira
qué ejemplo más bueno
de all settle
aquí sí que tiene sentido
el all settle
aquí tiene todo el sentido
del mundo
porque puede petar uno
y el otro no
y eso es lo que justamente
queremos
así que vamos a poner aquí
el const
results
y aquí vamos a poner
next id
qué es lo que estamos haciendo aquí
estamos mirando
si físicamente existen
estos archivos
estamos mirando
si realmente
tenemos la idea anterior
y la siguiente
y en estos resultados
que voy a mirar aquí
en la consola
para ver exactamente
porque no me acuerdo
cómo es el contrato
del objeto
del all settle
sé que
será un array
me debería decir
fulfill
no sé qué
pero con esto
vamos a ver
si existe
ese archivo físicamente
y vamos a poder saber
si podemos navegar a él
así que
vámonos aquí
refresco
todo parece que va bien
y aquí en la consola
fíjate que tenemos
por un lado
status fulfill
y en otro
status rejected
y la razón es porque
no existe el archivo
o sea
perfecto
ahora de esta forma
lo que sé
es que
el
como puede ser
que el previo no exista
eso no puede ser
vamos a ver
el 2015
ah sí que puede ser
sí que puede ser
porque estoy mirando
el 2500
perfecto
perfecto
increíble
maravilloso
qué podemos hacer aquí
vale
en resolves tendríamos
el preview
y el next
¿no?
previous result
y el next result
y
has
previous
podríamos mirarlo
mirando si el status
has previous
vale
si el preview result
el status
es diferente
bueno
vamos a decir que es
fulfilled
y ya está
y tiene un siguiente
si el next result
el status
es
fulfilled
también
de esta forma
ya sabemos que tiene
siguiente y anterior
o no
¿sabes?
esto sea
true o false
esto se lo podemos pasar
ya por aquí
has next
y podemos pasarle
el next id
y el previous id
justamente para esto
vale
ya que lo hemos calculado aquí
pues ya lo tendríamos
y ya tenemos la paginación
o sea aquí ahora
en el main
este
este section
pues
podríamos
bueno no sé
a ver
¿qué me dice esto?
a ver
voy a intentar utilizar
gihackopilot
create pagination
with next id
and previous id
if available
yo que sé
a ver qué
a ver qué hace esto
ojo
ojo
ojo
ayayay
ayayay
bueno
tiene bastante buena pinta
tiene bastante buena pinta
le ha faltado
claro
como no le he puesto aquí
el next id
el pref id
el has next
y el has previous
pues
a lo mejor
le ha faltado
un poco de contexto
voy a probar otra vez
a ver si
ahora que le he puesto
las props
efectivamente
¿ves?
ahora sí que pone
has previous
ahora sí que lo está utilizando
que cabrón
¿qué listo es?
hijo de puta
¿ves?
ahora sí que me lo está poniendo
has next
y entonces pone el link
con el next id y tal
perfecto
muy bien
muy bien
pues mira
hemos hecho la paginación
en un momentito
muchas gracias
gihackopilot
muchas gracias
luego no me pidas
un trozo de pizza
que te conozco
me has formateado
el código horrible
pero bueno
lo has
lo has hecho bastante bien
vamos a importar el link
y ahora se lo explicaré
una cosa
ah
hostia
esto ahora lo ha hecho regular
bueno
ahora lo miramos
vamos a importar link
from next link
¿vale?
y aquí vamos a refrescar
y fíjate que aquí tengo el next
le doy
le voy a dar al next
y me va a petar
me va a petar
pero por otra cosa
¿vale?
me va a petar
porque
entre los
los
¿por qué me va a petar?
por culpa del get static path
porque solo os he dicho
que tenemos este
esto en realidad
deberíamos poner
este, este
o sea
deberíamos ponerlos todos
pero ahora tú dirás
¿y lo tienes que poner a mano?
no, no lo tienes que poner a mano
hombre
no lo tienes que poner a mano
ahora lo hacemos
lo hacemos bien
¿vale?
pero por ahora voy a probar
un momento esto
¿vale?
fíjate que ahora sí que funciona
este tiene previous y next
le doy a previous
me debería llevar
al que hemos visto antes
le doy a next
me debería llevar a este
next
y ya
tenemos la paginación bastante bien
vamos
o sea
la paginación la tenemos
y de hecho ni siquiera
refresca toda la página
ni nada
y ahora el siguiente
este ya sería el 2504
este sí que peta
pues madre mía
hemos hecho la paginación
súper genial
ahora
¿cómo hacemos
que nos aseguremos
que tenemos todo
todo esto bien?
bueno
podemos basarnos
el próximo directo
lo hace el copilot
y todo descansar
y yo a comerme la pizza
ahora cuando llegue la pizza
lo que voy a hacer
es que dejo a copilot
¿vale?
y que programe copilot
vale
lo que podemos hacer aquí
es una cosa parecida
a lo que hemos hecho
en el index
porque si os acordáis
aquí hemos hecho
const files
no sé qué
no sé cuánto
vale
pues lo que vamos a hacer
es esto
es leer los ficheros
aquí podemos leer los ficheros
leer con el file system
leer el directorio comics
aquí tenemos pues los 2800 comics
que haga falta
tenemos diferentes estrategias
pero en este caso
como va del 2500 al 2088
tiene más sentido asegurarnos
que estamos utilizando
las ideas que existen
pero si sabemos que las ideas
van del 0 al 2500
pues igual podemos iterar esto
y crear todos los objetos
del 0 al 2500
y ya está
aquí se ve justamente
un poco la limitación
que tendría
el getStaticPath
porque alguien
puede estar pensando
ostras
pero ¿qué pasa
si tengo un millón de ideas?
bueno
es que si tienes un millón de ideas
no vale la pena que hagas esto
seguramente
porque no tiene sentido
que hagas
que a la hora de hacer la build
hagas un millón de páginas estáticas
son demasiadas páginas estáticas
no tiene sentido
¿vale?
así que por ahí irían los tiros
vamos a
vale
tenemos los files
esto es el reddir
que si no me quedo
construir un array
que nos devuelve los ficheros
así que lo que tenemos que hacer
es un files.map
y para cada file
vamos a hacer un file
.
.
.
split
con el punto
no sé si esto
creo que podemos utilizar
el base name
en node
existe una
utilidad
que se llama
base name
que si no me equivoco
ah no
esto es para
la última porción del path
no es para la extensión
ah sí
sí sí sí
el base name
se le puede pasar
es que me sonaba
¿ves?
se le puede pasar
justamente la extensión
perfecto
perfecto
vamos a utilizar
esta librería
vamos a utilizar
base name
de path
¿vale?
y lo que vamos a hacer es
le vamos a pasar
base name
le pasamos el file
y le decimos que la extensión
es .json
¿ves?
una extensión
para eliminarla
del resultado
la extensión
la voy a que poner
con el punto
¿vale?
con el punto
y como son todas .json
pues con esto
ya tendremos
el file name
el nombre del archivo
con cada nombre
del archivo
lo que deberíamos hacer
es devolver
el params
id
y bueno
voy a poner que esto
es la id
directamente
y así lo simplificamos
y ya está
o bueno
si lo preferís
para no crear una constante
aunque yo no soy muy fan
de estas cosas
pues lo hacéis así
y esto debería estar así
y entonces ya lo podéis
dejar así
en una sola línea
que tampoco soy muy fan
pero bueno
quedáis como dios
y ya está
entonces así
ya está
bueno no sé dónde ves
pues estas cosas no me gustan
creo que
me he dejado algún
este
¿dónde cierra este?
este
ahora
pues lo podéis dejar así
pero como no me gusta
lo voy a dejar como está
antes
a ver
a mí
no tengo ninguna necesidad
de hacerlo en una sola línea
y lo que me gusta
es que alguien lo entienda
cuando venga
y diga
ah pues aquí
haz un map
y no sé qué
aguanto
bueno
esto
lo vamos a llamar
paths
y de esta forma
ahora sí
vamos a simplificar esto
pam
lo ponemos así
y en path
vamos a tener
esto que estamos haciendo aquí
un array
que tiene
todos estos objetos
de paramsid
paramsid
y creo que esto
debería ser
o sea
con esto deberíamos tenerlo
no sé
qué opináis
tantas páginas
no afectan a la carga del servidor
a ver
2.800 páginas
2.500
empiezan a ser bastantes
la verdad es que sí
la verdad es que sí
2.500
pero lo podemos ver ahora
podemos ver justamente
si realmente es bastante bestia
¿sabes?
o sea
lo podemos ver ahora
y nos vamos a dar cuenta
por eso decía
que es importante
hacerlo el readfile
esta operación es súper rápida
del palo
es que no llega al milisegundo
así que por eso
creo que puede ser interesante
ahora lo vamos a descubrir
¿vale?
vamos a ver si realmente
es demasiado
si es poco
lo miraremos en la build ahora
vale
voy a refrescar
fs is not defined
vale
porque he hecho el readdir
este
y esto fuera
leemos el directorio
vale
next
next
no sé por qué se ven mal
como que no ha hecho bien
las dimensiones
no sé si es que no ha hecho bien
las dimensiones
porque veis que no hace bien
¿ves?
ahora sí que se ve bien
no sé
en el image
hemos hecho algo
porque veo que
image
es que este componente
image está muy bien
para optimizaciones
y tal
pero luego
hace algunas cosillas
que dice
hostia
¿por qué hace esto?
bueno a ver
que podríamos poner
que esto en realidad
vamos a arreglar un poco
los estilos
center
layout
fill
vale
hostia
pero si tiene la
esto normalmente
qué raro
porque esto normalmente
class name
a ver
vamos a poner responsive
vale
responsive era
vale
next
pero veis que da ese salto
así súper raro
y como que
que luego se ve bien
pero
queda un poco raro
la verdad
vale
vale
pero bueno
ya podemos ver
que sí que funcionan todas
de hecho
si me voy aquí
a la 2580
de golpe
pues funciona bien
y de hecho
la carga bastante más rápido
nos faltaría un poco
arreglar los estilillos
eso sí
pero bueno
estaría así
rendimiento es mediocre
¿no?
tarda bastante en rendirizar
las imágenes
bueno
hay que tener en cuenta
que el tema de las imágenes
como en realidad
está aquí
en el tema este
está con el componente
de image
de React
de React
de NextGS
y está en modo desarrollo
igual
puede ser que tenga que ver
pero es verdad
que claro
tiene una cierta latencia
cuando vaya a descargar
el siguiente
¿qué se podría hacer aquí?
la idea
sería poder
añadirle algún tipo
de blur
eso sería la clave
poder hacerle algún tipo
de blur
de hecho el blur
lo podríamos hacer
también
node blur
from image
esto también se podría hacer
from blur
image
buffer
esto lo podríamos hacer
en un momento
que podría ser interesante
lo malo es
que como
estas cosas
normalmente necesitas
ves
gem blur
se podría hacer
un blur
super bestia
escribir la imagen
hostia
todo esto que es
esto lo comentamos
el otro día
sería viable
pero sería interesante
a lo mejor manejar
de forma estática
ciertas páginas
por ejemplo
las que salen
en la portada
podríamos estar
no voy a poner
el New York Times
porque creo que
es de suscripción
pero bueno
como está la cosa
por ejemplo
puedes hacer que
ciertas noticias
las que salgan
en portada
pues
sí que se generen
de forma estática
y las demás
que sean server site
eso puede ser
super interesante
eso podría ser
que son todo procesos
son todo procesos
herramientas
y cosas así
y es difícil
claro
bueno es difícil
no es difícil
porque al final
mucha gente lo consigue
lo utiliza como para
un micromanage
para cómo podemos
hacer que la gente
vaya más rápido
queremos que la gente
vamos
cómo podemos hacer
que la gente
vaya más rápido
esa es la típica frase
de un montón de gente
de
sobre todo de negocio
cómo puedes hacer
que las cosas
que vayan más rápido
y se equivocan
porque normalmente
lo que ponen
es el foco
en controlar
a la gente
lo cual no está
no es
donde tienes que poner el foco
si contratas a gente
y especialmente
a gente que se supone
que tiene experiencia
y que son buenas
lo que tienes que hacer
no es controlarles
es desbloquearles
siempre que puedas
y cada equipo
es un mundo
entonces hay veces
que tiene más sentido
que hagan Kanban
o Extreme Programming
o que hagan otro tipo
de cosas
o que a lo mejor
hacen un framework
ellos mismos
así que
este tipo de cosas
pasan
¿sabes?
a veces
nos volvemos un poco
locos
porque
bueno
space
a between
porque es eso
estamos buscando
siempre el framework
que pueda utilizar
encima toda la empresa
ese me parece
otro error
de libro
típico error
de libro
toda la empresa
tiene que trabajar
con este framework
Agile
porque es así
como trabajamos
entonces están matando
la creatividad
la originalidad
de los equipos
que la gente
se adapte al cambio
porque justamente
es otro
del manifesto Agile
y adaptarse al cambio
no solo trata de
ah es que ha llegado
una nueva tarea
pues vamos a añadirla
es que eso no es adaptarse
al cambio
una mierda
eso no es adaptarse
al cambio
como te puedes adaptar
al cambio
si tienes un framework
establecido
de como hacer las cosas
es que
es que es complicado
complicado
es complicado
pero bueno
es un mal de
es un mal del
del mundo del software
yo creo
de que hay mucha
mucha gente
que da
bastante grimita
y he visto
muchos y muchos
profesionales
que por desgracia
esto les ha salido
que han acabado
chungo
han acabado mal
por estas cosas
y no me extraña
no me extraña
porque hay
ah vale
es esta
no
ah no
esa es como
la gordita
y la otra es
la
donde está
la de la
no hay una gordita
de esta
sabes
solo está esta
me siento engañado
ahora mismo
me siento muy engañado
porque esta
si que había
una gordita
la otra
no
por qué
no tenían
dinero
bueno pues nada
vamos a tener que dejar esa
vamos a dejar esa
si no ponemos un emoji
ah pero aquí si que se ven igual
pero esto que es
pero esto que es
bueno pues esta bien
como hace para abrir
el buscar
el buscador de emojis
tengo dos
tengo el rocket
que es una aplicación
que pongo dos puntos
y pongo lo que quiera
y pone este
y luego tengo el de sistema
apretivo
que es control
command
espacio
ya está
eso sería
eso sería
vale
pues nada
ya tenemos esto
y ya hemos generado
todos los archivos
bueno
esto es bastante
chulo
el tema es esto
que no tenemos un fallback
y esto significa
es que si intentamos ir a la página 100
pues me va a decir un 404
y ya estaría
vale
aparte de esto
bueno teníamos el home
para volver a la home
aquí podríamos hacer
ah
aquí vamos a hacer
ahora que ya hemos hecho todo la idea
lo de la idea se ha quedado claro
o sea ya lo tenemos aquí
podríamos mejorar un poco
porque
queda demasiado grande
se rompe un poco el
vamos a poner esto aquí
con un class name
del max width
de
sm
por decir algo
m auto
vamos a poner esto
dip
no sé si ponerlo
menos
este
la r
que me habíais dicho
que se me había olvidado
vale
vamos a ponerle
un poquito más
de text
site
no
text
xl
vale
y la imagen
esta
vamos a poner
mb4
vale
y vamos a hacer
que la imagen
se vea todavía
un pelín
más pequeña
vale
aquí creo que queda mejor
vale
vale
aquí
ah vale
vale pues ya lo tenemos esto
perfecto
que hay
con las consultoras
que dicen que no es
un muy buen ambiente
chelos14
hoy lo he visto
en discos
mucha gente se está quejando
de las consultoras
porque no escucho nada
buenas consultoras
a ver la realidad
es que las consultoras
tienen mucha
mucho mucho
muchos trabajadores
no
oye que bonito
que este next
aquí desaparece
vale
o sea que
que funciona correctamente
y le envía las props
correctas
a ver
hay consultoras de todo
no todo blanco y negro
en esta vida
y menos en la
en el mundo del desarrollo
hay consultoras muy buenas
muy buenas
si ya carga un poco
más rápido las imágenes
a mí también me da la sensación
hay consultoras muy buenas
es que tienes singular
singular es una consultora
chulísima
chulísima
muy buena
muy
muy
muy buena
y que
está genial
y yo conozco mucha gente
que está aquí contenta
contentísima
y hay otras
pues tienes plain concepts
plain concepts
otra
que
es súper chula
que ni siquiera
como tal
le llaman
consultoras
pero es que son consultoras
de lo que entendemos
de consultoras
lo que pasa
que como no están
en el
como
como se llama
esta
accenture
y estas
y luego
accenture
y muchas de estas
muchas veces
tiene que ver
más con el tema
si
patrocinó
en la pngs
pero claro
patrocinó
pero ya lo conocía
ya lo conocía
el
a plain concepts
la conozco
hace mucho tiempo
y tengo gente
que conozco
y trabaja ahí
y sé que es una empresa
que está muy chula
pero bueno
a ver
que es que
podéis pensar
que es porque me
sponsoriza
pero no lo diría
por eso
o sea es que
no lo hubiera mencionado
ya está
pero es porque
creo que de verdad
hay consultoras muy chulas
hay consultoras muy pequeñas
estaba Karumi
Karumi era una consultora
muy pequeña
pero muy chula
también
y ahora
la han cerrado
porque
mira
consulting
y esta empresa
eran pocos
pero era muy buena
muy chula
ojalá
trabajar en un sitio aquí
que está lleno de cracks
y que
además hacen un trabajo
de calidad
tan bueno
entonces
las consultoras
que sea consultora
no es malo per se
o sea
eso no es
algo que digas
no es consultora
es malo
y de hecho
me sabe mal
porque hay gente
que tiene esta mentalidad
y os lo dije el otro día
que hay gente
que está perdiendo
oportunidades de trabajar
en algún sitio
solo porque son consultoras
lo cual
que hay algunas
que dan más miedo
pues bueno
hay cosas como Globant
que hay gente
que se queja muchísimo
luego de Everis
había mucha gente
quejándose
yo cada vez
más
escucho como que
hay cosas mejor
o peor
depende del cliente
pero desde que entraron
los japoneses
pues
parece que ha mejorado
un poco
no sé
o sea
no hay que pensar
que es malo per se
y luego
luego es una lotería
porque puedes ir a
algún
a una consultora
te toca un cliente
que es genial
y vas a estar súper bien
pero luego
hostia
porque dice que esto
no cierra
link
luego depende de eso
depende de eso
y luego que
hay que pensar
que no tienes por qué
estar toda tu vida
en una consultora
o sea
si entras en una consultora
no significa que vas a estar ahí
por los siglos
de los siglos
y ya está
¿sabes?
porque
puedes entrar
y a lo mejor
estás un año
o menos
yo que sé
pero
ah
es que esto
lo he puesto aquí
y esto debería ser aquí
lo digo porque
yo por ejemplo
entré
cuando empecé a trabajar
empecé a trabajar
en una consultora
Midu
¿se cayó lo de Bersel?
¿qué se cayó con lo de Bersel?
¿qué se cayó?
J
es salt
al final
trabajas en el cliente
sí
lo malo de las consultoras
sobre todo las grandes
que suele ser
una
suele ser
si es muy grande
suele ser un número
y eso es una mierda
pero bueno
si tengo una oferta
de una consultora
¿qué debería tomar
como un reflack?
que vayas a trabajar
con algo
que te dé
asquísimo
por ejemplo
o que
te vayan a pagar
muy poco
porque las consultoras
normalmente
intentan pagarte
lo mínimo posible
pues eso serían
posibles
reflacks
eso serían posibles
reflacks
pero
bueno
es que
como digo
depende
¿qué decías de Bersel?
que me preguntabais por ahí
¿puedes hablar más de Globant?
no puedo hablarte más de Globant
porque yo es que realmente
o sea
yo no he trabajado en Globant
y Globant
aunque es una multinacional
creo que donde más
no sé si tiene mucho peso
creo que donde más peso
tiene es en Argentina
si no me equivoco
que no tengo ni pollo
de la idea
pero creo que
no sé si es
de Argentina
o de
creo que es de Sudamérica
seguro
no me sanaría
que tuviese oficinas
en España
pero no
no me suena
entonces
no tengo ni idea
pero
te digo lo que he leído
en Discord
cada 2x3
hay gente quejándose
así que
ya que ofrecen
pasantías en Miuni
bueno
yo lo que te diría es
mejor Globant
que nada
porque al final
mira yo trabajo en Globant
lo que os diría es que
más vale
Globant que nada
me refiero a la oportunidad
de trabajar en Vercel
bueno mira
como somos 400
que se han ido
la gente que se aburrió
voy a contar la historia
a ver
no se ha caído la oportunidad
de trabajar en Vercel
y me imagino que sí por ahí
pero
bueno
Gonci
el chaval
se lo curró
se lo trabajó muy bien
y me
movió manitas
para ver si había una oportunidad
y ahora pues parece ser
que no encaja
no encaja por diferentes cosas
la verdad
o sea se ve que no encaja
por
¿te vas a Vercel?
no, no me voy a Vercel
no me voy a Vercel
no me voy a Vercel
si me dice ven
yo voy
pero no
no ha estado
no ha pasado
el tema de Vercel
es eso
que no
no se ha concretado
que ahora mismo
no necesitan gente
de mi perfil
y además
pues
bueno
digamos que
la comunidad que tengo
no ayuda
por raro que pareja
el hecho de
de ser quien soy
no ayuda
no es una cosa que sume
para que luego la gente
piense
ah
Dios mío
es que suma
es que claro
a ti
los trabajos
y tal
pues no
parece ser que es todo lo contrario
en este caso
no me
no me ayuda
me pasa todo lo contrario
así que nada
voy a tener que
echaros a unos cuantos
nada
es broma
no voy a echar a nadie
pero bueno
es eso
que no
no encaja
no encaja con
con el puesto
porque se busca otro perfil
y ya está
o sea directamente
o sea
no he hecho ningún tipo de entrevista
ni nada
pero bueno
que le agradezco un montón a Gonci
y que está pendiente Gonci
por si sale un perfil
en el que sí que encajo
mejor
y ya está
pero ahora mismo
pues no
Dios es lo que hay
así que nada
buscaremos otra cosa
Midu estoy harto del stack
con el que trabajo
Java
no me extraña Adrián
chupisi
estás para tomarte un chupisi
un chupito
oye
porque no te animas
a aprender Kotlin
desde Java a Kotlin
yo creo que hay un paso
bastante natural
y Kotlin
cada vez más
estoy viendo un movimiento
muy bestia
en mi propia empresa
lo veo
y cada vez lo veo más
ahora estoy viendo una cosa
una tendencia bastante interesante
aparte de la creación
de microservicios
y tal
que es bastante
o sea
hay bastante trabajo de eso
lo que estoy viendo
es que
hay
como
para desarrolladores móviles
es obvio
que está Android
pero como que
se está haciendo una cosa
muy interesante
que es el tema
de crear lógica de negocio
que se pueda compartir
con iOS
y con Android
y entonces
la lógica de negocio
la haces
en Kotlin
y luego la reutilizas
con las dos
no sé
me estoy viendo ese
y a mí me está llamando
la atención
Kotlin
de hecho igual
hacemos un viernes
un aprendiendo
desde cero Kotlin
porque
quiero aprender
a hacer microservicios
con Kotlin
dicen que
Globant
es argentina
y es buena para empezar
pero no es tan buena
para algo intermedio
dice
Diplexus
que le damos la bienvenida
que es la primera vez que pasa
y además
aportando
muchas gracias
Walmart está hecho con Next
pero no parece que funcione tan bien
bueno a ver
que esté hecho con Next
no hace que las cosas funcionen bien
automáticamente
te vas a Vercell
no, no voy a Vercell
no voy a Vercell
no ha cuajado
tengo una historia con Vercell
la verdad que complicada
pero no, no
ojalá, ojalá
Vercell es una empresa increíble
y bueno
ojalá que
ojalá que algún día
como Senior DevRel
a ver
como veis
a ver Vercell
yo creo que les iría súper bien
un DevRel
de la comunidad
o sea
en castellano
y no solo yo
a lo mejor Gonzi
encajaría perfectamente
en ese perfil
pero me parece que
ahora mismo
no están interesados
en ese tipo de perfil
no sé
porque a lo mejor
no les interesa
no da tanto dinero
el mercado hispánico
o con el inglés
al final ya les da
no sé
pero no existe
esa posición no existe
básicamente
no existe una posición
DevRel
en español
me encantaría
pero no
vale
entonces ya tenemos el home
tenemos el about
bueno el about
no lo he hecho
pero tampoco sería muy importante
¿no?
hacerlo
una cosa que podría hacer
que os decía
quería hacer un search
y la verdad es que
me gustaría hacer el search
about to perform
no sé qué
a ver el about
como tal
ah vamos a poner primero
antes de que se me olvide
de dónde sale esto
xcd
vamos a poner
en el index
bueno vamos a poner
components
vamos a crear un footer
.js
react footer
vamos a poner esto
por aquí
vamos a hacerlo así
footer
footer
y vamos a poner
class name
del text center
bueno no sé cómo poner esto
this work is
dimension free
more details
y cómo tengo que decirle
no necesitas permiso
pa pa pa
vale
vamos a poner aquí
href
vamos a poner que esto lleve
con el target blank
no opener
no referer
vamos a poner aquí
all comics
ah mira
no me jodas
esto se lo ha inventado
yo creo que esto se lo ha inventado
pero dónde a coño ha salido esto
por un momento digo
o sea
es que no me puedo creer
que se haya
que es que es fuerte
es que
a veces claro
parece tan mágico
que dices
me lo voy a creer
va
seguro que es capaz
y no no tampoco
tampoco llega tanto
vale
footer
vamos aquí a la página
del index
vamos a poner aquí
el main
joder
footer
footer
vale
ahora sí
que no me está saliendo
vamos a hacerlo así
esto por aquí
esto por aquí
y ya está
de hecho esto vamos a indicar
que es node
así
y ya está
entonces
tenemos el home
la about
bueno la about
no vale la pena
que lo pongamos
lo voy a quitar
y voy a ver si soy capaz
vamos a quitar la about
que tampoco es muy importante
muy interesante
papapapapa
y así utilizamos
el API
el endpoint de la API
que todavía no lo hemos visto
y que es bastante interesante
voy a intentar a ver
si soy capaz
de enalgolia
de subir cosas
hostia
es que esto
será con github
a ver si
si lo tengo
por favor
que tenga la sesión iniciada
en github
vale
hostia
stop the world
support cocaine
que chulo
vale
creo que se puede crear
otro por aquí
create application
pay as you go
no free
yo free por favor
no tengo dinero
para pagar esto
vale
xkcd
your products
vale
porque sale esto así
me puede explicar
porque sale esto así
vale
next
data center
ok
vamos a
hostia
united kingdom
es el que tengo
más
mejor
bueno pues nada
review
tengo 10.000 búsquedas
bueno
have
read
create application
ahora la pregunta
que me gustaría
que se pudiera hacer
new to algolia
experience user
new to algolia
hostia
10 minutos
hostia
no se si
bueno va
no creo que sean 10 minutos
que me va a hacer
pero si no me ha
ya ha empezado
dice
si eres nuevo en algolia
dale aquí
vale
pues le he dado
vale
creamos el índice
x
bueno
prod
xkcd
bueno comics
pues total
vamos a hacerlo directamente
en pro
a ver que pasa
vale
update records
se supone que
add manually
claro
es que podría hacer esto
hasta 10.000 records
y cuántos comics hemos dicho que había
2.800
tengo para unos cuantos años aquí
upload file
vale
porque aquí
lo que veo es que
lo que podría hacer
es básicamente
a ver un momento
vamos a mirar una cosita
de qué manera podemos ayudarte
para dedicarse a esto
a mí ya sabéis que me ayudáis
compartiendo el contenido
hablando de mí
a la gente
porque cuanto más seamos
más en la comunidad
cuanto más gente seamos
y eso
pues más fácil
será
mover cosas
hacer más cosas
drop here
or click to select file
o sea
solo puedo una
o sea
tengo que
bueno
aquí pone que
podría hacer un array
que cabrones
bueno
esto podría ser interesante
porque podría crear el array
en un momento
podría crear el array
en un momento
en lo que hemos hecho antes
justamente
tú tú tú
habíamos hecho esto
vamos a abrir esto
un momento
Y vamos a hacer en un momento el archivo este con todo para subirlo al Golia y así poder trabajar con eso, ¿vale?
Tendríamos aquí el... ¿Cómo le llamo? IndexFile.
¿Vale? Vamos a hacer IndexFile y aquí, aparte de grabarlo en write.json este,
lo que podríamos hacer en el comic2store, vamos a pushearlo al IndexFile.content.pushComicStore.
Vamos pusheando aquí en este array, el IndexFile y al final vamos aquí a escribir write y aquí escribimos...
Vamos a escribir como para tener todos los resultados ahí para poder hacer la búsqueda.
Write.jsonFile.
Write.json... Vale.
Pues aquí tendríamos .... .comics.index.json y aquí el IndexFile.content y write.growth.index.content.
¿Vale? Aquí tenemos todo el IndexContent y ya está.
Vamos a hacerlo con uno otra vez para asegurarnos que estamos haciéndolo bien.
No veo con... Tengo aquí la botella y no veo.
¿Vale?
Ay, IndexFile.content... Ah, es que le he cambiado el nombre aquí.
Le he cambiado el nombre porque me ha parecido mejor y no lo he cambiado.
Esto es porque alguien al principio ha pagado lo del Inter.
Vale, aquí tenemos el JSON. Perfecto.
Así que ahora que sabemos que esto funciona, vamos a poner aquí 2500.
Voy a hacer esto mientras hacemos otras cositas.
Vamos a ver si esto ha terminado, que me imagino que sí.
Vamos a ver.
Mira.
Hostia, un minuto. Ahora ha tardado más, ¿eh?
Porque el último archivo este del Index.
Vale, pues se supone que con esto, ahora podríamos ir aquí.
Tendríamos la opción O de arrastrar aquí.
De hecho, lo podríamos hacer.
Vamos a probarlo.
Voy a arrastrar aquí.
Ping.
Y ha sudado de mí.
Pero bueno, yo creo que es más bien porque no lo pilla.
A ver ahora.
Ahora sí.
¿Ves? 30k.
Le vamos a dar a Upload.
Vale.
Uploading records.
Nice job.
Your data has been successfully uploaded.
Vale.
All the data.
Vale.
Lo tenemos ahí en índice.
Tampoco son 300k.
Tampoco es mucho.
Cuando estés preparado.
Ta, ta, ta.
Vale.
Y ya tenemos aquí la imagen, title y todo esto.
Bueno, es que con esto podemos hacer unas búsquedas geniales.
O sea, es que esto va a ser la leche.
Por ejemplo, git.
Vale.
Fatal.
Commit.
Fatal.
Ah, claro.
Es que, claro.
Estoy buscando en 80 solo.
Es que no están todos.
No están todos.
Claro.
No están todos.
Ya digo, yo estaba pensando en buscar en todos.
Y digo, ala, madre mía.
Qué increíble.
Pero no.
No es así.
Este resultado está basado en el object ID.
Esto es porque se pueden rankear las búsquedas.
Pero bueno, quiero que se pueda buscar por el title y por, a ver, se manage.
Creo que se puede en la configuración.
Searchable attributes.
Vamos a poner que se puede buscar por el alt y se puede buscar por el title.
Ostras.
Oye, el title.
Ah, digo, ostia, que no está el title.
Que me estoy acordando que se puede buscar en imágenes.
Se puede buscar en imágenes.
En Algolia.
Se puede buscar en imágenes.
Lo cual es bastante chungo.
O sea, chungo.
Que es bastante sorprendente.
Pero...
Solution requirements.
No sé cómo se hace.
¿Sabes?
O sea, es la primera vez.
Pero se pueden buscar en imágenes.
Lo cual es bastante bestia.
Intonalgoria Kerry.
Ostia, me lo tendría que mirar.
Me miraré la documentación.
Pero claro, como he subido...
Bueno, no he subido la imagen como tal.
Pero veis que tiene esta imagen.
No sé si con tener esta URL...
Como veo aquí la imagen...
No me saldría...
Que realmente pudiéramos buscar...
Ostras.
Es que sé que se puede.
Pero bueno, no lo he hecho...
Manage...
Es que no lo he hecho nunca.
Nunca lo...
Porque si pongo la...
No, es que aquí no va a ser.
No va a ser.
Bueno, me lo miraré.
Y lo miraremos mejor.
Pero bueno, con la API esta...
Ya podríamos...
Igual lo hacemos...
Igual este fin de semana lo hago, ¿eh?
Porque me gustaría terminarlo.
Lo que hay que hacer básicamente es...
En este proyecto no.
En el otro.
En la app.
Vamos a tener aquí el API.
Y en lugar de Hello vamos a tener aquí el Search.
Vamos a hacer que este Search busque en la API de Algolia.
Haremos la petición en Algolia.
Buscar aquí.
Lo devolverá.
Y ya está.
Y tendremos una búsqueda.
Y...
Perfecto.
Y además haremos la página de búsqueda.
Podríamos hacer la página de Search.
Porque aquí tendríamos...
Por ejemplo, Search.
Y aquí tendríamos el Index.js.
Y en el Index.js pues tendríamos aquí el componente de React.
Y aquí tendríamos un Export Async Function Get Server Site Props.
Tenemos aquí el Context.
Y tendríamos que sacar la Query.
Que creo que la Request Query...
Ah, del Context se puede sacar la Query.
No sé.
¿Me ha escuchado?
¿Vale?
¿Vale?
Ok, sí.
Tú sigue.
Hazlo.
Hazlo por mí.
Pero bueno.
Que se podría hacer algo así.
Y aquí lo que tenemos que hacer.
Llamar a la API de Algolia para buscar los resultados.
Estoy pensando que lo hago ahora.
Este es un momento.
Es que a lo mejor lo hacemos ahora y ya está.
Bueno, la gente se ha ido.
Ha dicho...
Hostia, pues me voy.
Suerte, Midu.
Ya me tengo que ir.
Fueron cuatro horas por ahora.
Bueno, venga.
Pues nos vamos.
Midu, hazlo.
Nada, va.
Lo hago este fin de...
Sí, que me parece interesante.
Y es un momento, ¿verdad?
Y lo hacemos ahí.
Y nos lo pasamos bien ahí.
Haciendo este fin de...
Porque total...
Pues...
Pues nada, amigos.
Teníamos un proyecto que me tengo que acordar un poco.
Qué es lo que íbamos a hacer.
Cómo estaba y todo esto.
Y le daremos un pequeño repaso.
¡Ay!
Que me ha vio esto.
Vamos a ponerlo en Chrome.
A ver si se porta bien, más o menos.
¿Vale?
Teníamos este proyecto que os voy a explicar un poco de qué trata, cómo funciona,
por qué estábamos haciendo esto.
Básicamente, no sé si lo conocéis, pero XKCD es básicamente una colección de mini cómics
que son de programación, que es súper divertido.
Pero a mí la página web no me gusta.
¿Vale?
No me gusta la página web.
De hecho, lo paso bastante mal con la página web.
Me da bastante rabia.
Y entonces dijimos de hacer una página web con Next.js.
Incluso le empezamos a poner el buscador, que creo que es con lo que nos tenemos que poner.
Entonces podíamos ver los últimos cómics.
Y aquí tenemos los últimos cómics.
Le podemos dar clic.
Y esto nos llevaba al cómic, además con la explicación.
Y podíamos ir al siguiente, al Next.
Y todo esto.
Que esto además luego lo podríamos mejorar todavía más, ponerle recomendados, relacionados y cosas así.
Y vamos a hacer un masonry del buscador de Algolia.
¿Cierto?
Sí, está hecho con Tailwind, si no me equivoco.
Y vamos a utilizar Next.js, pero nos dio algún problemilla.
Y entonces hicimos un mix con Tailwind.
La verdad es que funciona bastante bien, bastante rápido.
Vamos a revisar un momento el código.
Voy a poner esto a la derecha.
Y vamos a ver un momento el código.
Vale, lo que queríamos hacer es con la API.
Nos vamos a meter con la API.
Y os iba a contar qué es lo de la API.
No, el Bota Diet.
No, el Bota Diet.
Volveremos con Bota, pero es que no tengo tiempo.
Está en México, amigos.
Está en México, pero volveremos.
Me da toque tanto minimalismo.
Bueno, a ver, es que piensa que cuando una persona no sabe diseñar, que es mi caso,
pues empieza con cosas sencillas.
Luego poco a poco ya lo iteraremos y ya está.
Y tampoco es que si me pongo aquí a diseñar, pues es un poco más complicado.
Vale, entonces tenemos aquí diferentes cositas.
Vamos a ver un momento rápidamente para revisar dónde habíamos dejado.
Tenemos aquí la carpeta API, que es con la que vamos a trabajar ahora.
Luego tenemos aquí la página cómic.
Y con esto de id, que esto es justamente la ruta cuando entramos a un cómic.
¿Ves?
Como esto sea la id, pues en Next.js tú le puedes indicar aquí entre corchetes id para capturar cuál es la id.
Para capturarlo tenemos aquí, a ver, params.
¿Ves?
Podemos capturarlo así.
Params.
Y extraemos la id de params.
Y aquí todo esto lo estamos haciendo en un getStaticProps.
¿Vale?
Estamos haciendo páginas estáticas.
Esto lo que significa es que cuando hagamos la build nos va a echar todo archivos estáticos.
Así que no tendremos que esperar al servidor, no haremos una petición al servidor, todo irá mucho más rápido.
Eso, hasta aquí bien.
Luego teníamos el search y teníamos un index.js.
Y veo que aquí esto, este search, ¿este search qué?
Este search está vacío.
Vale, perfecto.
Hasta aquí.
Llamar a la API de Algolia para buscar los resultados.
Vale, o sea que entiendo que aquí íbamos a tener query, search, o sea que aquí íbamos a poner esto, ¿no?
Aquí íbamos a tener query y aquí podríamos buscar, por ejemplo, commit, por decir algo.
Y aquí nos deberían salir los resultados.
Como por ahora no tengo aquí, vamos a poner aquí search.
Y para saber, a ver, vamos a poner aquí, por ejemplo, pa, pa, pa, resultados para query.
Vale, quito esto.
Voy a arreglar esto un poquito.
Pa, pa, pa, pa, pa, pa.
Y para pa, va.
Y aquí ponemos la query.
Ah, no, es search, perdón.
He dicho query, pero es search.
Guardo los cambios.
Igualmente no me lo ha encontrado.
Este query, query search.
A ver, query, ¿qué tiene?
Query.
Vamos a ver esto.
Query search return from a in search.
Undefined, cannot be search as JSON.
Please use null or not permit this value.
ojo, de dónde se saca
vamos a ver de dónde se, quiero sacar
quiero recuperar la query para, me está
¿alguien lo sabe? antes de que me ponga a buscar
search en la URL
search en la URL, aquí está
search en la URL, search
context, get server
no hay backend, ahora vamos a poner con el backend
ahora nos pondremos con el backend
Diana dice, search en la URL
search en la URL, pero search está aquí
en la URL
use router, no
no quiero, con el use router
sería dentro, pero lo quiero recuperar en el
en el get server side props
no viene un segundo, si viene un segundo
pero
no sé si, vamos a verlo
es que no sé por qué dejé ahí el context
como lo dejamos a medias, vamos a ver aquí
vale, context
context, context
get server, fetching data
vale
yo creo que
vamos a ver la API
vale, context
tiene params
para la página
query
o sea, del context
se pilla la query
o sea, que esto está bien
hasta aquí está bien, ¿no?
query
hasta aquí está bien
dice context
un objeto representando el query string
o sea, según esto
según esto
a ver, vamos a quitar esto
por ahora
vamos a quitar esto
pero según esto
esta query debería funcionar
vale
aquí no
pero aquí
ah, query query
la madre que los parió
ah, porque yo le he llamado query
perdonad
claro, como le he llamado query
también se llama query
es verdad que es un poco raro
¿cómo le llamamos a esto?
para evitar el
es verdad que es query query
es query query
es context query query
entonces
para evitar esto
¿cómo le podemos llamar?
Q
vale
Q me parece un buen nombre
vamos a llamarle Q
Q
de query
y el Q este
vamos a llamarle query
en la
en el componente
¿vale?
vamos query
query query
a la Q
vale
ahora sí
ahora ya hemos aprendido algo
hostia
insert
hostia
no sé por qué a veces pasa eso
a ver si soy yo otra vez
¿ahora qué he hecho?
¿ahora qué he hecho?
query query query
porque me dice que
porque es undefined
vale, vale
ya está
porque esto es undefined
y no lo puede serializar
o sea que si es undefined
deberíamos hacer algo así
por ejemplo
porque
¿por qué pasa esto?
esto es interesante ¿vale?
porque no es simplemente
que no lo encuentra ¿no?
no es simplemente que no lo encuentra
y os voy a explicar esto
porque
porque es bastante curioso
y poca gente
poca gente entiende esto ¿no?
¿por qué peta?
aparte de porque no lo encuentra ¿no?
pero
o sea no lo encuentra
pero es undefined ¿no?
si yo esto lo pongo
ves que ahora tengo la Q
ahora sí que lo encuentro ¿no?
imaginamos que pongo que
y entonces la Q no la encuentra
pero fíjate que el error me dice
error serializando query
de vuelta por
getServerSidedProps y tal
dice
la razón
y esto es lo interesante
la razón
es que undefined
no puede ser serializado
como JSON
por favor
utiliza null
o omite este valor
¿por qué dice esto?
¿sabes?
porque dices
bueno pero si fuese undefined
pues ya está
déjalo pasar
es undefined
no lo encuentras
pues devuélvemelo undefined
pero
el tema es que
si recordáis
next.js tiene
server-site ¿no?
o sea tiene
getServerSidedProps
lo que está pasando
es que está intentando
hacer esto
JSON
stringify
de Q
¿vale?
está intentando
convertir
este valor
en un string
¿y por qué necesita
convertirlo en un string?
porque
cuando vayamos aquí
con el getServerSidedProps
¿os acordáis?
bueno en una clase anterior
lo dijimos
que como esto tiene
server-site
esto está devolviendo
todo el string
del HTML
y llega un punto
por aquí
que teníamos
el initial props
ya veréis
¿ves todo esto?
que teníamos aquí
initial props
bueno esto es porque
tenemos un error
y por eso sale
pero teníamos esto
props
page props
no sé qué
no sé cuánto
y si os fijáis
todo esto
al final tiene que ser
serializable
¿por qué?
porque tú no puedes
enviar
desde el servidor
al cliente
un objeto
bueno un objeto
que sea
¿cómo digo?
complejo
un objeto complejo
por ejemplo
yo no puedo enviar
una fecha
yo no podría enviar
una fecha
aquí sí que lo podría hacer
porque seguramente
me lo va a transformar
en un string
pero si yo envío
una fecha
mira
para que veáis el ejemplo
¿no?
yo envío un new date
un new date
si lo miramos
en la consola
vamos a ver
que obviamente
esto
new date
claro cuando
pone esto
¿ves?
esto es el string
me lo transforma en string
pero si yo hago esto
un new date
es un objeto complejo
porque puedo hacer un
por ejemplo
getTime
¿no?
puedo ejecutar cosas
puedo ejecutar esto
entonces esto
significa que es un objeto complejo
tiene propiedades
y tiene cosas
por lo tanto
a la hora de serializarlo
lo que va a hacer
es llamar al
d.toString
va a hacer esto
y me lo va a transformar
en esto
cuando hace el
json.stringify
¿vale?
¿ves?
va a llamar al
json.toString
en este caso
no sé por qué
me ha cambiado
justamente
o sea
no sé por qué
me ha cambiado
cómo lo muestra
pero va a llamar
al
toString
en este caso
¿vale?
entonces
el problema
es que un
undefined
no puede llamar
a un toString
no tiene ningún
toString
no sabe
cómo representarlo
entonces
nos dice
oye
no lo puedo
convertir a un valor
para llevarlo
ese sería el tema
justamente
pues bueno
más que nada
para que lo entendáis
por dónde van los tiros
esto es que es muy común
que mucha gente
comete errores
de intentar
por ejemplo aquí
pues devolver una clase
¿no?
imagínate
class
o sea
no aquí
pero imagínate
o una clase
una entidad
un value object
cosas así
que no puedes
y no se pueden serializar
y entonces
también da
estos petes
vale
ahora que ya lo hemos solucionado
y ya hemos entendido
la razón por la que peta
vamos a volver
vamos a poner esto por aquí
bueno
y para asegurarme
vamos a arreglar
vamos a poner que esto es un string vacío
si no lo encuentra
¿vale?
vale
ahora sí
y ya está
entonces tenemos el q
vamos a ponerle aquí el q
y ya tenemos resultados
para tal
vale
¿por qué no me sale?
vamos a ver por qué no me sale
un poco el
me faltaría
por lo que veo
tener un page grapper
o algo
porque veo que aquí todos
tienen
vale
aquí tienen main
y este
también tiene un main
tendríamos
no sé si es que el main este
tiene algo
header
comic
tiene el header
el main
y por qué este main
se ve así
¿sabes?
¿por qué se ve bien el main?
es lo que me estoy preguntando
a ver
¿ves?
porque ahí se ve
se ve que está arriba a la izquierda
¿por qué cuando entro aquí
se ve todo
se ve juntito?
¿qué es lo que tiene esto
por aquí en medio?
ah, no, no
no tiene nada
es que está todo centrado
ya está
es lo que tiene
vale, vale
bien, bien
midu
bien, bien
me gusta
me gusta
venga, vamos a poner el title
que esto también nos servirá
un poquito para
vamos a poner el title
para ir dándole
un poco de asunto
bueno
vamos a hacer una cosa
porque veo que
estamos repitiendo
constantemente
el tema este
de
de la estructura
de la página
¿vale?
así que vamos a poner el title
aquí vamos a poner
search for
o results
for
vamos a poner aquí
query
¿vale?
search results
for
y vamos a poner aquí
la query también
query
vamos a ponerle
un poquito de
de SEO
de search engine
optimization
¿vale?
este no hace falta
no sé por qué
este
este con que lo pongamos
en una vez
en un sitio
ya sería suficiente
en lugar de ponerlo
en todos los sitios
en todas las páginas
esto lo que podemos hacer
¿vale?
lo había puesto también
aquí en el de comic
en el index
también estaba
lo que podemos hacer
en lugar de hacer esto
podemos ponerlo
en la app
¿vale?
la app
como si os acordáis
que lo comentamos
el otro día
la app
es como
el componente
que envuelve
toda la aplicación
entonces aquí podemos
utilizar el head
y en lugar de estar
repitiendo
todo lo que queremos
en todos los sitios
pues ahí lo puedes poner
una vez
y ya está
así que vamos a hacer eso
aquí vamos a poner head
digamos que aquí
podríamos poner
todos los valores
por defecto
que queremos que tenga
la cabecera
el head es el elemento
HTML
donde ponemos el título
descripción
los open graph image
y bueno
todos los elementos
de la cabecera
había una página
que me gustaba mucho
better head
¿cómo era?
ah que lástima
better head HTML
ahí
había una página
¿este?
este, este
esta página
creo que
ah no
esta
pues esta creo que no es
o la han cambiado
pues si
igual si que es esta
vale
pues esta página
no está mal
es una guía
muy simple
muy simple
pero que te dice
el mínimo recomendado
que te deberías tener
en la cabecera
¿vale?
entonces tienes lo típico
el UTF-8
para el chart set
el viewport
y luego tendrías el título
esto será lo mínimo
mínimo mínimo
obviamente
y luego ya pues
empiezas a tener
como los más recomendados
y además te explica
cada uno
qué es lo que es
el base
esto es por si tienes
enlaces que son relativos
y esta es la base
que va a utilizar
como relativo
esto es muy importante
por ejemplo
para Gihab Pages
que muchas veces
hay gente que
que dice
ah es que no me funcionan
los enlaces relativos
pues en Gihab Pages
es que necesitarías
utilizar el base
para que tengan cuenta
en qué subdirectorio estás
porque si no todos
los enlaces
que son relativos
no los va a encontrar
a enlaces
imágenes
cualquier estático
luego lo mismo
que sea style sheet
estilos en línea
scripts
no scripts
luego todos los meta
que aquí tendrías
incluso lo que serían
el theme color
para el color
que sale en Android
en Safari
creo que también ahora
descripción
robots
para que no te traduzca
no translate
bueno que tienes un montón
¿vale?
y aquí te lo explica a todos
es que hay un montón
o sea
podemos estar
este también es importante
para cuando compartís
un artículo
que lo encuentre
y aquí los tenéis
¿vale?
por si alguna vez
no entendéis alguno
pues está bien venir aquí
y entender de dónde sale
y si no sale aquí
seguramente es que
no exista
porque yo he visto
algunas cabeceras por ahí
que la gente se inventa
y todo ¿eh?
es que es bastante divertido
¿vale?
pues ya que tenemos esto
ya tenemos el favicon
que como veis
pues sigue apareciendo
vámonos aquí a la página
lo que quería hacer
era como tener un componente
que fuese
lo que envuelve
la página
¿vale?
vos tenés
dos botones
maximizar
y cuando lo aprietas
se convierte en otro botón
¿cómo se llama?
que tengo dos botones
maximizar
y cuando lo aprietas
se convierte en otro botón
no sé a qué te refieres
el choto
no sé cuál es
si no minimizar
no es lo contrario
claro
puedes usar un layout
efectivamente
Jesús Velasco
vamos a utilizar un layout
que creo que está bien
lo podríamos hacer
a nivel de app
pero por si acaso
lo vamos a hacer aquí fuera
¿vale?
entonces
lo que podemos ver
es que tenemos este header
y el main
que el main este
veo que tampoco le hacemos nada
bueno
pues lo que vamos a hacer
es un export default function
del layout
que le vamos a pasar
un children
esto es una de las más típicas formas
en las que vas a poder reutilizar
código
ostras
con el Gihaco Pilot
lo que acaba de hacer
la madre que lo parió
no está mal
lo que está haciendo
por aquí
también es verdad
que este head
no lo necesitamos
pero
podríamos utilizarlo
por ahora lo voy a quitar
pero no está mal
no está mal
no está mal
vale
vamos a importar el header
vale
y ahora este layout
que parece tan sencillo
porque lo es
lo podemos utilizar
podríamos poner aquí
por ejemplo
layout
y ahora sí
todo esto
o al menos esto
lo que es el contenido
lo podríamos poner aquí
y pues nada
mucho más
hay cosas
ahora
es que digo
hay cosas que no sé
si son del
del Gihaco Pilot
o sea
si el Gihaco Pilot
lo está haciendo bien
hay puesto export default
le vamos a poner function
vale
el export default
no sería nombrado
pero vamos a hacer
lo que sea nombrado
layout
vale
y ya está
con esto
con este layout
también lo tendríamos
que poner aquí
por ejemplo
en lugar de tener header
no sé qué
pues podríamos poner
aquí también layout
vale
y en lugar de tener
el header
el main
y todo esto
todo esto lo quitamos
le extraemos
esta parte de aquí
que es lo importante
¿ves?
el footer
por ejemplo
se me había olvidado
y es importante
que esté en todas las páginas
ay la madre que lo parió
que me lo ha
me lo han intentado mal
y creo que no tengo
el prettier
bueno no pasa nada
vale ¿ves?
este footer
también lo vamos a sacar de aquí
y lo vamos a poner
en layout
así todas las páginas
todas
deberían tener esto
así que importamos
el footer
footer
y aquí tenemos
nuestra página layout
vamos a ver
cómo va quedando esto
vale
ahora ya vemos
que
bueno
me falta la de comic
pero ya vemos
que tanto la home
como el search
esto está mal
pero ahora lo arreglamos
pero ya veis que tiene todas
el header
y el footer
y lo único que tenemos que hacer
ahora en la página de búsqueda
es justamente
pues nada
importar layout
y dentro lo que tiene que ir
y este layout
será el que nos va a dibujar
el header
el footer
y todo esto
mucho más fácil
¿sabes?
o sea si lo que haces
es simplemente
componer
que es lo importante
de arriba
componer
¿por qué no configuras el sling?
debería
debería
luego lo hago
pensaba que lo teníamos
pensaba que lo teníamos
aquí tenemos un sling
pero me parece
que es el de
next.js
vale
luego lo hacemos
venga
tenemos aquí el layout
dejadme que
esto mismo
lo hagan el de comic
porque veis
que lo tenemos aquí
es que esto es súper interesante
porque así
nos evitamos
tener que repetir
todo el rato
el import
de los componentes
asegurarnos
que realmente
están donde tienen que estar
así que
¿ves?
aquí se me había olvidado
el footer
por ejemplo
así que
mejor componer la vista
mucho más fácil
vamos a poner aquí
coño
ay
se me había olvidado
el shortcut
para pillar
el siguiente resultado
ahora sí
cuando estáis en uno
cuando por ejemplo
tenéis este ¿no?
pero también queréis este
este es un truco
bastante interesante
este es un truquillo
es bastante interesante
a ver si os interesa
hay gente que a lo mejor
ya se lo sabe
pero cuando
cuando encontráis
por ejemplo
queréis buscar header
¿vale?
y fíjate que quiero cambiar
este header
y este header
hay dos formas de hacer
¿no?
podríais hacer por ejemplo
podríais
cambiarlos todos
pero hay veces
que no queréis cambiarlos todos
que a lo mejor
solo queréis cambiar dos
o para mí
es mucho más fácil
decir quiero este header
y el siguiente
¿no?
entonces
busco header
dices vale
header
y para seleccionar siguiente
le daríamos a comando D
¿vale?
haces header
comando D
y veis
me ha seleccionado también este
y ahora si escribo aquí
pues tenemos los dos
y lo hace los dos a la vez
bueno
eso por si no lo sabíais
seguro que muchos de ustedes
lo sabían
pero seguro que hay alguien
que en este momento
ha dicho
eureka
eureka
vale
pues con esto ya lo tendríamos
¿por qué no estás usando
arrow functions?
la verdad
mira te voy a decir por qué
y te lo voy a explicar bien
¿por qué no utilizo
arrow functions
en los componentes de React?
te lo voy a explicar
y te lo voy a explicar
te voy a explicar por qué
a ver
por un lado
cuando creas una arrow function
tendrías que hacer esto
¿no?
que no está mal
pero bueno
el problema normalmente
que tienes con esto
es que en realidad
esto es una asignación
a una variable
que se llama layout
que esto
se queda sin nombre
y por lo tanto
un problema
que te puedes encontrar
con esto
es que esto
te lo pueda minificar
especialmente
si lo estás haciendo
de
si lo haces de alguna forma
si haces un export const
esto ya no te lo minifica
y tal
pero
no lo hago
porque me gusta bastante
el hecho de diferenciar
el componente visualmente
utilizando
que es una función
y todo esto
que no
y utilizar las constantes
con arrow functions
dentro del componente
esto es una cosa mía personal
siempre que puedo
cuanto más cerca está de la raíz
especialmente si es la raíz
me gusta más utilizar funciones
porque se ven mucho más fácil
la gente las ve
las entiende
y tal
y dentro de la función
del componente
pues me gusta ya utilizar
las arrow functions
es un tema personal
no hay ninguna mejora
y tampoco creo que sea mejor
una que otra
pero bueno
esa es la razón
por la que lo hago yo
ostras
yo también el control
es de por otro comando
ah
¿cuál es la diferencia
entre composición y herencia?
¿cuál es mejor?
hombre es mejor
la composición
de hecho la herencia
la cría el diablo
August Legend
y la composición
está claro
cuál es la ventaja
la ventaja de la composición
es que nunca vas a romper
la encapsulación
de las cosas
por ejemplo
aquí en este caso
lo que hemos hecho
es componer
este layout
lo tienes aquí
lo estamos utilizando aquí
y estamos componiendo
anteriormente
cuando tú tenías clases
y lo que hacías
por ejemplo
clase de persona
extends
de humano
por decir algo
¿no?
y imagínate que haces esto
clase
humano
extends
de ser vivo
imagínate esto
el problema que tienes aquí
es que
el ser vivo
este
imagínate
esto sería
mira esto sería
herencia
y lo que hemos hecho aquí
con el layout
sería composición
¿vale?
el tema de la herencia
es que
precisamente
cuanta más herencia
más peligrosa
¿vale?
la herencia lo que hace
es heredar
de un objeto
o de una clase
¿no?
entonces esta persona
está extendiendo humano
humano
extiende de ser vivo
¿no?
y aquí vemos la herencia
persona hereda de humano
humano hereda de ser vivo
y al final tienes ser vivo
¿cuál es el problema?
el problema es que tú
en persona
podrías
bueno
iba a poner render
¿vale?
pero iba a poner get age
por decir algo
¿no?
el get age este
funciona de una forma
que puede depender
de justamente
que tiene aquí el ser vivo
si al principio el ser vivo
a lo mejor tenía
pues 10 ¿no?
pero resulta que en otro momento
esto lo cambian
y le dicen muchos años
y lo cambia por un string
lo que estamos haciendo
es que la persona
a través de la herencia
está cambiando su comportamiento
y es muy difícil
de llegar a entender
de dónde viene este cambio ¿no?
obviamente
cuanto mayor sea la herencia
mucho peor este cambio
y de hecho
en la herencia
este es uno de los grandes problemas
sí, esto es
programación orientada a objetos
la programación orientada a objetos
justamente
este puede ser un problema ¿no?
cuanto más heredas
más te alejas
y son más peligrosos los cambios
bueno y de hecho
también tiene mucho que ver con Solid
pero el tema es
que lo que tienes que entender
es que te dificulta
realmente saber
o entender
que cuando haces un cambio
puede implicar
pues cambios
en otros sitios
que no te das cuenta
cuando tú compones
realmente
no estás modificando
no necesitas modificarlo
y vas a tener
un comportamiento
no esperado
va a ser totalmente distinto
porque no utilizas directamente
sino que compones
en este caso
estamos componiendo la vista
¿vale?
es verdad que
obviamente
si en el layout
le quitamos el children
pues puede ser
que no se muestre
o lo que sea
pero primero
es mucho más sencillo
saber de dónde viene
cualquier cambio
porque no estaríamos
haciendo una composición
de una detrás de la otra
¿no?
es mucho más fácil
ver de dónde
nos afecta ese cambio
si yo cambio el layout
por ejemplo
en este caso
pues hemos tocado
en tres sitios diferentes
y ha sido bastante fácil
en un solo sitio
que ha sido el que
compone ¿no?
pero en la herencia
sería mucho más difícil
especialmente
cuando ya tenemos
una escalera
de herencias
que ya no sabes
de dónde vienen las cosas
y esta sería un poco
la diferencia
o la razón
por la que lo hacemos
y ya está
además a la hora
de sobreescribir
también
porque si quieres
en la herencia
puedes sobreescribir
el comportamiento
que heredas
por ejemplo
el getage
o la propiedad
la podrías sobreescribir
y llega un momento
ya no sabes
lo que estás sobreescribiendo
lo que viene realmente
de la clase
de la superclase
y este tipo de cosas
en cambio
con la composición
es mucho más fácil
de determinar
este tipo de cosas
¿vale?
pues eso sería el tema
en el caso de React
al final
ahora mismo
lo único que se hace
es composición
esto de herencia
no está ni que preocupar
porque no se pueden hacer
UIs heredadas
en este sentido
vale
me decía
humanos not defined
vale
gracias
vale
ya tenemos el search
vamos a poner aquí
q commit
vale
vamos a poner este
ves
ahora es mucho más fácil
aquí componer
la UI
porque podemos hacer esto
max
vamos a poner
a ver cuánto pone por aquí
max max max
vale
vamos a poner esto
m auto
vale
de esta forma
m auto
que se me apaga el monitor
el cabrón
vale
cualquier que sepa
orientación de objetos
sabe que componer
es siempre mejor
que lo otro
si normalmente
es mejor que lo otro
martin foble solo usa
para ese caso
a ver claro
hay cosas
hay casos específicos
que a lo mejor la herencia
te puede venir bien
pero cuando heredas
uno detrás de otro
ya sabes
casi con total seguridad
que no
que no buena idea
cuando ya tienes
una que hereda de otra
que hereda de otra
mal asunto
ah vale
es que este es max xl
vamos a utilizar este max xl
vale
para que quede más o menos
vale
resulta para comio
vale
pues vamos con la búsqueda
vamos a hacer el tema de
que clase de bootstrap es eso
esto no es
no es
no es
no es bootstrap
es tailwind
es tailwind
así que
vamos a darle
vamos a darle
a la api
y así sabremos
también como funcionan
las apis y tal
es muy interesante
porque en next.js
aunque es un framework de ria
que tiene un montón de cositas
cositas para la ui
digamos
vale
pero tiene una cosa
también que es súper potente
tiene una carpeta especial
que se llama api
y esta carpeta api
lo que tiene
es que tú puedes crear
endpoints
por ejemplo
en api
vamos a crear un archivo
search.js
y este endpoint
nada más crear este archivo
lo que va a ocurrir
es que
podemos ir aquí
localhost3000
barra api
barra search
lo ejecutamos
y podemos ver
que nos está
ya devolviendo algo
esto que significa
esto es que nos quita la vida
esto nos quita una de trabajo
como hacíamos antes
con express
con nest
nest
con s
no con x
nest
con yo que sé
fastify
este tipo de cosas
vale
entonces tú puedes crear aquí
tantos endpoints
como quieras
y lo que te está creando
son como pequeños
microservicios
que puedes
vamos
puedes hacer de todo aquí
o sea de verdad
esto es bastante brutal
entonces vamos
no sé si tiene mucho sentido
que lo hagamos
pero lo voy a hacer
para que lo veamos
vale
para que veamos
cómo funciona
no sé si tengo
si ya hicimos lo de Algolia
y además mira
veremos un poco
lo que es Algolia
pero no sé si hicimos
lo de Algolia
de poner el índice
y tal
vamos a ver si
si que lo hice
o no lo hice
a mí me suena que sí
yo creo que sí
sí sí sí sí
yo creo que sí
mira
xk cd
perfecto
vale
pues search
sí lo hicimos
gracias
subnova
ahí está
entonces
nice job
your data
has been uploaded
vale
perfecto
perfecto
perfecto
show more attributes
vale
pues ya tenemos esto
ya tendríamos aquí el alt
y el save title
yo creo
si no me equivoco
que Algolia
debería tener una API
una API
rest API
y si no una rest API
también veremos
que podemos instalar
vale
tenemos clientes
de javascript
y si no una rest API
yo creo que es mejor
si utilizamos la
la API
o sea la API
el cliente
esto
instalar cliente
sí
vamos a instalarlo
en el proyecto
y vais a ver lo fácil
que es
es que es brutal
es brutal lo de next.js
a la hora de hacer
microservicios
y que me parece increíble
vale
vamos a instalar Algolia
vamos a ver
cómo vamos a poder
hacer búsqueda
desde el backend
y crear un endpoint
que haga la búsqueda
en Algolia
vale
vale
esto así instalando
en NPM
he utilizado el menos E
para que sea la versión exacta
vale
ta ta ta
language specifics
inicializamos nuestro cliente
vamos a inicializar
nuestro cliente
ya veis que aquí
nos dice un poquito de todo
una cosa que me gusta mucho
de la documentación de Algolia
que ojalá
más gente hiciese
es esto
veis esto
que la documentación
me pone esto
como
como que aquí debería ir
en la API Key
y que no te la muestra
y que te pone aquí
como si le das aquí
te la enseñas
pues es que resulta
que la documentación
está mostrando
tu API Key
de verdad
bueno la voy a enseñar
porque tampoco pasa nada
pero veis
esta API Key
es la mía
esto me encanta
esto es una cosa
que me gusta mucho
el hecho de
ver una documentación
y que
ya ponga tu API Key
para que la copies
y listo
chifla
Carlos Zambrano me pregunta
¿por qué menos E?
si te fijas
he puesto una menos E
con mayúscula
¿vale?
la menos E
si vamos al Package JSON
vamos a ver
que me ha instalado
la versión exacta
¿vale?
fíjate
el Algolia Search
me ha puesto 413-0
¿qué quiere 13-0?
¿qué quiere decir
la versión exacta?
si tú no pones
el NPM Install
si no le pones esto
te lo instala
con el Caret
que es este simbolito
de aquí
¿vale?
esto es una cosa
que he explicado
un montón de veces
un montón de veces
pero te lo explico otra vez
que básicamente
esto lo que hace
es que te permite instalar
si tú tienes esta versión
te instalará la 10-4-2
4-3
4-5
4-6
la 10-5-0
10-5-1
entonces estas cosas
me las creo evitar
el menos E
es el Hack Anticolors
me encanta esa analogía
me ha encantado
Mapbox también hace lo mismo
con Apiki
bueno
que no digo que solo lo haga
el Golia
pero bueno
es una cosa que tampoco
lo hacen todas
pero que me gusta mucho
me encanta
me chifla
de hecho me encantaría
que veas a este
que pone Index Name
que también hiciese esto
con el índice
y que ahí lo pudieras poner
me encantaría
vale
vamos a nuestro Endpoint
que es este
no este no es
es este
y vamos a poner aquí
esto
vale
viendo esto
vale
for the default version
for the search only version
yo creo que con el search only version
tenemos
así que vamos a poner este
vale
import
vale
algolia search
vale
esto no me acuerdo que era
una es la API key
otra la index key
bueno
no sé que
no sé cuál era
creo que esta es la
la API key
y la otra
el client ID
o este es el client ID
y esta es la API key
y le tenemos que decir
el nombre del índice
así que nos vamos aquí
a Algolia
y creo que el nombre de índice
es este
protcomics
protcomics
pues vamos a poner aquí
protcomics
y la verdad es que
poca cosa más
ya para buscar
si no me equivoco
a ver
update request options
vamos a ver este request options
o si no es search
¿no?
search
yo creo que es search
search
for query and index
esto es lo que queremos
va
esto es lo que queremos
vale
index.search
o sea es tan fácil como hacer
index.search
rec.
vaya
pensaba que este rec
me iba a decir
me iba a decir
todos los parámetros
pero ya veo que no
rec.query.q
vamos a poner
o
si
la había llamado q
pues le vamos a seguir llamando
¿vale?
aquí teníamos los results
vamos a
hacer
que devuelva la respuesta
un status 200
esto ha caído todo bien
y un json
que tenga
todas
los results
¿vale?
y en principio
bueno creo que esto es
si no me equivoco
es asíncrono ¿no?
esto tendría que ser asíncrono
claro
así que obviamente
vamos a poner aquí un async
vamos a poner aquí
una wait
y aquí ahora sí tendríamos
los results
a ver si vemos esto
vale
tiene hits
así que en lugar de results
vamos a recuperar hits
lo veis aquí
pone hits
y ahí entre los hits
eso sí que serían los resultados
¿vale?
y con esto
ah mira
podemos decirle
hits per page
y los atributos
que queremos recuperar
esto lo que le vamos a decir
es el número de resultados
que queremos
vamos a poner pocos
tampoco hace falta
que tengamos muchos
vamos a poner 10
y los atributos
que queremos recuperar
porque a lo mejor
no necesitamos todos
por ejemplo
si me vamos al índice
estos sean todos los atributos
el título
la id
la imagen
altura
anchura
bla bla
¿qué es lo que puede ser
que nos interese?
bueno
la id
la id seguro
el title
no entiendo
el title
el save title
¿cuál era la diferencia?
ah no
es que sí
el title está aquí
no sé si es un tema
de símbolos
yo qué sé
la imagen
podría ser interesante
voy a poner la imagen
por si la queremos mostrar
y a lo mejor un alt
bueno
vamos a poner alt
por si acaso
pero yo quiero que lo demás
por ahora no hace falta
vamos a dejar esto
vamos a poner esto así
voy a revisar
que he puesto bien esto
sí
vale
y ya con esto
ahora sí
deberíamos
esto como puedes ver
no hace falta
en hacer un return
pero bueno
lo voy a poner
porque a mí me gusta
poner return
duermo mejor
si veo un return al final
¿vale?
esas llamadas
también te las limita
Vercell
¿a qué te refieres
con limitar?
mmm
el servicio de Algolia
es gratuito
hasta un límite
para casos de uso pequeños
yo creo que va sobrado
no me acuerdo
si son mil llamadas
al día
una cosa así
pero tiene un tope
obviamente
ojalá
o sea imagínate
es un servicio
muy potente
muy potente
entonces mira
son
mil ricos
al mes
ah no
son 10.000
búsquedas
gratis
al mes
y 10.000
recomendaciones
gratis
al mes
y puedes guardar
hasta 10.000
récords
y a partir de ahí
es un dólar y medio
por cada
por cada mil
búsquedas
le han subido el precio
¿eh?
le han subido el precio
ah no, no
vale, vale
es que antes
te iba a decir
antes era un dólar
es un dólar
es un dólar
¿se puede enlazar
con una base SQL
ya existente?
claro
o sea
Maximineto
a ver
no es que se pueda enlazar
pero le puedes enviar
la información
o sea puedes enviar
en formato JSON
puedes enviarse
por API
por ejemplo
puedes hacer que cada vez
que tú añadas
un récord
en el SQL
pues directamente
que lo envíe
Algolia
y eso sí que no tiene
ningún tipo de límite
que yo recuerde
¿ves?
no tienes ningún límite
de API
tú a la API
la puedes llamar
tantas veces como quieras
lo único
es que una vez
que haces una búsqueda
te cuenta
y solo puedes tener
10.000 índices
pero tú ese índice
lo puedes actualizar
tantas veces como quieras
le puedes meter
tanta tralla como quieras
eso no tiene ningún tipo
de límite
que yo recuerde
vaya
pero estoy bastante seguro
al final lo único que hacen
lo hacen bastante fácil
que sea
con el número de búsquedas
Eglo
pues estamos haciendo
un endpoint
con Next.js
para buscar resultados
de hecho vamos a ver ahora
si funciona
nos vamos aquí
voy a buscar los de commit
le voy a dar al enter
y aquí es normal que no me aparezca nada
es que lo que quiero es utilizar esto
quiero utilizar esto
commit
enter
vale
me ha salido
que no he encontrado nada
vale
vamos a ver primero
vamos a ver primero
porque voy a poner aquí
query
del rec
vamos a ver que tiene la query
query
query
q
vale
vamos a ver si esto realmente está
o no está
vale
q
commit
o sea esto
esto sí que lo está encontrando bien
de la
bueno vamos a ponerlo aquí
vale
y aquí tendríamos esto
ay
perdón
esto
conchale
aquí
vale
vale
no sé por qué
no me está encontrando
o sea aquí
no me ha encontrado nada
pueden ser dos cosas
una que he hecho algo mal
que puede ser
porque si yo busco aquí commit
ah es que no encuentra ningún commit
vale
pues ya está
voy a poner shake
que he visto aquí que shake
sí que lo encuentra
o sea que igual
no es que he hecho algo mal
amigo
sí que funciona
sí que funciona
vale
funciona
no es que yo he hecho algo mal
es que no he encontrado
no sé por qué
yo me he puesto a buscar ahí
me he puesto a buscar commit
como
seguro que hay algo con commit
no lo hay
no lo había
por desgracia
vale
pero buscando shake
que no me preguntéis
shake es como razón
¿no?
por la razón
o por el
no sé cómo
comentar
¿qué es eso de conchale?
¿qué es eso de conchale?
eso es que
mi pareja venezolana
me lo ha pegado
me lo ha pegado
lo digo un montón
el conchale
conchale
es que me encanta
me parece súper gracioso
conchale
es muy venezolana
entonces
si suena como a concha
es que también se dice
la concha de su madre
haciendo un get
¿es posible ya
que se hace desde
el get server site
propio y listo?
pues ¿sería posible
hacer un post o put
sin que se vea
la ruta de la API
y el video de toque
es innecesario usarlo?
claro
haciendo un get
¿es posible ya
que se hace desde
bueno no sé
si eso es una respuesta
de algún sitio
pero sí que podría
¿qué web está desarrollando?
bueno estoy haciendo
una web
más que nada
de unas viñetas
estamos añadiendole
búsqueda
estamos renderizando
de forma estática
tiene rutas
lo estamos haciendo
todo con Next.js
es sencilla
pero lo que nos está sirviendo
justamente para ver
todas las funcionalidades
que tiene Next.js
¿vale?
o sea lo estamos haciendo
por eso
básicamente
de hecho
acabamos de hacer
un microservicio
con javascript
que tira contra el golea
para buscar
entre un montón de cómics
y tenemos 10 resultados
y este microservicio
como podemos ver aquí
está funcionando
y esto
esto es increíble
yo sé que hasta aquí
alguien puede decir
bueno pues
con chale no grosería
claro
por eso digo con chale
¿no?
se nota que es venezolana
te lo dice otro venezolano
y ya se me hacía extraño
no
venezolana
entonces
los venezolanos
estamos en todos lados
hasta en mi casa
fíjate
estás en todos lados
hasta en mi casa
estáis
entonces
¿me puedes especificar
un poco mejor
que es algolia?
claro que sí
de hack
yo te explico
que es algolia
primero te voy a decir
una cosa
para que estés avisado
algolia
como puedes ver aquí
patrocina mi contenido
o sea
es un patrocinador
que tenemos
¿esto significa
que algolia
siempre es la mejor opción?
no
hay muchas veces
que algolia
a lo mejor
es demasiado
para lo que tú quieres
¿vale?
y te voy a explicar
qué es
pero solo para que lo sepas
para que tengas el contexto
y por si no quieres fiarte
de mi opinión
pero yo te voy a intentar
dar mi opinión
lo más sincera posible
pero te quería avisar
de que es patrocinador
del contenido
dicho esto
sí ahora no
pero antes
hace un momento estaba
que lo he visto
¿vale?
de hecho la semana que viene
vamos a tener un tercer patrocinador
¡oh!
¡ojo!
¡ojo!
ahí os lo dejo
ahí os lo dejo
ahí os lo dejo
siempre es la mejor opción
dice juguete
no a ver
por ejemplo
hay veces
que si quieres hacer
una búsqueda sencilla
entre unos pocos archivos
json
pues a lo mejor
no sale la cuenta
y te sale más a cuenta
hacer directamente
la petición
o si
es una base de datos
que tienes muy pocos
muy pocos resultados
pongamos
tienes 200
300
500
pues a lo mejor
no te sale a cuenta
Algolia
esto te lo digo
con todo mi cariño
con todo mi cariño
pero
¿para qué es interesante
Algolia?
a ver
Algolia es interesante
por ejemplo
para e-commerce
o para cosas grandes
mira
para e-commerce
es que es el primer ejemplo
¿por qué?
porque
¿cómo hacen
la búsqueda
en Amazon?
por ejemplo
¿no?
¿cómo hacen
las búsquedas
estas de la gente
de Amazon
tan bestia?
pues la hacen
gracias a cosas
como Algolia
no sé si utilizan
Algolia
por detrás
me imagino
que Amazon
no utilizará
Algolia
pero
lo que hacen
muchos
si te fijas
cuando vas a Amazon
cuando haces una búsqueda
es que te hace
un autocompletado
como muy potente
muy raro
con cosas que sabe
de ti y tal
pues
este tipo de cosas
las tiene
también
los
búsqueda
service
bueno
ese
ahora
bueno
los SaaS
de toda la vida
¿vale?
que lo que te permite
por ejemplo
buscar entre millones
de contactos
o para búsqueda
de texto libre
¿por qué hace esto
Algolia?
porque a ver
tienes Elasticsearch
que Elasticsearch
es bastante conocido
y lo que te permite
justamente
es una búsqueda abierta
que ha habido
bastantes problemillas
es un motor
que te permite
hacer búsquedas
muy fáciles
el problema
de Elastic
aparte de que ahora
tiene un montón
de temas de pricing
y tal
es que es muy difícil
de mantener
es muy chungo
es complicado
software as a service
gracias por la
porque se me ha olvidado
el nombre
estaba pensando
¿service as a service?
entonces
software as a service
gracias
el tema es
el tema es
que Elasticsearch
el problema que tiene
que está muy bien
y además
lo puedes instalar
y hacerlo en premises
o sea
poner tu propio hosting
no hace falta pagar
y tal
porque es muy caro
mantener
y es complicado
y hacer que
muchas veces
que escale
o que busque correctamente
y si le quieras
añadir inteligencia artificial
cosas así
es complicado
bueno
pues Algolia
te quita un montón
de este tipo de cosas
entonces
es un servicio
de búsqueda
y es un SaaS
de forma que
en lugar de tú
tener que estar
configurando Elastic
y todo este tipo de cosas
que ya te digo
que Elastic
no te da todas las cosas
que te da Algolia
fuera de la caja
pues ya está
paga por ello
y te lo hacen
punto
es como
un servicio de búsqueda
en la nube
tienes hasta
10.000 búsquedas
gratis al mes
y luego a partir de ahí
cada 1.000 búsquedas
pagas un dólar
que depende
que alguien dirá
ostras pues es bastante caro
bueno
depende
depende
por ejemplo
un dólar
por ejemplo
mi empresa
pongo mi empresa
en mi empresa
que en la empresa
en la que yo trabajo
yo trabajo en esta empresa
que es que tenemos
1,5 millones de inmuebles
donde se tienen que hacer
búsquedas de texto libre
en las descripciones
en un montón de sitios
ya te digo
que nosotros tenemos
nuestro propio servicio
nosotros no lo utilizamos
Algolia
y un dólar
teniendo en cuenta
lo que cuesta
mantener el servicio
no está mal
no está nada mal
de hecho
yo si fuese
darle a un botón
si fuese darle a un botón
yo migraba a Algolia
¿por qué?
porque cuando lo mantienes tú
a veces te da
te da problemas
de escalabilidad
que se te cae el índice
que va muy lento
o sea
un montón de problemas
entonces
si Algolia te asegura eso
y no necesita gente
que no mantenga
un dólar cada mil búsquedas
no está mal
en serio
creo que no está mal
ya sé que parece mucho
pero es que las búsquedas
de texto libre
son caras
sí
es nuestro
como este
nuestro canal
nuestro
el mido nuestro
desde client side
no puedes hacerlo
o sea
Juan
dice
al de get
porque Juan me está preguntando
si podría hacer
un post a una API externa
desde el client side
desde el client side
no lo puedes hacer
pero lo que sí que puedes hacer
es hacerlo
al microservicio de Next
y el microservicio de Next
que haga la petición
a ese
así puedes proteger la API
no sé si se me ha explicado
pero eso sería
tú desde
desde el client side
hacer la petición
al microservicio de Next
y el microservicio de Next
que se está ejecutando
en el servidor
haría la petición
con el token
y con todo esto
por ejemplo
esto lo vas a ver ahora
ahora lo veremos
ahora te lo enseñaré
porque aquí
podemos ver
que este
este endpoint
este endpoint
que tenemos aquí
como puedes ver
esto tira de Algolia
y esto
hace una petición
externa a Algolia
y esto no lo vamos a ver
en el cliente
que es la gracia
¿vale?
así que
ya tenemos este resultado
ya tenemos los hits
vamos a mostrarlos
vamos a nuestra página
y ahora voy a enseñar
otra cosa
que es bastante interesante
sobre esto
porque si vamos al search
y ponemos aquí
shake
voy a buscar shake
¿vale?
vamos a poner aquí
los resultados
porque
os voy a explicar
una cosa que es interesante
y quería hacer todo esto
para que lo tengáis en cuenta
esto
si yo ahora
que hemos hecho un endpoint aquí
del API barra search
este endpoint
alguien diría
ostras
pues
¿por qué
ahora
pues llamamos a este endpoint
aquí en el que es el website props
¿no?
alguien puede empezar
en hacer esto
API
barra
sí
barra search
¿no?
y aquí pues
podríamos poner esto
y aquí la Q
sería
con esto de Q
¿vale?
sería algo así
¿no?
y esto pues
tendríamos aquí
justamente los hits
o los results
vamos a llamarle results
hacemos una wait de esto
y aquí tendríamos los resultados
bueno tendríamos que hacer un
then
res
res.json
y con esto tendríamos los resultados
¿vale?
tenemos aquí los resultados
vamos a poner
results.length
bueno no he visto como son los resultados
pero
ahí
así
aquí podríamos dibujar los resultados
results.map
en result
¿vale?
y podríamos poner
por ejemplo
bueno voy a hacerlo un poco a saco
vamos a hacerlo un poco a saco
vamos a hacerlo un poco a saco
vale
una cosa que me da rabia
es que ya se me ha olvidado
todo el Tailwind
que había aprendido
en su día
me da rabia
porque
porque estaba súper chulo
saber Tailwind
y ahora me doy cuenta
que se me ha olvidado
y tengo que volver a aprenderlo
¿qué os parece eso?
eso es una mierda
¿eh?
eso es una putada
porque antes
me acuerdo cuando dice
el App NGS
que iba ahí
¡buah!
saco tal
y luego
vale
no sé si será title
sino ahora
pondré un console.log
también para ver
qué es lo que devuelve
este results
bueno de hecho
lo puedo ver aquí
¿no?
a ver
hits
esto es un array
¿vale?
hasta aquí perfecto
y tenemos
image
alt
title
vale
pues el title
image
alt
perfecto
pues vamos a poner aquí
por ejemplo
el image
con el class name
vamos a ponerle
border
no
radius
no
¿cómo era?
rounded
joder
es que
rounded full
vale
rounded full
le vamos a poner
el alt
que es el result
punto alt
esto lo cerramos así
si ya sé que Ana me dice
es que no
vale
que no utilice esto
venga
width
50
hay 50
vamos a cargar
el componente
de next
que es image
que trae como
diferentes
utilizaciones
para las imágenes
vale
vamos a poner
flex
flex
row
justify
center
align
center
align
center
middle
no
align
content
center
vale
tenemos esto
por aquí
vamos a ponerlo
esto por acá
hacemos esto así
esto así
esto por aquí
estamos maquetando
amigos
estamos maquetando
vale
esto por aquí
que no se me olvide
alguien me lo ha llevado
en el chat
gracias
vale
entonces
vale
dice que el resource
no lo encuentra
porque
bueno espérate
claro
que es que os tengo que explicar
algo que estaba mal aquí
ahora os cuento
vale
dice
solo puedes utilizar
rutas absolutas
vale
dentro del get server
side props
solo puedes utilizar
rutas absolutas
así que
esto que había hecho aquí
no lo podría hacer
y por lo tanto
tendría que
utilizar esto de aquí
piru
vamos a ver si esto funciona
porque vamos a ver
el problemilla
vale
esto funciona
funciona
todavía no
no he mostrado los resultados
bien
no sé por qué
porque aquí
estoy haciendo un results
vale
no estoy haciendo un return
test
vale
y esto le falta
aún aquí
que es result.id
y esto lo cerramos
por aquí
vale
y ahora sí que deberíamos ver
más o menos
expects a string
but got undefined
vale
porque en href
href
aquí tendríamos que poner
comic
y vamos a poner
el result.id
vale
vale
vale
me dice que el source
vale
es que no he puesto
no he puesto la imagen
vale
a ver cómo era esto
image
no es source
es image
vale
bueno más o menos
ahora
luego lo arreglamos
un poquito
vale
más o menos
pero ya se ve algo
vale
ya tenemos los resultados
esto que he hecho
es una mala práctica
pero todo esto
parece que es
bueno
os explico un momentito
vale
porque utilizas una wait
y un then
no devuelvo ambos
una promesa
pues por eso los utilizo
a ver
podríamos utilizar
podríamos hacer
esto lo he hecho
por un tema de conveniencia
vale
¿por qué?
porque puedo hacer un punto den
y ya está
si no lo que podríamos hacer aquí
es tener la response
¿no?
y aquí lo que podríamos hacer
sería pues
el
results
response
results
y aquí tendríamos el away
del response.json
el que te guste más
a mí hay veces
que me gusta concatenar
promesas
cuando creo que se
entera bastante bien
¿vale?
vale
sé que hubierais hecho
exactamente lo mismo
porque esto lo hace todo el mundo
pero os voy a explicar
lo que es una mala práctica
respecto a esto
¿vale?
y os voy a explicar
yo uso paréntesis
así es pero una
cuando se resuelva la otra
pero
bueno
en este caso no tiene sentido
porque una depende de la otra
o sea
aquí lo tienes que hacer así
una wait detrás del otro
otra cosa
que hagamos más de un fetch
y tal
os voy a explicar
por qué esto es una mala práctica
porque esto es una cosa
que veo
así de veces
así de veces
en proyectos de NextDS
y lo he visto
esto es muy grave
¿vale?
lo que voy a decir es muy grave
lo he visto en cursos
que cuesta una pasta
lo he visto en cursos
que cuesta una pasta
que yo digo
pero ¿cómo puede ser?
¿cómo puede ser?
¿cómo puede ser?
que es muy fuerte
es muy fuerte
bueno
esto es una mala práctica
esto no se debe hacer
esto no se debe hacer
y a partir de ahora
seguro que veis
que ya no lo hace la gente
porque no lo hace la gente
vale
¿por qué es una mala práctica?
lo primero
es porque lo dicen
en la documentación
eso es lo primero
lo segundo
porque obviamente
pues alguien me diría
hombre
es mala práctica
porque este localhost
cuando tú lo despliegues
va a petar
muy bien visto
¿no?
esto puede ser que pete
cuando lo despliegue
pero alguien me diría
bueno
pero podría detectar
y se puede detectar
de alguna forma
si estamos en pro
o estamos en desarrollo
¿no?
imaginamos
imaginad que hay un
que de hecho lo hay
pero no recuerdo
cómo se llama
¿vale?
pero pongamos
que hay una variable
de entorno
que se llama así
¿vale?
y decimos
vale
pues el host
si es dev
pues entonces es
http
¿ves?
es así
y si no es
esto
por decir algo
¿vale?
y dices
vale
muy bien
o sea
pues ya se ha arreglado
el host
pues esto también está mal
location
no lo puedes utilizar
dentro del
esto es el server
no es el cliente
se puede hacer un fetch
o sea
hacer un fetch
se puede
porque en next.js
justamente
para eso usarías
env
también está mal
y ahora os explico
por qué
podríamos utilizar
el env
también
podríais utilizar
el env
tener diferentes archivos
en el env
y que esto
venga del env
¿vale?
también es otra idea
¿no?
process
env
punto
next
public
pongamos que es public
no host
¿vale?
y dices
vale
pues este host
es el que utilizas
aquí
vale
pues esto también estaría mal
y ahora os explico
por qué
y vais a ver
que tiene sentido
¿vale?
tiene sentido
lo que voy a decir
porque
cuando os lo explique
esto también estaría mal
que funcionar
funcionaría
o sea esto funcionar
funcionaría
pero estaría mal
también
¿por qué todo esto
que estamos haciendo
está mal?
vale
esto está mal
porque
podéis hacer directamente
el search
de algo
efectivamente
ese es el tema
está mal
si el 90%
de los proyectos
están mal
muchos
de los que hemos visto
están mal
está mal
porque esto
lo que está haciendo
es una petición
al microservicio
que nosotros hemos hecho
lo cual no tiene sentido
porque aquí
podríamos llamar
directamente
a lo que hemos hecho
dentro
de hecho
es la forma
en la que hay que trabajar
en lugar de llamar
al microservicio
que hemos creado
lo que deberíamos hacer
es extraer la lógica
¿vale?
toda la lógica
está de algolia
y todo
de hecho
podríamos incluso
importar
directamente de algolia
que lo vamos a hacer
ahora solo para que lo veamos
¿vale?
pero lo que podríamos hacer
es directamente
extraer esto
a otro fichero
podríamos dejar el endpoint
porque el endpoint
igual nos interesa
¿vale?
y lo que
ahí está
y ese es lo que quería decir
ahora
Facundo ha hecho el spoiler
y tal
pero
no solo ese es el problema
el problema además
es que
podría petarnos
aún así
o sea
podría petarnos
no aún así
no
podría petarnos
si mantenemos
este código
pese a todo el tema
del
este código
pese al tema del host
incluso estando bien el host
y tal
¿por qué?
porque
lo que hace Vercell
cuando despliega
toda nuestra aplicación
es que
este servicio
este microservicio
este de search
lo hace de forma
totalmente separada
nuestra aplicación
nuestra aplicación
es una cosa
y luego lo demás
lo despliega en lambdas
en lambdas
ahora no voy a meterme
en todo lo que es
pero lo que tenéis que pensar
es que el despliegue
lo que es el deploy
va separado
uno del otro
y pueden pasar
diferentes cosas
una
que se despliegue
en nuestra web
y no esté
el otro desplegado
todavía
y que por eso pete
porque no es capaz
de encontrarlo
y no es capaz
de ejecutar este
cuando intenta ejecutar
este método
¿vale?
el getServerSideProps
pues peta
esto nos puede pasar
con el getServerSideProps
o con el getStaticProps
si en el getStaticProps
intentas hacer un fetch
claro
vas a entrar como en un loop
porque si no puede
hacer el fetch
al microservicio
que no existe
porque no se ha desplegado todavía
entonces no puede hacer la build
y si no puede hacer la build
pues peta
entonces nunca se
se va a desplegar
ese microservicio
bueno
ahí tienes el loop
entonces hay que evitar
hacer esto
esto no está bien
ahora
importante
esto está bien
si es un servicio externo
si es una API de terceros
esto solo está mal
en el caso
de que es un servicio nuestro
lo que no tiene sentido
es intentar hacer un fetch
de nuestro propio microservicio
que acabamos de crear aquí
no tiene sentido
para ello
lo que hemos dicho
una forma que podríamos hacer esto
que es bastante bestia
una forma sería
pues nada
tenemos aquí
hacer el import
y además os voy a explicar
una cosa de esto
que es bastante curiosa
¿vale?
podríamos hacer este import
podríamos inicializar
el cliente aquí
la verdad es que
lo podríamos hacer
incluso aquí dentro
no creo que pase nada
por
no creo que tarde mucho
en inicializar el índice
aunque sí
os sentí mejor
lo podéis hacer fuera
pero vais a ver
ahora os explicaré una cosa
de por qué puede ser un problema
que se haga fuera
¿vale?
lo voy a dejar dentro por ahora
entonces
por aquí tendríamos esto
y luego
vale
tenemos la query
tenemos que hacer esto
tendríamos esto de aquí
pues esto lo pasaríamos aquí
¿vale?
ya esto lo podríamos quitar
esto ya no lo necesitamos
ya tendríamos los hits
estos serían los results
pues nada
le pondríamos aquí los hits
y con esto
ya lo tendríamos
si ahora guardamos los cambios
y nos vamos aquí
pues podemos ver
que sigue funcionando
correctamente
esta sería la forma correcta
de trabajar en NextDS
con microservicio
o sea
cuando en el
getServerSideProps
o el getStaticProps
queremos utilizar lógica
de un microservicio
bueno
esta no sería exactamente
la correcta
ahora te explico también
por qué
porque obviamente
queremos mantener
el microservicio todavía
entonces queremos
como compartir ese código
en lugar de copiarlo
como he hecho yo
pero una cosa
que es interesante
que puedes saber
es que este algolia search
que ves este import
lo que intenta NextDS
es detectar
dónde lo estás utilizando
y cuando detecta
que lo estás utilizando aquí
este import
no lo carga
sé que hay
sé que hay
import get
creo que hay una forma
de forzarlo
porque hay veces
que incluso
se te puede colar
¿no?
dynamic import
no
hay una
hay una forma
que no recuerdo ahora
pero lo
lo vi
¿no?
de que hay
hay veces
que se te puede colar
¿no?
por X motivo
y entonces
te dicen
cómo lo puedes
cómo lo puedes arreglar
pero bueno
ahora no lo encontraré
si alguien lo encuentra
que me lo comente
pero normalmente
lo quitan
entonces
¿para qué quieres
el microservicio?
vale
en este caso
alguien dirá
bueno
¿para qué quieres
el microservicio?
en este caso
hasta ahora
a lo mejor
no tiene servicio
no tiene sentido
pero
imaginad
que por ejemplo
hacemos en el header
hacemos una búsqueda
aquí
de hecho
pues seguramente
la haremos
¿no?
en lugar de poner aquí
un botón de search
hacer una búsqueda
y que te muestre
un autocomplete
que tú vas escribiendo
y te va autocompletando
entonces
podría reutilizar
la misma lógica
lo que haríamos aquí
por ejemplo
para lo que
lo veamos bien
¿vale?
podríamos tener aquí
por ejemplo
una carpeta
le vamos a llamar
services
por decir algo
y vamos a tener
el servicio de búsqueda
¿vale?
en el servicio de búsqueda
lo que podemos hacer
pues vamos a hacer aquí
el import este
vamos a abrir esta
¿dónde dejado?
¿dónde está mi servicio?
aquí
aquí
¿vale?
pues vamos a ir importando
voy a traer esto por aquí
esto por aquí
y vamos a ir trayéndonos cosas
¿vale?
teníamos esto
ahora lo
lo cambiaré bien
entonces todo esto
en lugar de hacer esto
pues tendríamos
el
podríamos hacer
search
service
services
punto search
q
¿vale?
o query
q
¿vale?
y aquí vamos a tener
una wait
y vamos a tener
los resultados
que a mí normalmente
sí que me gusta
que sea un objeto
por si el día de mañana
queremos que
queremos hacer más cosillas
y tal
así que vamos a hacer esto
y aquí tendríamos los results
y aquí
pues simplemente
vamos a hacer
export const
bueno
pues está aquí
search services
porque quería que quedase claso
pero lo voy a dejar así
export const
search
aquí le pasamos la query
y aquí directamente
hacemos
todo esto
esto tiene que ser
una
async
¿vale?
o podríamos
bueno
lo vamos a dejar así
return
results
hits
¿vale?
y ahora con esto
esto lo voy a quitar de aquí
que se me ha colado
el cliente y esto
lo puedo dejar ahí
no hay ningún problema
y este search
sería el que utilizaría
también aquí
así que podemos utilizar
ese archivo
que tiene extraída
como la lógica
¿vale?
así que importamos
el search
esto
está en search
from
services
barra search
vamos a ponerle
js
ahora ya podemos quitar
todo esto
y esto
de esta forma
ya podemos reutilizar
exactamente
la misma llamada
del servicio
así que hacemos esto
lo ponemos por aquí
results
results
y con esto
si lo he hecho
todo bien
vamos a probar aquí
más fácil
¿vale?
q is not defined
vale pues aquí la he liado
parda
la he liado parda
porque
ah porque
claro
es que no tener un link
te complica las cosas
en el service
esta query
no la estoy utilizando
y la debería poner aquí
y a ver ahora
ahora ya sí
funciona nuestro microservicio
y lo bueno
es que también
debería funcionar
nuestra búsqueda
que no funciona
porque no ha importado
el search
así que vamos a importar
nos vamos a la página
que es esta
vamos a importar
el servicio de search
y ahora sí
vamos a ver
y ahora sí que funciona
esta sería la forma
más correcta
en el caso
de que quieras tener
por un lado
el microservicio
porque te interesa
tener esa lógica
y poder llamarlo
directamente también
joder
no entiendo
mi dufu
yo te lo explico
vamos a ver
si el lugar de fetch
sería con Apollo Client
cómo sería el service
para compartirlo
el problema
es que hay que tener en cuenta
que el Apollo Client
puede ser
el Apollo Client
es en la parte del cliente
entonces para hacerlo ahí
no es tanto que
deberías hacer
no es Apollo Client
no es que sería en el cliente
sino que deberías llamarlo
de otra forma
no podrías utilizar los hooks
porque no lo puedes utilizar
dentro del getServiceIProps
entonces lo puedes hacer
de otra forma
puedes hacer llamadas
directamente a GraphQL
pero no lo harías
exactamente como en los hooks
ahora lo explico
paso a paso
vale
a ver por dónde
hay alguna duda
pregunta
que hasta aquí
a ver
a ver
perdón midu
entiendo que esté mal
fechear la opi propia
porque sucede en el build time
pero no entiendo
por qué sería un problema
en getServiceIProps
sería un problema
exactamente por lo mismo
por lo mismo
que el getStaticProps
lo que pasa es que
no lo notaríamos tanto
además de que
le estás añadiendo
latencia innecesaria
porque te estás haciendo
como un autoataque
de dos
porque básicamente
te estás haciendo
peticiones a ti mismo
y es innecesario
esa petición
es perder el tiempo
no tiene ningún tipo
de sentido
pero aparte de esto
podrías tener problemas
por todo lo que hemos comentado
lo que pasa es que
lo notarías a lo mejor
menos porque no pasan
en build time
pero podrían ocurrir
en otro
en otro momento
vale
o sea que
sería un poco
el mismo problema
pero menos acentuado
que el que tiene
el getStaticProps
que es mucho más grave
pero también es porque
estás añadiendo
latencia innecesaria
que eso es lo más importante
es una mala práctica
porque estás haciendo
cosas innecesarias
es así
es como
yo que sé
si para abrir la puerta
antes de abrir la puerta
tocas en la pared
pues dices
¿para qué tienes que tocar
la pared?
abre la puerta y ya está
pues eso sería lo mismo
vale
eso sería el tema
a ver
acabo de llegar
¿qué estás haciendo?
bueno ahora estoy explicando
unos temas de unos microservicios
con NextGS
pero esto sería un error
si estás usando NextGS
¿cierto?
claro a ver
es que solo NextGS
es el que te permite
todo esto que hemos visto
¿no?
o sea
es complicado
porque
es el único que te permite
por ejemplo
hacer este
un microservicio
en el mismo sitio
como framework
poder llamarte a ti mismo
o sea
y tener el getServiceSideProps
si estamos hablando
de otro
de un custom
serverSideRendering
que tú puedes llamar
a microservicios
o sea
en NextGS
para que quede claro
esto
que a lo mejor
mira
tú en NextGS
aquí tú puedes hacer un fetch
y esto está bien
¿hacer un fetch?
ok
sobre todo si
cuando haces un fetch
esto es
external
IP
o sea
external host
vamos a decir
si haces un fetch
a
mismo host
o local host
esto está mal
o sea
esto es lo único
que tienes que saber
sobre el fetch
en Next
está bien
hacer un fetch
aquí
a un servicio externo
de terceros
esto está bien
pero hacerlo
al mismo host
al mismo host
o local host
de los microservicios
que estamos creando aquí
no tiene sentido
¿vale?
puede ser el mismo host
o local
o bueno
mismo host
o local host
si son servicios
de fuera de Next
pero
de Next
voy a poner esto
mismo host
o local host
de Next
¿vale?
o sea
pues esto es lo que está mal
esto es lo único que tienes que tener en cuenta
podéis seguir haciendo fetch
por ahí
no os preocupéis
entonces
¿para qué quiere microservicio?
bueno
eso os lo he explicado
que quería enseñaros
cómo reutilizar la lógica
y puede tener sentido
para ponerlo en el header
¿vale?
vale
a ver
a ver
que os leo
y ahora os explico
paso a paso
no entendemos
¿vale?
yo ahora os explico
¿cuál sería la mejor forma
de meterse a una aplicación
de React o Vue
sin serverless rendering?
¿me entiendes?
serverless rendering
la mejor sería hacer
como mínimo
pre-rendering
como mínimo
pre-rendering
significa que
cuando Google
te pida a la página
darle un string
eso es lo que significa
o sea
dar un string
con el contenido
renderizado
pero para hacer un put patch
si usamos la ruta relativa
API
es que no necesitas
llamar a put patch
no necesitas
o sea
si yo aquí
por ejemplo
imagínate este
a ver
es raro hacer un put
un patch
pero podrías hacer
imagínate que yo tengo
en este
get server side props
cada vez que alguien
entra a la página
quiero hacer un track
un tracking
y esto en realidad
normalmente hace un post
new visit
por ejemplo
pues esto lo podríamos hacer
exactamente igual
que como lo he hecho
exactamente igual
y eso podría conectarse
directamente
con la base de datos
por ejemplo
conectarse con la base de datos
es que es la clave
¿es normal que el cliente
se pueda atacar directamente
a la API
viendo el resultado del JSON?
hombre si es normal
es lo típico
eso es inevitable
básicamente
o sea que una vez
en vez de llamar
un endpoint propio
llamamos directamente al gole
desde el get server side props
exacto
exacto
ahí está
entonces
¿para qué se usa
un microservicios?
bueno
como os he dicho
a ver
hay diferentes
diferentes usos
uno
lo podéis llamar
desde el cliente
dos
lo podéis llamar
desde fuera
no hace falta
que sea tu propia aplicación
imagínate que quieres
tener endpoints
en los que
quieres que otras páginas
puedan llamar
pues puedes utilizarlos
pero nosotros
los podemos llamar
desde el cliente
es desde un use effect
es que a ver
porque no me da tiempo
de hacerlo todo
pero en el header
en la búsqueda
esta que hemos puesto
en lugar de hacer una búsqueda
a ver
que estoy por hacerlo
en un momento
lo que podríamos hacer aquí
es la búsqueda
¿sabes?
esa es realmente la búsqueda
y tener un autocomplete
y poder hacerlo
pasa que me va a llevar un ratillo
hacerlo
unos minutos
y no sé si
Midu si hago un fetch
a una API que tengo desarrollada
en Strapi
¿está bien en get server side props?
sí
está bien
este chamo le sabe
gracias Jesús Velasco
muy bien explicado
Midu ya entendí
¿vale?
¿ya entendiste?
Midu ¿por qué no usas Axios?
bueno porque me parece innecesario
instalar Axios
para hacer un fetch
cuando
en este caso
en este caso
¿para qué queremos Axios?
sí que he tardado
no he tardado nada
en hacer el fetch
bueno ahora
ya ni siquiera necesitamos el fetch
no sé
Axios me parece interesante
cuando necesitas
bastantes más cosillas
pero hombre
para hacer un fetch
casi no
no quita nada
a ver
pero para reutilizarlo
necesitas que sea
un microservicio en API
el único valor que le veo
es que se puede acceder
desde otra app
no
no amigo
caótica
a ver
al final me vais a obligar
a hacer el autocomplete
vamos a ver
imagínate el header este
¿vale?
voy a hacerlo aquí
para input
type
search
vamos a poner aquí
el onChange
onChange
y vamos a poner
handleChange
¿vale?
vamos a hacer aquí
un const
handleChange
y aquí vamos a hacer
el fetch
el temido
el temido fetch
¿vale?
vamos a poner aquí
el q
y vamos a poner
el q
esto lo vamos a cambiar
a una
template string
¿vale?
vamos a tener aquí
then
res
res.json
then
results
¿vale?
vamos por aquí
handleChange
algo me he cargado
aquí dentro
input
vale
que esto no lo estoy cerrando
ah
ahí dice
ah
passref
claro
porque no estamos utilizando
vale
bueno que igualmente
esto ya no tiene sentido
no vamos a hacer
que sea un link
a menos por ahora
¿vale?
vamos a hacer que esto
sea un link
vamos a hacer
vamos a quitar el link
y ahora os explico
qué es lo que vamos a hacer
con eso
para que quede
para todavía poder acceder
a la página de search
vale
entonces
input type search
handle search
tenemos esto
bueno
que también podría utilizar
o podría haber utilizado
ese wr
pero bueno
no quiero liar
porque si empieza ahora
meter un swr
igual
results
vamos a ponerle
search results
set results
search results
vale
vale
handleChange
y aquí tenemos los resultados
ahora
aquí
lo que deberíamos tener
es que si tenemos resultados
a ver
se ha puesto aquí
vamos a poner
arriba
si tenemos resultados
entonces
vamos a hacer un dip
y el dip
vamos a tener
position absolute
vamos a tener que hacer esto
que sea class name
vamos a hacer relative
vale
y vamos a hacer que esto
tenga top 0
left 0
y ahora veremos
cómo queda esto exactamente
y result
y result
y
¿cómo podemos hacer esto?
vale
esto me sirve
lo que me ha hecho
el hackopilot
me sirve
ah
top full
ah pues mira
no conocía eso
me gusta top full
pero full
¿qué significa?
¿que es 0 o no es 0?
no
es 100%
no quiero eso
me has engañado
no quiero que sea 100%
engañas
¿qué extensión
estás utilizando
para que te tire
el error inline
en el Visual Studio Code?
gracias por la paciencia
a todos
y por compartir
con este método
nada hombre
gracias a ti
y no hombre
no hay paciencia
no hay paciencia
te lo voy a decir
pero
te voy a decir
también
que
que me lo preguntan mucho
pero me lo preguntan mucho
es enline error
¿vale?
o sea se llama así
enline error
a ver
Visual Studio Extension
es que
justamente hoy
mira
este
la mejor extensión
este soy yo
feliz
contento
enseñándola
la mejor extensión
te paso el short
porque está súper bien
HDLeon dice
yo solo vengo a trolear a Midu
en lugar de trolearme
haber traído cerveza
menos
menos traer troleo
y más traer cerveza
ahí
eso
he dicho
enline error
y es error lens
gracias
perdón
que tenés razón
con la de veces
que lo he dicho
al final se me ha olvidado
hasta el nombre ya
Midu es como un héroe sin capa
gracias hombre
gracias
shot the flow
hola
valendique
¿qué tal?
más cerveza
sí
hostia una cerveza
ahora me tomaba
ahora me tomaba una cerveza
el error lens
a mí me da tox
pero el error lens
mirad una cosa
el error lens
se puede configurar
lo digo por si alguna vez
os raya mucho
una cosa que podéis hacer
es por ejemplo
podéis meterle un delay
bastante bestia
¿sabes?
porque así podéis
hacer que en lugar
de aparecer constantemente
pues que aparezca
después de un rato
luego también
yo quité el status bar
del status bar
porque si no aparecen abajo
¿qué más?
podéis incluso
quitar los warnings
por ejemplo
podéis quitar el info
y el warning
y eso es lo que dan
los errores
a ver
esto cada uno
pero le puedes cambiar
los colores
el tamaño
si por ejemplo
te raya mucho
el tamaño
lo puedes hacer
más pequeñito
y de esta forma
pues a ver si
a ver si sale ahora
pero ves
mucho más pequeñito
mucho menos
lo digo porque
hay gente que dice
ay es que no me gusta
porque tal
bueno pero que lo puedes
configurar un poquillo
lo digo porque
a lo mejor así
pues te puede gustar más
quien sabe
yo le quité
cosillas
y lo hice un poquito
más
más light
light
decorations
background
o sea tiene
tiene cositas
the entire line
is highlight
inline messages
inline
ah no sé
me gustaría mirarle más cosas
igual
igual tengo que volver
a configurar cosas
ah mira este por ejemplo
sale menos rojo
ves ahora solo sale rojo
lo de la derecha
que igual esto te gusta más
que también está bien
no sé
es cuestión de
el delay
claro
está bien
yo el delay
se lo puse a cero
pero la verdad
es que he estado pensando
de poner más
pero mira este está bien
porque al final así
te sale solo
a la derecha
en lugar de ponértelo
todo en rojo
pues mira este me gusta
este se lo voy a dejar
este se lo voy a dejar
lo digo porque
mucha gente dice
ostras es que
no me gusta cuando
mira puedes hacerlo
solo cuando guarde
en lugar de hacerlo
todo el rato
tiene un montón de cosas
la verdad es que
es que es genial
esta extensión
lo digo porque
si no os gusta
tal y como es
echadle un vistazo
porque os puede gustar
cuando lo tuneéis
a vuestro gusto
y podéis quitar los warnings
podéis quitar un montón de cosas
vale
dicho esto
Alex
muchas gracias
por la suscripción
a ver
voy a darle las gracias
primero voy a hacer
un buchito
que Oscar Vargas
me la ha pagado
Alex
muchas gracias
por regalar una
suscripción a la comunidad
muchas muchas muchas gracias
habéis visto
esto
que si llegamos
a 800
hacemos un curso
de React Native
con GraphQL
y TypeScript
para crear
una aplicación
de noticias
que os parece
que os parece
cuando hay otro live
revisando proyectos
pues seguramente
el miércoles que viene
el miércoles que viene
haremos uno
gracias
NP11Dev
Kima10
gracias por todo
gracias a ti
joder
por renovar suscripción
hasta 4 meses
gracias
Jessit
EliseoDev
hola Midu
gracias por tus cursos
y por existir
que mono
eres la luz
que ilumina
este cuarto oscuro
llamado vida
besitos en el nudo
de globo
joder
macho
Eliseo
muchas gracias
mira otro buchito
de Juan Semprún
CQ
CM
que se ha suscrito
con Prime
ArialDev
que dice
buenas tardes
8 meses
ya
Aricano
y seguimos aprendiendo
el Night Sky
J García
que ha enviado
5 bits antes
Drent
ulala
y bueno
muchas gracias a todos
gracias
gracias
gracias
Midu
cuando os enseñas
Clean Architecture
para proyectos
en React
sin TypeScript
para yo hacer un curso
de Clean Architecture
con la de
shit
que me se me puede
que me puede
hinchar encima
porque
sabes que pasa
Clean Architecture
al final
es un poco como
los gustos de las películas
que todo el mundo
se ha leído el libro
y cada uno piensa
una cosa distinta
así que
entonces
lo primero es eso
y lo segundo es
el hecho de tener que
que prepararse
entonces
no tengo tiempo suficiente
para hacerlo
con la calidad
que me gustaría
pero
lo quiero hacer
lo que pasa es que
es eso
no me da la vida
si llegamos a 600 subs
me abro
el Lonifans
el
lol
lol
nifans
tendrías que poner
desactivar
error lens
por midu coins
ostia
ostras
buena idea
me lo voy a apuntar
me lo apunto
me lo apunto
me lo apunto
vale
vamos
vamos que vamos a hacer
esto un momento
no que estabais todo el rato
bueno pero entonces
para qué sirve esto
para qué sirve lo del handle chain
lo del handle chain
lo del handle chain
lo habéis dicho unas cuantas veces
vale
vamos a poner aquí
vamos a hacerlo con un ref
vale
en un momento
input
o search
ref
use
ref
y entonces
la q esta
la vamos a sacar
del search ref
current value
y este ref
lo vamos a utilizar aquí
ref
search
ref
no se porque no me ha puesto el otro
bueno esto
obviamente visualmente
a lo mejor no queda muy bonito
pero más o menos
para que
para que nos sirva
vale
al use state
claro
si no importan los hooks
a ver
los hooks están muy bien
pero magia
no hacen todavía
midu
vale
vale
vale
aquí pone un 0
horrible
que porque este input
porque no me lo está dibujando
el input este
que le ha pasado este input
vale que he puesto type
a ver
ah
es que si que está ahí
si que está pero no se ve
jajaja
vale
pero bueno
ya podemos ver aquí los resultados
vale
ya podéis ver ahí los resultados
entonces
bueno
y este 0
es el típico error este
del result length
y tal
que esto soy yo
que he pasado de todo
pero vamos a ponerlo así
y ya está
vale
y el input este
venga vamos a hacer una magia aquí
rounded
lg
border
border
grey
vamos a poner
border grey
vamos a poner
padding 2
bueno
más que padding 2
vamos a poner
padding x
hostia
hostia
que le pasa a esto
que
estate quieto
se está moviendo ahí
como si hubiera mañana
que tengo una extensión
que te ordenan los classnames
pero joder
tampoco hace falta
me los ordene tanto
que me va a volver un poco tonto
vale
y border 1
border
me está volviendo loco
ahora
esto
nunca me ha pasado esto
border 2
hostia que raro
ves
no sé que le está pasando
que me lo está moviendo
por todos lados
ahora
venga
hostia
igual me he pasado
pero bueno
más o menos
para que se vea
rounded
xl
x
y esto va a ser más
y esto
sí
y vamos a poner
que el text
o el text size
nunca me acuerdo
esto es lo malo
de
text
small
xs
cuando pasa un tiempo
que no te acuerdas
bueno
vale
esto por aquí
y
el relative
este lo vamos a quitar de aquí
y lo vamos a poner
justo debajo
aquí
esto lo vamos a mover para adentro
chup chup
vale
y al menos ya tenemos eso por aquí
vamos a poner
width
full
vamos a poner
border
border
gray
rounded
lg
shadow
shadow
sm
bueno un poquito más
¿no?
el shadow
que no se ve casi
tampoco veo que se vea mucho
oye ¿por qué?
ah porque no cabe
porque no cabe
vale
y entonces nada
aquí estilar
estilar
estilar
podría estar aquí todo el día
podría estar aquí todo el día
estilando
estilando
pero tampoco quiero
ip1
1
y margin
0
no sé por qué
vale
y z1
no sé por qué
la imagen se me queda por encima
este z1
creo que debería estar
aquí
no
bueno
más o menos
más o menos
tampoco quiero ponerme a estilarlo
todo
y el link este
vamos a poner aquí
hover
que el background
sea
un poquito así
un poquito más
esto no es lo que quería
vale
un poquito mejor
pero entonces esto
se lo vamos a quitar
de aquí
y se lo vamos a poner
al link
vale
y como el hover
no sé qué
tenemos que ponerlo
hidden aquí
ah vale
aquí no sé
no es donde se lo queríamos poner
porque si no
lo quitamos todo
bueno
nos hemos acercado
bueno
el tema es que ya ahora
cuando busquemos
pues tenemos este autocomplete
así a ver
podría tirarme un montón
de rato
aquí para
no hay z1 creo
no
no hay z1
ay
pues tienes razón
es verdad
pero bueno
igualmente veo que tampoco
lo ha solucionado
esto es que
es por la imagen
¿sabes?
porque esta imagen
las imágenes
en next image
veis que le pone
todo a esta mierda
que es bastante bestia
pues creo
que tiene
que tener aquí
algún tema
de estilo
o lo que sea
porque tiene
si no recuerdo mal
en algún sitio
tiene un absolute
y a lo mejor
eso es lo que no
no le termina de gustar
que se está poniendo
por encima
por beta
a ver qué
podría
no sé
es que aunque le ponga
mejor
a ver si hay un z
z max
z full
z auto
z auto
uff
digo mira
como un z auto
y lo ponga por encima
me cago encima
me cago encima
pero no
no sé
vamos a poner 50
pero no
no se trata de eso
se trata de la imagen
esta
que como podéis ver
tiene alguna cosilla
por ahí
no sé si es la imagen
porque también sale esto
pero aquí no hay
ningún tipo de
bueno
no sé
los z
y podemos aplicar
el tip de otro día
ah mira
el otro día
hice el tip este
de aprende a truncar
un texto en css
con solo tres líneas de código
entonces
lo que
no sé si
cómo sería
vamos a intentarlo
a ver cómo es
en tailwind
me imagino
creo que en tailwind
debería ser con una sola
puede ser
a ver
esto habría que ponerlo
si no me equivoco
claro
lo que pasa
lo malo es
el ancho
sabes
porque el ancho
de este
no va a funcionar
aunque nosotros
pongamos aquí
el text ellipsis
ah mira
text ellipsis
y overflow ellipsis
hacen lo mismo
o sea
esto es la primera vez
que lo veo en tailwind
como que no se han puesto
de acuerdo
de cuál es la clase correcta
esto es la primera vez
que lo veo
la primera vez
igual hay otros
pero no los había visto
obviamente
pensaba que con este
a lo mejor los hacía todos
pero ya veo que no
o sea que tienes que ponerlos
todos
no grab
white space
no grab
vale
vamos a ver si esto ha colado
pero yo creo que no va a colar
por el tema del texto
bueno
igual si que ha colado
no
no ha colado
sino que simplemente
yo creo que
no
no sigue
shake
creo que simplemente
o no hay ninguno
ahí que llegue
o no los está rompiendo
o se está yendo a la derecha
pero no se ve directamente
los elipsis
tendríamos que truncar
ah
en tailwind debe estar
un paquete para truncar
solo con una clase truncate
amigo
amigo
vale visto
visto visto
z infinity
si
tengo un tweet
que explico
por qué el máximo
poner un z menor
al contener de las imágenes
puede ser
lo malo es eso
que esto no debería
tener ningún z
no sé por qué
debería
o sea esto
no debería tener ningún z
podría ponerle menos uno
pero no
tampoco
o sea que
todo esto
no sé en qué sitio
hay un z
o por qué hay un z
por ahí
debe ser una tontería
porque obviamente
aquí no hay
ninguna cosa
y aquí tampoco
hay ninguna cosa
de z
o sea es un tema
de esto
a ver una cosa
que se podría hacer
que esto también
sería cuestión de ver
vale
esto ya está
un poco más cerca
z index
aquí sí que está
por encima
y lo que le
podríamos hacer
es que sea esto
ves que ahora sí
que se ha puesto
al menos el texto
vamos a poner
opacity
099
no
tampoco
la leche
bueno aquí
nos hemos acercado
porque ahora sí
que se ha puesto
el texto por encima
pero aquí
este tampoco es
pero bueno
bueno
ahora sí que estoy
flipando
porque sí que parece
que se ha puesto
por encima
pero o ha dejado
algo que aquí
es raro
o es el renderizador
que
a esto sé que es un poco raro
le falta el background
al desplegado
cierto
a este le falta
el background
ya está
pues con esto
lo tendríamos
cierto
entonces
tenemos aquí
el
en el relative
le pondríamos
el z10
y el desplegado
tendríamos aquí
vamos a ponerle
el white
y con esto
ya lo tendríamos
bien visto
y
overflow hidden
hidden
o sea
le voy a quitar
creo
la extensión
esta de
de
ahora
vale
porque
veis que ahora
el hover
esto es un error
bastante típico
también
que muchas veces
se ve
que es dejar
el overflow
y entonces
cuando haces el hover
se ve el pico
mira
aquí
si le quitamos
este overflow
hidden
ves que se ve el piquillo
en cambio
tiene bordes radios
ese pico
me está poniendo nervioso
bueno
lo hemos arreglado
lo hemos arreglado
con el overflow
lo que pasa es que antes
quería arreglar lo otro
obviamente
bueno ya tendríamos aquí
como un auto complete
y
más o menos
shake
bla bla bla
rest and fluids
y al final esto
está haciendo las llamadas
en
ves
aquí con el microservicio
cada vez que llama una
pues bueno
está llamando aquí
está llamando aquí
cada vez que escribe
pues está llamando
y ya lo tendríamos
entonces ya estaríamos
utilizando en el microservicio
podríamos
una vez que tenemos
todo esto
con los resultados
pues lo que podríamos
poner aquí
es ver todos los resultados
por ejemplo
en otra página
en lugar de ponerlo aquí
pues pone aquí
y aquí lo que podríamos hacer
sería
como lo estamos haciendo
hasta ahora
en lugar de hacer
el comic result
aquí haríamos
search
barra
y tendríamos aquí
como hemos dicho esto
que era
search
q commit
vale
search
q barra
y aquí tendríamos
la
la query
que en este caso
sería esto
vamos a poner
una constante
por aquí
pim
bueno
al final esto
lo podemos sacar aquí
y nos podemos quedar
bien a gusto
bueno
no sé si nos podemos quedar
a gusto
porque puede ser
que esto no exista
este sí que debería existir
pero este
puede ser nula
al principio
así que le vamos a dejar
así la q
y luego aquí
pues le vamos a poner la q
le ponemos en el link
y aquí en lugar de
vamos a poner
ver
todos los resultados
ver resultados
ver resultados
resurs.length
vamos a poner aquí
italic
esto tendríamos que sacarlo
en comentario
pero bueno
ups
result is not defined
vale
esto que he puesto aquí
esto
y aquí lo que tenemos
que poner en realidad
sería por ejemplo
all results
vale
vale
yo también se me ha olvidado
hecho esto
vamos a poner aquí
además que sea
text gray
vamos a ponerlo un poquito más
aquí
bueno
por ponerlo
o sea
tendríamos que estilar aquí
un montón
pero
más o menos
más o menos
más o menos
ay
bueno
a ver
lo bueno es
que ya tenemos el microservicio
lo estamos utilizando aquí
buscamos aquí
rest and fluids
no sé qué
vaccine
a ver dos resultados
sensor
vale
va saliendo
ver un resultado
le damos
nos llevaría el resultado
justamente
podríamos buscar otro
podríamos ver todos los resultados
esto nos llevaría a todos los resultados
de búsqueda
y a ver
podría ponerme a estilar
pero no os quiero aburrir
porque si no
hoy era el stream de 8 horas
no
hoy no era de 8 horas
pero al final
claro
hoy podríamos haber utilizado
el algodio autocomplete
que eso sería
interesante
y ya está
no hay ninguna conexión
con el servicio de algolia
en ese caso
sí que hay
ojo
ojo con eso
eso está interesante
hay un paquete de algolia
que además lo estuvimos viendo
que te hace el autocompletado
o sea
te hace todo el autocompletado
con los
incluso los
de hecho
si queréis
lo podemos mirar
porque está bastante potente
y Madeval dice
no hay ninguna conexión
con el servicio de algolia
en ese caso
no hay límite
de los 10.000
¿sabes lo que pasa?
que sí que hay un límite
y lo que pasa
es que cachea muy bien
lo bueno de utilizar
el paquete de algolia
es que tiene una caché automática
de hecho
el nuestro no tiene una caché
y esto lo que está haciendo
es constantemente
haciendo una petición
o sea
el nuestro no está tan bien optimizado
en cambio
el paquete de algolia
esto lo tienes súper en cuenta
y tú cuando haces autocomplete
pues lo que haces
realmente es que los cachea
y llega un momento
que no ves la petición en la red
porque dice
ah
si ya has buscado
para autocomplete
está buscando la palabra
A N
lo has buscado
hace 10 segundos
pues no hago la petición
y te vuelvo a mostrar esto
que la verdad es que está bastante bien
nosotros para hacer esto
tendríamos que ponernos a programar
y hacer un montón de cositas más
¿no?
el vídeo que hiciste
es haciendo una copia de Twitter
ahí de tipo autocompletado
lo utilizas
ahí utilizamos otra cosa
que también está bastante curiosa
utilizamos los hooks
Twitter autocomplete
vale
crea pasapos
este
crea pasapos autocompletado de Twitter
este
lo que
que bueno
dirles ya
jajaja
este
lo que hicimos
ves
es utilizar
React
instant search
hooks
en este yo hice
un autocompletado
a mano
lo hice a mano
porque quería aprender
cómo utilizar
los hooks
de React
y está bastante chulo
porque
tienes que poner esos vídeos
en la lista de reproducción
del golem
muy buena idea
la verdad es que no tenía
pensado
no había caído
en hacer una lista
de reproducción
no había caído
ah mira
si sí que tengo una
vale
ok
no lo sabía ni yo
vale
vale
pero muy gracias
muy gracias por la idea
la verdad es que los tenía que poner
sí sí
o sea que tenía una lista
pero que no la utilizaba
bien por mí
bien por mí
bueno pues aquí
lo que hacía
era un autocompletado
que lo hacía yo a mano
la verdad es que quedó
bastante chulo
bastante chulo
la verdad es que esta clase
es la hostia
o sea
soy muy modesto
lo sé que soy muy modesto
pero no en serio
es que quedó súper bien
para ser 25 minutos
el cómo quedó al final
¿sabes?
el cómo explicar esto
de cómo dejarlo justamente ahí
funciona hasta mejor
que el de Twitter casi
lo que me faltó
es poner
navegación por teclado
pero es que ya se me iba mucho
el vídeo
y hombre
son 27 minutos
que estoy ahí
dale que le dale
programando
así que
not bad
not bad
se parece a mi nombre
Ayor
ah es verdad
Ayoría
Ayoría
el funcionamiento sería
hacer una request
por cada carácter
y ir cacheando resultados
sí
el funcionamiento sería ese
básicamente
lo podrías hacer
Algolia lo hace en cliente
obviamente
lo guardas en memoria
lo guardas en cliente
que de hecho
eso sí que es fácil
eso no sería muy difícil
o sea
de hecho lo podríamos hacer
o sea
lo podemos hacer en un momento
para que lo veáis
o sea
lo podemos hacer en un momento
mira
lo vamos a hacer
lo vamos a
¿qué es que hagamos la caché?
la hacemos
a ver
vamos a hacer una caché guarra
y os voy a explicar
por qué guarra
¿vale?
pero es una caché que
sobre todo en el cliente
pues funcionaría
es una caché de memoria
pero es una caché
y al final
o sea
una caché sería tan fácil
como decir caché
tienes aquí un diccionario
y lo que podemos hacer es
cachear justamente
la query
¿vale?
y decimos
si tenemos la caché query
pues lo que vamos a hacer
directamente
es devolver
podemos devolver
la caché query
ya está
que no la tenemos
vale
pues tenemos los hits
y lo que hacemos aquí
la caché query
pues sería guardar
los hits
ya está
esto sería básicamente
esto sería básicamente
lo que tenía
ya está
se ha acabado
lo hemos hecho un momento
a ver
podemos probarlo
o sea
caché query
la query
la query al final
es a n
no sé qué
no sé cuánto
y ya está
¿cuál es el problema?
esto tiene cosas buenas
y cosas malas
para el cliente
memoizar
sí
bueno
esto sería más bien
cachear en un diccionario
¿no?
aquí no aplica
podría aplicar un use memo
podríamos hacer un use memo
y guardar esa información
pero creo que tiene más sentido
hacerlo aquí
yo todo lo que podría
hacer en javascript plano
lo intentaría
porque lo bueno de esto
es que no tiene nada que ver
con la UI
y además se puede reutilizar
tanto en servidor
como cliente
e independientemente
de utilizar React
Vue
o lo que sea
y si funciona
no lo sé
vamos a mirarlo
vamos a ver
vamos a ver si funciona
¿quién dice que funciona?
vamos a
espérate
espérate
¿cómo se hacía esto?
¿cómo se hacen los...?
¿cómo se hace esto?
una predicción
va
vamos a poner una predicción
hace mil años
que no hago una
eh
predicciones anteriores
venga
esto
va a funcionar
a la primera
¿va a funcionar a la primera?
venga
claro que sí
Midu me guía
uy
no cabe
confío
lo siento
lo siento
pero no
venga
vamos a poner
cinco minutos
iniciamos la predicción
y ahora le damos
¿vale?
¿qué es más rápido
acceder a un objeto
en memoria
o a local storage?
pua
claramente un objeto
en memoria
pero claramente
claramente un objeto
en memoria
totalmente
¿cuál es el problema
de lo que...?
a ver
lo malo de la memoria
es que la memoria
entre navegaciones
se pierde
o sea
esta caché
esta caché
que he hecho yo
solo funcionará
en la misma
en la misma navegación
del usuario
pero bueno
tendríamos
una solución
para eso
ahí lo podemos mirar
en cambio
el local storage
persiste
entre navegaciones
pero
acceder al local storage
es muchísimo más caro
que acceder a un objeto
en memoria
pero por supuesto
totalmente
¿ha puesto todo
para la noche gamer?
uno apostó
40.000
que no
hostia
que cabrón
eso es porque
sabe algo
eso es porque
sabe algo
eso es porque
sabe algo
que rata
dios
que mal
que malos
que malos
que malos
que malos
uno apostó
40.000
all in
bueno bueno
como está la cosa
eh
43.000
40.000
escala bien
teniendo esa dualidad
aquí en server
hombre si
escala súper bien
solo confío
bueno bueno
aquí gente confiando
gente que no
a ver qué
a ver qué
uy veo que me está
petando la página
porque peta la página
de vez en cuando
porque peta
ah bueno puede ser
que sea por esto
spoiler
spoiler
a ver
define
that is null
omit
a ver
cache
query
no creo
creo que no es esto
no no no estoy
haciendo fix
escucharíais
si mira si tecleo
lo escucharíais
no
no escucháis si tecleo
creo que si
no
ahora todos poniendo
que no
ahora todos poniendo
que no
y si os he engañado
y en realidad he visto
que funciona
que no que no estoy
que no estoy tecleando
que no estoy tecleando
tendría que estar mirando
mucho
no se escucha
como que no se escucha
a ver si le he dado
algún botón
no no
si que se escucha
ah no se escucha
el teclado
en serio
ah pensaba que se escuchaba
a ver voy a probar
no escucháis
mira
ah yo pensaba que se escuchaba
bueno mientras
está eso
os voy a explicar cosas
va
os voy a explicar
que la semana que viene
vamos a tener
nuevo patrocinador
nuevo patrocinador
y
buah
que buena pinta
tiene el nuevo patrocinador
tiene muy buena pinta
lo aseguro
va a ser la bomba
vamos a subir de nivel
vamos a subir de nivel
de patrocinio
totalmente
tremendo
midu por favor
perpetúa tu especie
es la mejor manera
de hacerte inmortal
es fácil
se hace con la chorra
hostia alfredo
está bien
luego lo malo es
cuidar
la criatura
no me digáis que es platzi
por favor
no es platzi
no es platzi
spoiler
no es platzi
que si platzi
me quisiera patrocinar
tampoco estaría mal
tampoco es pornhub
ojalá fuese github
no es netlify
que también me gustaría
ojalá fuese verser
pero bueno
verser no quiere patrocinarme
directamente
de que rubro es el patrocinador
lo bueno del nuevo patrocinador
es
es del estilo de algolia
y lo bueno que tiene
es que vamos a poder hacer
un montón de proyectos
pero un montón de proyectos
con
con ello
un montón
así que
ojo cuidado
verser y microsoft
ojalá
ojalá
si fernando alonso
también ojalá
la agencia tributaria
madre mía
ese
antipatrocinaría
en todo caso
elon musk
ojalá
nasa
etim
que sois unos troles
sois unos troles
de cuidado
patrocina twitch
si hombre
con twitch
twitch lo que tiene que hacer
lo que tiene que hacer
lo que pasa es que para eso
necesitaría
por lo menos
mil subs
por lo menos
pero twitch
lo que tendría que hacer
es
negociar conmigo
el tanto por ciento
porque se lleva
50% twitch
50% yo
de las subs
es muy fuerte
de hecho
el otro día
me dijeron
mis mecenas
os lo digo
porque me dijeron eso
y me estiraron
de las orejas
me dijeron
pero es que
midu
es que claro
si no lo dicen nunca
entonces lo voy a decir
antes de ver
el resultado
que un patreon
vale
y os voy a explicar
el patreon
tengo un patreon
tengo un patreon
mira
200
estoy ganando
200 euros al mes
para que veáis
aquí transparencia total
271 euros al mes
39 mecenas activos
que son un montón
que no está mal
271
que lo que ha hecho
es que ahora
tengamos un editor
de vídeo
en el canal secundario
lo cual no está nada mal
y que
no me acuerdo
que más íbamos a hacer
pero que si hacíamos otro
pues íbamos a ir
abriendo cosas
creo que hay uno
que llegamos a tener
la plataforma de cursos
en el caso de que
lleguemos
entonces
que si queréis
y os gusta
pues que sepáis
que con los mecenas
aparte que os podéis llevar
merchandising
si no me equivoco
de hecho
no sé si puedo verlo
a ver
página
a ver
página
ver página
pues lo que me llevo
no
aquí no
bueno no sé
ver página
puede ser
puede ser
no
no sé
bueno
el caso
que en algún sitio
se puede ver
y se ve el pricing
que os podéis llevar
merchandising y todo
así que
terminó la timba
venga
vamos a ver la timba
cómo ha quedado la cosa
vamos a ver cómo ha quedado la cosa
bueno la cosa ha quedado
la cosa ha quedado
las patrón se pueden llevar un gruard
ojalá
te imaginas
mi tú dónde conseguiste un editor
lo anunciaste
no es alguien de la comunidad
que por suerte
ahí vendes fotopata
no no no vendo fotopata
quiero saber si perdí hasta los coltroncillos
hay pobres
bueno pues vamos a ver
bueno
como os he dicho antes
está petado
pero bueno aquí sí que funciona
si
la idea es que si le doy a la A
esto hace la búsqueda
si borro
hace la búsqueda
y si le doy a la A
no ha funcionado
no ha funcionado
no ha funcionado
no ha funcionado
o sea que han ganado
los de
lo siento pero no
espérate voy a ver
si he guardado los cambios
si parece que he guardado los cambios
he guardado los cambios
ahora veremos
por qué no ha funcionado
lo siento
lo siento
pero no
gracias a todos los que habían apostado por mí
gracias a todos los que nos habían apostado por mí
gracias
pero parece ser que no ha funcionado
vamos a ver por qué no ha funcionado
bueno aquí ha petado por alguna cosa
ah porque cuando se pone vacío
peta
esto no pasa nada
esto es culpa
eso no tiene nada que ver
eso lo podemos arreglar en un momento
lo siento a los que habían confiado en mí
pero bueno ya ven que no soy perfecto
ni mucho menos
todo lo contrario
todo lo contrario
y ttt search api
index
joder
donde he puesto el handle
handle change
que ahora no encuentro
aquí
vale
lo que vamos a hacer es que si la q
si no hay q
pues hacemos un return
de esto
y no hacemos nada
y ya está
esto
nos debería arreglar este problema
vale
este problema si que lo arregla
oye pero
ahora si que funciona
ahora
ah no se si es que funciona
o es que peta
a ver
vamos a ver
vamos a ver bien esto
por ejemplo
shake
no
coño es que ahora
si no tiene q
coño es que ahora me está petando esto
pero a saco
vamos a ver esto
momento
un momento
que está pasando aquí
si ahora escribimos aquí
es que no me está entrando aquí
ah no es que tengo aquí
ah lo tengo todo oculto
a la madre que me parió
todo todo oculto
pero veis que me está poniendo siempre la q vacía
ah y esto es porque lo he movido aquí
me cago en la leche
me cago en la leche
esto es porque lo he movido aquí
y entonces no me estaba entrando
pues igual el problema ya es ese
vamos a ver
q is not defined
vale
y este q is not defined
es porque lo hemos dejado aquí también
en el
resultados
vamos a hacer otra cosa
get
value
vamos a hacer esto
vamos a poner aquí
get value
vamos a poner esto por aquí
y así utilizamos esto también
aquí
ver
¿dónde había puesto esto?
aquí
vale
a ver ahora
alien
unexpected input
vale
esto es cuando lo he borrado
get value
pero ¿por qué?
¿por qué peta?
ah bueno
esto ahora
ahora sí que puede ser
ahora puede ser
pero por otra cosa
vale
ahora sí que puede ser que pete
porque está intentando entrar
en lo otro
¿vale?
en lo que estábamos haciendo aquí
de la caché
¿vale?
me fui a las midu vegas
y perdí todas mis midu coins
midu patia
hoy me voy a dormir triste
ay lo siento
lo siento
hoy se me cayó un ídolo
no me he caído
estoy sentado
no me ha pasado nada
no me ha pasado nada
bueno
no sé
a ver
debe ser una tontería
pero es verdad que
por ejemplo aquí
este
expected end
of json input
esto
async
return
jQuery
esto debe ser una tontería
porque realmente
aquí sí que estamos guardando
lo de la Query
vamos a ver esto
Query
y caché
Query
vamos a ver
hasta aquí funciona bien
cuando va a utilizar la caché
peta
coño
y encima
el problema es que encima
ah no
pero es que peta aquí
¿por qué peta aquí?
o sea
está petando en el server
fíjate
está petando en el server
y eso que aquí
en realidad sí que tiene
o sea
sí que está la caché aquí
aquí sí que está la caché
de hecho
aquí podemos ver
¿ves?
al
y aquí tiene todo esto
¿por qué está petando esto
en la caché?
porque dice
expected end of json input
es como que esto
lo que está guardando aquí
como si no fuese un json
esto es un poco raro
debe ser una tontería
pero lo que está pasando
es que en la parte
del servidor
¡ah!
ya está
era una tontería
era una tontería
claro
el problema es este
el problema es este
amigos
esto era todo el problema
por esto no ha funcionado
la primera
¡oh!
no
la caché había
medio funcionado
el problema
era este
ahora sí que funciona
ahora sí que funciona
¿o no?
pues no
claro
esto está funcionando
está funcionando la caché
pero está funcionando
en la parte del server
ahora está funcionando
pero no está funcionando
por esto
¿vale?
porque antes había puesto esto
y tenía que ponerlo así
¿vale?
era un objeto
lo que devolvíamos
era
podemos apostar de nuevo
no
ahora sí que está funcionando
ahora ya sí que lo sé
ahora sí que lo sé
if
esto
return
y es un objeto
resolves y tal
y ahora sí que está funcionando
aunque está haciendo
la petición
que esto también lo podríamos evitar
aunque esta petición
la está haciendo
en realidad
ahora no está tirando
del
no está tirando
del servicio de Algolia
¿vale?
y por lo tanto
pues no
no está entrando
Algolia y tal
sino que este search
en el servicio
pues entra a la query
a la caché
y ya está
ya no te creo
bueno
a ver
os puedo poner un if
aquí para que lo veáis
¿ves?
si yo pongo aquí un if
searching for query
no sé qué
y aquí podemos poner
si lo ha hecho
desde la
from caché
y ponemos la query
y a ver
vamos a ver que haga algo raro
algo
next yes
alg
y quitamos
y aquí
¿ves?
searching for alg
alg
y luego from caché
a l
ah
o sea ¿ha funcionado o no ha funcionado?
I'm a bit disappointed
oye
ahora sí que ha funcionado
no me digáis que no es verdad
porque se ve claramente
que está funcionando
así que no me digáis que no es verdad
aquí lo tenéis
y se ve claramente
¿vale?
ahora te creo
vale
perfecto
menos mal
si te habías perdido los anteriores
no pasa nada
no te preocupes
porque vamos a estar
codiando un poco
y tampoco
yo voy a ir explicando
por dónde nos hemos quedado
con cada cosa
vamos a ir con localhost 3000
vemos nuestro proyectito
hoy lo vamos
vamos a ponerle
i18n
traducciones
vamos a ponerle
vamos a utilizar variables de entorno
vamos a poner
también
vamos a desplegarlo
a producción conversell
vamos a ver un truquillo
bueno un truquillo
es una cosa interesante
con las variables de entorno
o sea que
sí sí
hoy es next
aquí lo tenemos
hoy vamos a hacer next
next
que lo tenemos por aquí
así que
vale
vamos a cerrar esto
que tengo por aquí
es que tengo un montón de cosas abiertas
¿vale?
y vamos a abrir esto
¿por qué empezamos?
¿empezamos por el i18n o qué?
venga va
vamos a empezar por el i18n
si os parece
i18n
lo primero que tenemos que hacer
para el i18n
es
el next
confi
.js
vais a ver que el i18n
o sea está absurdamente tirado
o sea
next.js
es que
es que es increíble
como se lo ha trabajado
y el hecho de añadir traducciones
es súper fácil
súper fácil
¿y capsa?
que dice
¿cuál es el límite de javascript?
no hay límite
no hay límite
no hay límite
¿está petando el directo?
hostia
¿sí?
no sé
igual es porque
he abierto este fichero
mira amigos
el lunes se acabaron los petes
se acabaron los petes
porque
aunque
no de ancho
lo que tengo es el procesador a tope
lo que tengo es el procesador a tope
a ver
voy a quitar
esto
y voy a quitar esto
voy a cerrar cosas
yo que sé
y
a ver
déjadme
déjadme ver todo lo que tengo por aquí
a ver
si tengo más cosas abiertas
no
aquí no tengo nada más
SSR
vale
voy a cerrar
voy a cerrar editores
voy a cerrar editores
voy a cerrar editores
save
vale
este lo voy a dejar abierto
que tengo cosas ahí apuntadas
ah
es que tengo aquí el libro de
mira
tengo aquí el libro abierto
no me estaría que
el libro también
que tengo aquí el libro
mira el libro
libro aprende React
así que
vamos a cerrar el libro
mira que del libro tengo
mil millones de pestañas abiertas
cerrar
cerrar
cerrar
cerrar
cerrar
vale
¿por qué no usas TypeScript en React?
bueno
porque no me gusta mezclar
muchas veces las cosas
si yo me pongo a utilizar
TypeScript
tengo que explicar
TypeScript
mientras
también
tenemos que explicar
Next.js
y una de las razones
por las que no lo hago
es justamente por eso
porque tendrías que estar
explicando las dos cosas a la vez
creo que es mejor
si nos enfocamos en una cosa
y luego en otra
hombre
muchas gracias
Carlos García
por la nueva suscripción
gracias
Wike
WickedDaz
muchas gracias
Wasp
1
9
9
1
con Ben 1
también
Diana
14 meses
y los que nos quedan
ya ves
muchas gracias
Diana
Zorek
95
02
muchas gracias
gracias
69
Mr. Creeper
que ya has pasado un año
Escalofrío de Cabra
hostia
que nombres os ponéis
la madre que os trajo
Escalofrío de Cabra
también
muchas gracias a todos
Midu
no sé si el lunes
se solucionará el tema
porque el que peta
eres tú
hombre
el que peta es el stream
no soy yo el que peta
pero
a ver
si me peta el lunes
incluso con el Mac Studio
lo que voy a hacer
es utilizar los dos ordenadores
para streamear
y entonces
en uno streamearé
y en el otro trabajaré
y ya está
se acabó
ojo Midu
con 10 años menos saludando
tengo 18 años
muchas gracias
soy mayor de edad
lo aseguro
soy mayor de edad
pero puedes crear
un archivo
ya pero es lo mismo
las declaraciones
exportando
usar jsdocs
es que es lo mismo
tampoco quiero explicar
todo eso
he explicado
jsdocs
he explicado
cómo exportar
las declaraciones
lo he hecho
en otros momentos
Midu está petando
sigue petando
todavía
ahora sí que no tengo
absolutamente nada
no sé si cerrar
y volver a abrir
no sé si cerrar
y volver a abrir
es que ahora sí que
no me queda absolutamente nada
voy a ver
si tengo más cosas
por aquí
vamos a ver si tenemos
otra cosa por aquí
no
esto que tenemos
lo tengo quitado
es que no tengo nada abierto
no sé si mirar
no sé si mirar
esto que es
bueno quitar esto
no sé
no tengo nada
ahora se está viendo bien
sí
sí peta el sonido
todo el tiempo
son micropetes
hostia
pues ahora sí que no
no tengo ni idea
seguro que windows update
no no que no tengo
no tengo windows update
o a lo mejor es
que hablo muy fuerte
no sé
mira cuál es la mejor manera
de almacenar
lo que tenemos
en un carrito de compras
es que Midu lo peta
es el sonido
porque la imagen
se ve bien
es solo el micro
hostia
hostia
a ver
excluir esta fuente
compresor
retardo
a ver
si me bajo un poquito
ahora
me escucháis mejor
me escucháis mejor
ahora va mejor
ahora
me he puesto un poquito
más bajo
porque a lo mejor
es que estaba petando
no tengo la vpn
os lo aseguro
os lo aseguro
ya lo he mirado 80 veces
no tendrás la vpn abierta
no
hola
hola que tal
I'm Sebax
vale pues nada
continuemos pues
te escucho de la hostia
vale Gaciel
hasta yo petaría
si tuviese tu voz tan cerca
vale sonido bien
vale gracias a todos
gracias a
bueno pues nada
vamos a ver
no sé
ahora sí que no veo nada
que
que opino de Kenzie Dodds
que es un crack
Kenzie Dodds
es un verdadero crack
un verdadero crack
eso es lo que opino
una persona que sabe
un montón de ría
que se nota que
que lo ha utilizado
una y otra vez
ya se escucha bien
vale perfecto
muchas gracias
vale pues venga
lo que os comentaba
vamos a añadir
i18n
a nuestra aplicación
para hacerlo
lo único que tenemos que hacer
para empezar
luego veremos
que vamos a tener
algunos problemillas
es añadir
el i18n
vale
si no estás
utilizando
typescript
puedes añadir
esta línea de aquí
de type
import
next
nextconfig
y de esta forma
vas a tener los tipos
de la configuración
de next
o sea que
así puedes hacer
control espacio
ves
y puedes poner
i18n
y fíjate
tienes aquí los tipos
es bastante útil
si estás utilizando
typescript
como en mi caso
a ver vamos a poner
alguna musiquita
un poco más
a ver esta
vamos a bajar por aquí
vale
entonces una vez
que tenemos
el i18n
lo que necesitamos
es indicarle
justamente
cuáles serían
los idiomas
que queremos
soportar
vale
en nuestro caso
los idiomas
que queremos soportar
podemos ponerle
todos los que queramos
pero vamos a poner
en locales
en locales
mira justo
inglés y español
ya está
ten en cuenta
que también puedes poner
las regiones
o sea puede ser
el inglés de USA
el de UK
puede ser el español
de yo que sé
de México
el de España
o sea que puedes poner
también regiones
esto puede ser interesante
pero bueno
yo creo que en este caso
no vamos a entrar
al detalle
hay algunos productos
que sí que lo hacen
esto
que sí que entran
a ese detalle
de ver cuál es realmente
el tipo de español
o sea es más regional
pero bueno
en nuestro caso
no lo vamos a ayudar
solo que sepas
que se puede hacer
ahora
mira redirect false
no sé para qué es el redirect
pero bueno
lo podemos mirar
esto es lo bueno
que puedes poner domains
ah no
pues no tienen
pensaba que tenían comentarios
redirect no sabía que tenía
o sea igual
que hackopilot este está flipando
efectivamente está flipando
porque lo que sí que puedes utilizar
es domains
y aquí en domains
lo que podrías hacer
es indicarle
cada uno de los dominios
por ejemplo
le podríamos poner
este
que este sería
pues por defecto
le podemos decir
que este es el
del inglés
y luego el domain
pues podríamos poner
por ejemplo
xkcd.es
y le podríamos decir
que este
el que tiene por defecto
sería el español
esto si utilizamos
dominios
pero bueno
yo no tengo dominios
ahora para utilizar
y no vamos a utilizar
dominios
obviamente
vale
así que nada
es seguro almacenar
el
el jota
esto nunca me acuerdo
json web token
en una cookie
que caduque
en x tiempo
en principio sí
a ver
fridier
al final
el problema
no es tanto
donde lo almacenes
es que si la gente
tiene acceso a tus cookies
pues ya está jodido
sea cuando sea
es así
el redirect
es para que te envía
al local
correspondiente
con el navegador
sí
o sea
pensaba que no tenía
este tipo de
o sea
pero ese redirect
es fuera
no
es que no sé
si estaba adentro
yo creo que
yo creo que esta opción
lo estoy mirando
esta opción
no me sale por aquí
yo creo que ese redirect
no
al menos
yo no lo
esto
o sea aquí
no me suena
pero bueno
puede ser
lo que sí que puede
o sea por defecto
tendrías lo del subpassion
que ahora os voy a explicar
exactamente lo que es
voy a quitarlo de domains
porque yo al menos
no lo voy a utilizar
pero bueno
que sepáis que se pueden utilizar
¿qué es lo que vamos a hacer con esto?
¿qué es lo que va a pasar con esto?
esto de forma automática
lo que va a hacer
es súper útil
lo que va a hacer
es que
vamos a encontrarnos
hostia
joder con el cambio este
vale
que nos va a crear
por ejemplo
nos va a crear
imaginamos que tenemos
bueno en este caso
tenemos comic
teníamos la ruta comic
y la id
pues pongamos
que tenemos aquí
comic
y la id
1,2,3
bueno pues esto
lo que nos va a crear
es tener la ruta
esta no
nos va a crear esta
comic 1,2,3
¿por qué?
esta sería en inglés
y esta sería
en castellano
¿vale?
¿por qué va a pasar esto?
bueno como le hemos dicho
que el lenguaje por defecto
es inglés
pues va a ocurrir esto
aquí como le hemos dicho
que es el
en castellano
también una ruta
pues nos va a crear
esta
subpath
¿vale?
es un subpath
esto sería como la forma
por defecto
luego lo que se puede llegar a hacer
es que por ejemplo
puedas conseguir
utilizar esto
tener como un prefijo
x
joder no sé por qué me pone esto
así
xkcd.com
por ejemplo
¿vale?
para tener
en un subdominio
tener la ruta
pero por defecto
lo hacemos con un subpath
y es bastante útil
porque para qué queremos más
si es que no tiene más sentido
hostia alguien
hostia sabitar
¿qué pasa tío?
muchas gracias
por esas 5 subs
madre mía
como la maneja
como se nota
como se nota
como se nota
que el hacking
da dinero
¿eh tío?
como se nota
que la vida basta
a mí no me da
para 5 subs
a mí no me da
no sé si es el hacking
o otras cosas
que te dedicas por la noche
sabitar
¿cuándo te vienes?
va
¿cuándo te vienes
y me enseñas desde cero hacking?
pongamos un día
¿te vienes el viernes que viene?
a esta hora
vente va
vente
y te doy yo 5 subs
no te doy 10
10 subs
te doy va
te doy 10
¿te atreves o no?
a ver si eres capaz de enseñarme
¿de cero experto en 10 minutos?
bueno en 10 minutos no
tampoco quiero ser experto
de cero
vamos a dejarlo
de cero a algo
de cero a algo
en unas 2 horas
ahí lo dejamos
¿qué te parece?
el próximo viernes
yo que sé
si
o si quieres
lo podemos hablar
por twitter
si no
el martes
el martes no puedo
porque tengo una charla
con hola mundo
que vamos a estar aquí
hablando en hola mundo
pero
si
pues otro día
sabitar
venga lo hablamos
yo cualquier día estoy disponible
vale pues
perfecto
y después del stream
pues nos podemos tocar
podemos hacer un montón de cosas
así que
cuídate de los desgarros
de sabitar
nada
esto
con un poco de crema
todo se pasa
así que
full desgarros
pues
venga lo hablamos
nos podríamos tocar un poco
la pilila
sí sí
bueno primero hay que encontrarla
y luego
y luego a ver
pero vale vale
me parece
me parece
si quieres la semana que viene mismo
pues hacemos aquí un stream
y nos enseñas desde cero
yo no tengo ni puñetera idea
yo seguramente
a lo que
a lo que aspiro
es que
habré metido un montón de vulnerabilidades
en lo largo
lo ancho y alto de internet
entonces me gustaría
que si alguien
alguien
hace estas vulnerabilidades
joderle yo la vida
si quieres podemos hacer eso
aprendiendo desde cero
a hacking
con sabitar
y no se me ocurre nadie mejor
pues te escribo
y lo hablamos
vale
muchas gracias por las 5 subs
por cierto
muchísimas gracias
crack
más crack
joder
es que este chico
lo tiene todo
hacking
dinero
chico guapo
encima regala subs
es que la hostia
venga vale
vamos a continuar
ojo que lo que te enseña
capaz es otro tipo de
pay programing
bueno
el pay programing que sea
el que sea
el que sea
sí sí
ahora donde está el hacker
del miércoles
vale
ah esto es lo del redirect
a ver que me la ha pasado
Facundo Capua
claro
es que
claro
es que cuando ves la documentación
igual se acorda uno mejor
de las cosas
vamos a ver
esto es lo del redirect
ta ta ta
vale
pero lo que me has pasado
local detection
disable
local detection
pero no hay
bueno
a ver
lo voy a enseñar
lo voy a enseñar aquí
o al menos aquí no veo
ningún redirect
no
pero o sea
me está
me está dando la razón
¿qué pasa aquí?
no hay un redirect
aquí no
no hay ninguna opción
que ponga que es redirect
me estáis engañando
no
lo que se hay es esto
¿no?
el local de detection
que lo puedes poner a false
igual me estoy equivocando
¿eh?
pero si
si me dices
donde está el redirect
lo miramos
lo miramos
también es raro
que la configuración de
aquí no
no lo ponga
porque por ejemplo
si ponemos
ves el domain
si el local detection
sí que está
pero redirect no
a mí no me suena
a mí no me suena
me puedo estar equivocando
perfectamente
porque no soy una máquina
no me acuerdo de todo
así que
el viernes me do
su mouse moverse
y su cuenta regalando subs
y él ni se entera
¿ves su mouse moverse?
¡ah!
hostia joder
espero que no
espero que no
vayas a evitar aquí
hackearme a mí
tío
que cago en la leche
que cago en la leche
vale
ya tenemos esto
con esto
ya tenemos los dos idiomas
hasta aquí
parece que bien
hay otra opción
que debes tener en cuenta
y es que
por defecto
lo que va a hacer
NextGS
es que
cuando entremos aquí
de hecho
vamos a verlo
en un momento
vamos aquí
a nuestro proyecto
voy a darle a inspeccionar
y te voy a enseñar una cosa
que es muy interesante
muy interesante
y que
que mucha gente
pasa por alto
y es el tema
de las cabeceras
fíjate que
cuando tú
cargas cualquier página
y tú haces una petición
a HTML
vale
aquí tenemos como un montón
de cabeceras
de solicitud
y todo esto
fíjate en esta
que pone
accept language
y pone
español
inglés
y esto no tengo
ni puñetera idea
qué es lo que significa
lo podríamos buscar
porque no me acuerdo
sé que sabía
lo que significa
what is the q
bueno aquí también
yo tengo el derecho
de aprender
tengo
no me acuerdo
que era el q
no me acuerdo
si era
como el tanto por ciento
factor weighting
exacto
mira que lo iba a decir
es como que
por defecto
es el español
y entiendo que
no sé si en este caso
se refiere al peso
que tiene el inglés
o se refiere a los dos
sabes
no sé si ahí
cuando lo está separando
a ver
ves
porque tendría que estar
separado con coma
falta una buena
preferencia
vale
o sea es la preferencia
que tendríamos
a la hora de
determinar lo de la izquierda
vale
en este caso
pues el inglés
0,9
me imagino que va hasta el 1
o sea un 90%
del peso que tiene
entonces
para qué sirve esto
hostia
no sé si se ve
así que se ve
menos mal
porque a veces me quedo
por encima
entonces
para qué sirve esto
para qué sirve esto
esto
esto sirve para nada
no hombre
sí que sirve
esto sirve
justamente para
muchas veces
desde el backend
poder saber
cuál es el lenguaje
que quiere ver
el usuario
el contenido
esto a ver
si tú te vas a facebook
te habrás dado cuenta
que
que por qué sale
de primeras en castellano
¿no?
esto es lo que pasa
en un montón de sitios
entonces
en este caso
nos va a servir
también aquí
porque lo que va a ocurrir
es que
next yes
va a hacer esta diferenciación
si la quieres quitar
puedes poner
local detection
lo puedes poner a false
por defecto
es true
y lo que hace
es que dependiendo
de si el usuario
lo que quiere es castellano
o lo que quiere es inglés
pues te va a redirigir
directamente
a la página
que debería ver el usuario
lo podemos ver
en un momento
porque si yo refresco
aquí los cambios
ves fíjate que me dice
oye que he encontrado cambios
vale lo sé
pues toma
vamos aquí a hacer esto
y lo que vamos a hacer
cuando refresquemos
es que
ves que me ha redirigido
automáticamente
esto lo ha hecho
automáticamente
¿por qué?
porque yo he puesto
mi navegador
si me pongo a buscar
aquí en configuración
no sé qué
en un momento dado
por aquí
no sé si es idioma
idioma
sí idioma
mira
ves yo tengo español
inglés
tú a esto le cambias
lo ves mover al principio
lo pongo arriba
ahora refresco
voy a refrescar
y lo que va a pasar
bueno en este caso
es que he entrado directamente
pero bueno
lo que va a pasar
es que sé que me queda
en el inglés
¿vale?
míralo otra vez
ahora voy a poner el castellano
que se lo muevo al principio
voy a refrescar
y fíjate
me ha redirigido al castellano
esto parece una tontería
pero es súper importante
esta es mucha
esta magia
funciona así ¿vale?
esto te lo explico
porque muchas veces me decís
yo quiero ser señor
yo quiero ser señor
por favor
señor Stark
yo quiero ser señor
pues aprende estas cosas
joder
aprende cómo funcionan
las páginas web por dentro
no en serio
esto marca la diferencia
porque esto te permite
en un montón de cositas
desde el backend
tú haces una petición al backend
te gustaría recuperar la información
de un idioma
un montón de cosas
entonces
estas cosas ayudan
estas son las cosas
que hay que aprender
madre mía
como me peta con las
cuando hago las transiciones
vale
perdona por gritarte
Guzmán Pedro
perdón
perdón
pero es que
como ser señor
en 5 minutos
aprende estas cosas
vale
ahora que ya sabemos esto
lo he dejado aquí
con el español
arriba del todo
y lo que vamos a hacer
es volver a por aquí
todo esto
tiene que servir para algo
porque ¿qué pasa?
pues que ahora no sirve para nada
si miramos nuestra página
ves que pone
latest comics
vamos a hacer una cosa
vamos a añadir aquí
nuestra traducción
vamos a ponerla
yo que sé
vamos a ponerla por aquí
vale
vamos a poner
translations
vamos a tener
por un lado
vamos a tener
el español
y por otro lado
vamos a tener
el inglés
y vamos a poner
por aquí
un objeto
y vamos a ponerle
podemos utilizar
las labels en inglés
y luego pues
traducirlas
últimos
comics
creo que va
con acento
y aquí pues
lo dejaríamos igual
¿vale?
latest comics
aquí hay dos estrategias
a la hora de traducir
una aplicación
puedes utilizarla aquí
con un idioma
por ejemplo
o sea
utilizando el valor
de un idioma
en este caso
normalmente se utiliza el inglés
otra opción
que tampoco está mal
es poner más bien
donde va a dirigir
donde se pone
pero ¿qué pasa con esto?
y hay que tener en cuenta
esto que esto a veces
puede ser un problema
si aquí ponemos
por ejemplo
home title
¿vale?
últimos comics
y aquí ponemos
home title
no está mal
no está mal
pero al decir
de dónde
lo ponemos
estamos perdiendo
la posibilidad
de reutilizar esto
¿ok?
¿cómo que no entiendes
nada de hack?
lo que estamos haciendo
señor Milu
no me siento muy bien
de hack
lo que estamos haciendo ahora
básicamente
hemos creado
dos archivos JSON
para las traducciones
de nuestra página web
entonces os estoy recomendando
cómo se tienen que trabajar
las keys
de estos objetos
es una recomendación
en este caso
por lo que yo
depende mucho
de la aplicación
de la web
y lo que sea
pero normalmente
normalmente vais a querer evitar
poner
dónde se utiliza la traducción
¿por qué?
porque este literal
se llaman literales
en este caso
latest comics
lo podéis utilizar
en muchos más sitios
¿vale?
muchos más sitios
no solo en la portada
en el título de la portada
sino que también
a lo mejor lo podéis utilizar
en una barra
en un menú
latest comics
latest comics
así se supone
que vais a estar ahorrando
precisamente
lo que sería
pues espacio
porque si no vais a estar
repitiendo todo el rato
vais a repetir cosas
y así traducís menos
¿vale?
hola amigo
te quiero
eres el mejor
y yo también te quiero a ti
pero el mejor no soy
me defiendo
mejor
es el mejor
es que además
el mejor
es el mejor
queda tan
no se puede ser el mejor
porque hay mucha gente
ahí fuera
por ejemplo
KenzyDots
KenzyDots seguro
que es muy bueno
aunque tampoco será el mejor
cada uno es el mejor
en cada cosa
entonces a lo mejor
en algo muy específico
puede ser el mejor
puede ser el mejor
en enseñar programación web
en castellano
desde mi casa
pero muchas gracias
te lo agradezco
me gusta tu recomendación
gracias Dartiles
dicho esto
ya tenemos las traducciones
¿vale?
vámonos a la página
nos vamos a ir a la página
donde tenemos justamente
la home
donde tenemos este
no sé dónde tenemos la home
aquí en index
¿vale?
aquí tendríamos el title
este latest comics
ahora aquí
no queremos utilizar
este latest comics
lo que queremos utilizar
es la traducción
¿cómo podemos utilizar
la traducción?
muy buena pregunta
pues lo que vamos a hacer
seguramente
sería crear un contexto
podríamos crear un contexto
yo creo que lo mejor
sería crear un contexto
vamos a crear un contexto
y así lo podremos utilizar
en todos los sitios
de la página web
¿vale?
vámonos por aquí
vamos a ver
vamos a crear el contexto
aquí
context
si no sabéis que es un contexto
no os preocupéis
porque lo vamos a tener
que crear de cero
así que
le vamos a llamar
i18n
le podéis llamar
como os dé la gana
¿vale?
o sea
no os preocupéis
y vamos a utilizar
el contexto
para crear un contexto
pues nada
importamos el
create context
hostia
me lo ha
me lo ha creado
de donde le ha dado
la gana
esto
vamos a
vamos a dejarlo aquí
con react
vamos a quitar esto
vale
hacemos el create context
y vamos a exportar
el i18n
provider
bueno el provider
si el provider
seguro que lo
necesitamos exportar
¿vale?
vamos a hacer un function
con el
i18n
provider
y esto
se le pasa al children
¿vale?
vamos a crear el contexto
por aquí
const
create context
ponemos por aquí
hostia
const
yo también
i18n
context
el contexto
básicamente lo que nos va a permitir
es poder acceder a esta información
desde cualquier punto
del árbol de elementos de react
¿vale?
así que nada
hacemos este create context
vamos a exportar este
i18n provider
y en esta función
lo que
podríamos
hacer
es devolver
esto ¿vale?
del i18n context
que hemos creado aquí
tenemos por un lado
el consumer
el consumidor
y por otro lado
el provider
el provider
es el que vamos a necesitar
utilizar
a la hora de
bueno
pues de
envolver nuestra aplicación
para pasarle esa información
así que vamos a poner esto por aquí
por aquí
vamos a dejarlo esto un poquito más así
y ahora veremos
cómo hacemos lo del i18n
y todo esto
vale
pues lo vamos a hacer así
ahora
el i18n provider
de dónde sacamos este
i18n
i18n
podemos llamar i18n
le vamos a llamar t
t de traducir
¿vale?
o de translate
o normalmente
de translate
pues aquí
lo que podemos hacer
es recuperar
en qué
en qué idioma estamos
para eso vamos a utilizar
el useRouter
de next.js
useRouter
lo ejecutamos aquí
y sacamos
el locale
¿vale?
vamos a importar aquí también
los dos
los idiomas
vamos a tener
el español
y esto
lo tendríamos que sacar
de
donde había puesto
translations
no he puesto las translations
¿por qué no me sale?
ah
digo
¿por qué no me sale la traducción?
vale
este y este
os tengo que avisar de una cosa
que esto es una buena práctica
cuando vuestra aplicación
ya es más grande
¿vale?
esto normalmente
en aplicaciones grandes
es un poco ñe
y te explico por qué
porque esto lo que hace
es que se trae
todas las traducciones
sí o sí
y es un poco rollo
entonces
hay técnicas para evitar esto
desde
detectar en el servidor
cuál es la que necesita
desde las dos
y cosas así
cuando tiene muy pocas traducciones
no vale la pena que lo hagas
complica bastante el código
pero en este caso
tenlo en cuenta
que si esto crece mucho
tendríamos que ver una forma
de evitar que se cargue las dos
se pueden hacer import dinámicos
puedes mirar desde el servidor
cuál de las dos
es la que se ha cargado
y si se cambia
pues hace un import dinámico
y cosas así
vale
entonces aquí tendríamos el local
lo que tendríamos que hacer aquí
pues tendríamos
puedo crear
puedo crear
básicamente aquí una
una función
bueno
no es exactamente así
el local
vale
vamos a hacer una función
a la que le pasamos
la key
vale
y a partir de la key
utilizando el local
lo que hacemos es acceder
si el local
bueno
más o menos
esto es ya más o menos
lo que habría que hacer
básicamente
con un switch
bueno
en este caso
crecería mejor un switch
¿no?
el día de mañana
otra cosa que puedes hacer
es un objeto
de estos que
que gustan un montón
¿no?
tendríamos aquí
los languages
y podríamos tener
el español
y el inglés
en lugar de hacer este switch
bueno
esto
siempre me sirve
me vale mucho hate
pero bueno
podríamos hacer
return
exacto
tendríamos languages
y luego
lo que haríamos es
acceder al local
que solo puede ser
es o en
porque esto lo controla
nextds
y por defecto
siempre va a ser el dn
entonces no vale la pena
como tal
hacer tú
el chequeo
de que realmente
es el inglés
no tiene tanto sentido
ya lo ha hecho
nextds por ti
entonces
podríamos hacer esto
languages
accedemos al local
esto básicamente
es el idioma
entonces en languages
que tendríamos
estas dos traducciones
iríamos a una u otra
y luego
lo que haríamos
sería ir a la de
a la key
a la key en específico
así que con este método
esto lo podemos pasar
en el context
lo tendríamos aquí
y ya lo tendríamos
vale
así que
esto sería
básicamente
el tema
ahora podemos hacer
un custom hook
bueno que hay cosas
estamos haciendo en momento
que hay cosas
odia los switch
no los odio
pero en este caso
me parece un poco innecesario
la verdad
me parece un poco innecesario
si me preguntas a mí
sinceramente
he hecho el provider
pero también podríamos
tener por ejemplo
por cierto
porque no hago un export
aquí directamente
en lugar de hacer esto
también podríamos poner
un export
function
use
y 18n
voy a hacer un custom hook
también a la vez
joder
madre mía
el hackopilot
me va a quitar
el trabajo de streamer
me lo va a quitar
me lo va a quitar
bueno
lo que hacemos aquí
a ver
podríamos hacer otras cosas
no sé si vale la pena
que os lo enseñe
va
os lo voy a enseñar
os voy a enseñar
una cosa
que es una buena práctica
que de hecho
es una buena práctica
que esto
lo recomendó
Ken C-Dots
y está bastante bien
y ahora te lo enseño
esto es un custom hook
ahora lo utilizaremos
que nos va a permitir
utilizar
este método T
que es el de traducción
ahora veremos
si todo esto
que estoy haciendo aquí
funciona
pero no tiene mala pinta
¿qué es una buena práctica?
pregunta Garciel
una buena práctica
es algo que deberías
estar haciendo
en tu código
o en tus funciones
o lo que sea
es una buena práctica
es algo que deberías
estar haciendo
una mala práctica
es como todo lo contrario
algo que no deberías
estar haciendo
venga
pues os enseño
una buena práctica
en este caso
no os voy a engañar
esto no es mi idea
esto es una cosa
que es muy típica
de Ken C-Dots
que lo puso en un artículo
y sinceramente
me parece bastante chulo
¿qué es lo que decía
Ken C-Dots?
bueno
lo que puedes hacer aquí
en este custom hook
pues tú aquí
recuperas el contexto
del i18n
vale
antes de devolverlo
y tal
lo que deberíamos hacer aquí
es hacer esto
hacer un check
que si el contexto
es undefined
deberíamos
exacto
es increíble
G-Hacko Pilot
deberíamos enviar un error
diciendo
oye
no puedes utilizar
i18n
si no
utilizas en el provider
el i18n provider
en la app
vale
de esta forma
te evitas problemas
te evitas por ejemplo
que alguien intente utilizar
este hook
y le pete
y no sepa
de donde viene el error
este error
es mucho más verboso
y ya te da una instrucción
de lo que tienes que hacer
justamente
vale
te dice
oye
cuidado
que tienes que hacer esto
que este contexto
para poderlo utilizar
necesitas hacer esto
a mi me parece
que está bastante bien
la idea
especialmente cuando son
hooks para consumir
vale
así que nada
ya aquí lo que podríamos hacer
podríamos devolver el context
directamente
que me parece buena idea
porque así luego
haremos
haremos importe
ahí
importe no
const
t
de use
y 18
haremos esto
y ya está
de hecho lo vamos a probar
vamos a probar
si esto funciona
y vamos a probar
este if
para que lo veamos
en funcionamiento
vale
en la home
donde tenía justamente
este latest comics
lo que voy a hacer
vamos a traernos
este
esta cosa de aquí
ostras
por cierto
que tengo una nueva extensión
pero creo que
creo que la voy a desactivar
¿veis esta cosa roja?
esta cosa roja
lo que quiere decir
en general
es que la complejidad
de esta función
es bastante grande
ya sabéis que a mí me gusta mucho
ir probando
extensiones
de Visual Studio Code
y este tipo de cosas
y esta es nueva
esta me la acabo de instalar
todavía no
todavía no estoy
del todo convencido
pero bueno
estoy en ello
acabo de llegar
¿qué está desarrollando?
estamos desarrollando
con Next.js
y
hemos hecho esta aplicación
y bueno
esta aplicación en realidad
es la excusa
es la excusa
para aprender Next.js
ahora estamos con el tema
de las traducciones
y las está explicando poco a poco
¿eso no es copilot?
no
esto rojo no es copilot
¿ves?
que pone
complete
esto lo que te dice
es como es la complejidad
de la función
pero bueno
tampoco es muy interesante
vale
entonces
utilizamos aquí
nuestro custom hook
para utilizarlo
lo hay que importarlo
entonces nos traemos
el método t
el método t
lo he creado aquí
¿vale?
no sale de la nada
igual esto
no sé si esto
a lo mejor
no, está bien
no hace falta
podríamos utilizar un use callback
pero tampoco creo
que sea interesante
porque podríamos hacer
un use callback
y que esto cambie
solo cada vez
que cambie el local
¿sabes?
cada vez que cambiamos
la traducción
mira, esto es un buen caso
de uso
es un buen caso
de uso
de hacer esto
hay un hook
de i18n
que se llama
use translation
bueno, pues nosotros
nos hemos inventado uno
use internationalization
bueno, si queréis
le llamamos use translation
pero bueno
no he leído
tu mensaje
ahora sí que lo estoy viendo
sí, me parece
en ese callback
mira, lo voy a quitar
el callback
y luego lo hacemos
y os lo explico
¿vale?
porque muchas veces
mucha gente no sabe
cuándo tiene sentido
utilizar el callback
y todo este tipo de cosas
el día que agarría
como lo hace Midu
me pasaré la vida
bueno, pues tampoco
estamos haciendo nada
del otro mundo
¿no?
¿cómo traducirías texto
que contiene números?
por ejemplo
mira los últimos 10 cómics
buena pregunta
lo podemos
lo podemos hacer después
podemos luego hacerlo
luego lo hago
¿vale?
señor real moreno
pero me dejas un like
ah no, que aquí no se dejan likes
pero lo hacemos
lo hacemos
que me parece interesante
no es muy difícil
a ver
a ver, voy a decir algo
antes de que continuemos
si se complicase mucho
el tema de las traducciones
de i18n
hay de sobras
muchas mejores opciones
que lo hagas tú
¿qué quiero decir?
que esta función t
que he hecho yo
que es bastante simple
tienes polyglot
i18n next
tienes un montón de opciones
que son mucho más poderosas
que esta
pero esto
prefiero enseñártelo
para que lo aprendas
para que veas cómo funciona
ya sabéis que una cosa
que me gusta
es enseñar cómo funcionan
las cosas por detrás
si yo empiezo aquí
a instalar dependencias
para que lo haga
pues al final es magia
y lo que te digo es
no, pues créetelo
créetelo
ah, si es así
no, bueno
pues creo que es interesante
que veas cómo funciona
¿vale?
venga
pues vamos con ello
venga
tenemos este t
que es la opción
vamos a utilizar aquí
nuestro hook
y lo ejecuto aquí
lo que vamos a hacer
es t
y hay que pasarle
la key de la traducción
que en este caso
sea latest comics
¿vale?
latest comics
perfecto
nos vamos a nuestra aplicación
bueno
este pt es normal
porque no importa
el use context
hombre
importar el use context
puede ayudar
puede ayudar
¿vale?
y el i18n provider
vale
fíjate
ahora me está dando
el error
me está dando el pt
que yo he puesto
dice
para utilizar
i18n
tienes que
tiene que estar dentro
de un i18n provider
este pt
es el que yo he puesto
en el custom hook
ves
en este de aquí
y ya di
ostras
pues ya está
ya
ya he caído
que este es el problema
vale
¿cómo solucionamos esto?
bueno
pues lo tenemos que añadir
¿dónde lo añadimos?
pues aquí
aquí vamos a añadir
el i18n provider
¿dónde estamos poniéndolo?
pues lo estamos poniendo
para envolver
toda nuestra aplicación
¿vale?
estamos envolviendo
nuestra aplicación
con este provider
así es como funciona
el contexto
tú
el contexto
lo creas
y luego
lo consumes
en la parte del árbol
que quieras
en este caso
lo estamos poniendo aquí
pero fíjate
que lo podría poner
perfectamente
sin ningún problema
lo podría poner aquí
¿vale?
¿por qué?
porque
lo que está envolviendo
es donde va a estar
disponible ese contexto
y en este caso
me da igual
que sea más arriba
más abajo
en este caso
ahí mismo
ya estaría bien
envolviendo este component
que este component
es toda la aplicación
así que perfecto
¿vale?
todavía no me acostumbro
al nuevo horario
bueno poco a poco
Matías
sí lo siento
lo siento
lo siento
lo siento
por eso
porque es que es complicado
pero es que en España
nos encanta tocar el horario
vale
pues ahora
quitemos esto
vamos a ver aquí
mira
ya lo hemos traducido
ya hemos hecho una traducción
desde cero
desde cero
ya está
¿por qué no necesita
el contexto en head?
vale
muy buena pregunta
Mr. Chu
a ver
no lo necesita
porque no lo está usando
¿vale?
el contexto
que acabo de crear
como podemos ver
aquí no estoy utilizando
la traducción
de hecho
si yo intento utilizar
aquí la traducción
imagínate que digo
ah
quiero utilizar aquí
el i18n
¿no?
este que he creado
use i18n
pues el problema
es que si yo guardo esto
pues me va a petar
bueno
me debería petar
vale
pues no me peta
no me peta
porque no estoy ejecutando
vale
imaginemos que aquí
pongo title
claro pues no me peta
title
whatever
¿vale?
esto me va a petar
me va a petar
bueno en este caso
me dice que tengo
esa función
porque no estoy ejecutando esto
me va a petar
con el mismo error
¿por qué?
porque en un plano superior
este componente
my app
este componente
my app
no está envuelto
en este i18n
provider
yo por muy arriba
que lo pongo aquí
no lo puedo utilizar
en este mismo componente
¿entiendes?
porque este mismo componente
este componente
my app
no está envuelto
por el provider
por lo tanto
no puedo utilizar
el consumidor
¿ok?
así que vamos
a dejarlo como estaba
pero es eso
es que en el head
no estoy utilizando
la t
podría hacerlo
¿vale?
podría por ejemplo
para que veamos
cómo podría tener sentido
que lo utilicemos
mira voy a mover el provider
ahora sí lo pongo en el head
pero imagínate
que tengo aquí un title
title
y aquí tendría el
quiero poner un título
por defecto
¿no?
título por defecto
si lo quiero utilizar
tendría que
utilizar aquí
un nuevo
un nuevo componente
head
voy a llamarlo
head
default
head up
¿vale?
vamos a poner aquí
podríamos hacerlo así
directamente
esto me lo llevo para acá
¿vale?
return
y ahora aquí
este default head up
al utilizarlo aquí
ahora aquí
sí que podría utilizar
la t
porque
está envuelto
por este provider
que tengo aquí
ahora sí aquí
sí que podría utilizar
la t
use y 18n
y 18nt
¿vale?
y lo que podría hacer aquí
es llamar a la t
y podríamos poner aquí
pues
título
por defecto
esto me da
me va a dar undefined
porque no existes aquí
¿vale?
o mira
deseo
default title
vamos a llamarlo así
y ahora lo hacemos
¿vale?
funcionar funciona
pero ves que me está dando undefined
no me lo está poniendo
no está haciendo absolutamente nada
también es verdad que este title
se está sobreescribiendo
por este title que tengo aquí
si lo quito
entonces
ahora sí que verás
que está undefined
para que veamos cómo funciona
voy a poner este
comics for developers
lo voy a quitar de aquí
que esto al ser
a nivel de página
piensa que estos componentes
de title
cuanto más abajo
más especificidad
¿vale?
entonces
si quisiera
tener uno por defecto
vamos a poner aquí
el seo title
tú tú tú
seo
no me acuerdo
seo default title
o seo title default
no me acuerdo
como le llamo
default title
ahora miramos
comics
para
desarrolladores
o
sí
desarrolladores
¿vale?
creo que lo había llamado
sí
no me acuerdo
cómo le llamo
seo default title
vale
seo default title
vale
y esto mismo
pues nos lo traemos
al de inglés
papapapa
lo ponemos por aquí
papapapa
comics
for developers
¿vale?
seo default title
entonces ahora
sí
como puedes ver
sí que tenemos el título
y ya está
lo que tienes que tener en cuenta
es que siempre tienes que estar
envolviendo
con el provider
allá donde quieras utilizar
el consumer
ya está
en vez de una función
¿no es mejor
usar un objeto
para tener autocompletado
las keys existentes?
es una buena
es un buen indicador
¿no?
lo que dice
Artiles
dice
ostras
¿por qué no utilizamos
mejor
en este caso
pues un objeto?
podríamos utilizar un objeto
podríamos utilizar un objeto
para algunos
¿no?
para decir
ostras
pues al menos
vamos a dejar que
que algunos tengan el objeto
pero ¿por qué se utiliza
normalmente un método?
se utiliza un método
justamente
porque
imagínate
antes alguien ha comentado
¿qué pasa si tienes un número?
¿no?
por ejemplo
a ver
si aquí teníamos la búsqueda
¿no?
teníamos la búsqueda
¿no?
teníamos dos resultados
para
y teníamos este
dos resultados
¿os acordáis?
tenemos dos resultados
para data
y el para
data
esto es una keyword
también
entonces
lo que se puede hacer
para tener
placeholders
tú lo que podrías hacer
es decir
bueno
pues vamos a poner aquí
search
o
o search
results
title
¿no?
podríamos tener aquí
por ejemplo
uno
resultados
para
y poner aquí
el dos
¿ok?
una vez que tienes esto
podríamos llegar a crear una función
gracias a las funciones
podríamos cambiar esa información
podríamos poner
y esto
results
for
dos
¿vale?
y aquí en el
en el i18n
en esta t
aparte de la key
podríamos pasarle
el resto de argumentos
¿vale?
y por cada argumento
que le pasáramos
¿no?
podríamos decir
vale
podríamos decir
ay no
el arcs
entonces ya no podemos
utilizar el arrow function
porque
si no
espérate
creo que el arcs
vamos a mirar
un momento
el arcs
y vamos a intentar
cambiar ese título
¿vale?
search
index
resource
for query
¿ves?
aquí que hacíamos esto
ahora en lugar de hacer esto
pues deberíamos utilizar aquí
el barra t
y 18nt
a ver si
ahora
18nt
tendríamos
t
tendríamos que decirle
la key
search
result title
y entonces
en lugar de hacer un replace
en el componente
que es como tú lo harías
¿no?
básicamente
con lo que tú dices
al final podrías hacer eso
¿no?
podrías hacer el
el replace
entonces podríamos hacer esto
y pasarle
aquí
todo lo que
lo que quieres tener
por ejemplo
results.length
y la query
y esto que tenemos por aquí
lo sacaremos aquí
ponemos esto por acá
vamos a ver
si más o menos
no funciona
por ahora
sale así
porque no hemos hecho los replays
y a partir de aquí
lo que
bueno
yo he utilizado este
pero bueno
se puede hacer de diferentes formas
por ejemplo
se puede hacer así
hay gente que lo hace así
¿vale?
esto depende del i18n
que estés utilizando
hay diferentes formas
¿no?
entonces una vez
vamos a ponerlo así
porque es bastante más fácil
cuando lo tenemos con la T
ahora es más fácil
así
arcs
lo tenemos por aquí
vale
data
perfecto
entonces ahora
lo que puedes hacer
es
bueno
vamos a poner aquí
el value
o la translation
vamos a evitar
el return
if arcs
punto length
es
no sé si se puede poner
sí
si es cero
entonces
return translation
¿vale?
madre mía
que estamos haciendo
un i18n
a tope
o sea
desde cero
y ya está
y ya está
pero en un objeto
podría ser
claro
pero en un objeto
ahí entonces
ya no tienes
en lo que dice Karim
es que
pero en un objeto
pondrías en el json
estarías poniendo
el método
normalmente eso es una cosa
que quieres evitar
poner aquí métodos
¿vale?
porque son json
entonces
podrías
podrías poner aquí
ponerte a hacer métodos
pero
yo os lo
no os lo recomiendo
normalmente se hace al revés
tener siempre
un contrato
único
para todas las traducciones
y luego
que
que si tú
tienes que pasarle cosas
las pasas
desde el mismo método
no que
según la key
unas son keys normales
otros son métodos
otros tienen dos
otros tienen tres
es un poco raro
¿sabes?
entonces
lo que vamos a hacer aquí
pues sería esto
¿no?
y luego
art.foreach
aquí vamos a poner
translation
podríamos utilizar
regs también
tendríamos aquí
el
value index
haríamos de la translation
un replace
de
esto
por el valor
espérate
porque aquí
he puesto
dos
espérate
ah
claro
claro
es que
al utilizar
lo mismo
que el
a ver
esto no
este
ahora sí
¿vale?
esto es para escapar
justamente este símbolo
porque al estar dentro
de un template string
se cree que quiero cambiar
el template string
¿vale?
esto sería el value
del value
no sé qué
para hacer esto
bueno
podríamos utilizarlo
en translation
igual
o podríamos utilizar
un red
en reducer
podríamos utilizar
lo que queráis
¿vale?
y devolver la traducción
bueno
estamos dejando
un i18n
bastante potente
a ver
no es
bueno
veo que
ha petado
o sea
que no funciona
bien por mí
porque no
ha hecho absolutamente nada
esto es porque
no está encontrando
esto
a ver
el value
aquí deberíamos ver
que el value
está
ves
dos data
pero
se me ha escapado
aquí el replace
con algo que
no estoy haciendo
a ver
el replace
¿cómo era?
vale
ah
es que es
index más uno
perdón
es index más uno
o podríamos dejar aquí
cero
que tiene más sentido
bueno
vamos a dejarme uno
¿vale?
ah no
pero tampoco era eso
porque si no
al menos uno de los dos
lo hubiéramos visto
¿no?
al menos uno de los dos
lo hubiéramos visto
a ver
vamos a dejar
el console.log
index no es cero
ya pero aunque
sea ese el problema
el siguiente
lo hubiera arreglado
¿eh?
ah
que no lo ha cambiado
ah
amigo
bien
¿quién lo ha dicho?
¿quién lo ha dicho?
Iván Lollivier
joder Iván
tío
estás en todas
estás en todas
efectivamente
en inglés
me lo había dejado
con esto
results
for
así que teníamos
dos problemas
muy bien Iván
muy bien Iván
tío
muy bien
muy bien
pero su fortuita
hostia
Santi Tobi
no sé
no sé si lo había
dicho tú también
bueno pues eso
a ver
que todo esto
mira la traducción
está mal
vale
ya lo ha arreglado
¿no?
mira
ya lo tenemos
y esta es la forma
correcta de hacerlo
¿eh?
esta es la forma correcta
porque muchas veces
he visto gente
que concatena
strings
por ejemplo
os voy a enseñar una cosa
¿no?
dice
solo traducen
esto de aquí en medio
esto de aquí en medio
¿no?
dice
pues en lugar de hacer esto
lo que hago es
results
mal
me gusta más el formato
bueno a ver
Facundo
el que os guste más
esto lo he puesto como ejemplo
antes he puesto el otro
os he puesto los dos
para que entendáis
que hay diferentes formas
de hacerlo
esto es una forma
muy con los prints
y tal
que se utiliza mucho
si os gusta más el otro
pero que
a mí me gusta más el otro
o sea este no
me gusta más el otro
pero lo he dicho
solo para que
lo sepáis
¿vale?
eso
que no hagáis
lo que no debéis hacer nunca
es esto
mal
results
es esto
results for
¿no?
y luego llegas
al javascript
y dices
yo que sé
hacéis un template string
con results.length
esto lo he visto
de veces
que no os lo podéis ni imaginar
esto está mal
por muchos motivos
¿vale?
esto está mal
por muchos motivos
y os voy a explicar
por qué
hostia
la verdad que
estoy pensando
estas cosas
no se explican
en cualquier lado
o sea
esto hubiera pagado
dinero de ver
vídeos de esta mierda
porque las traducciones
es una de las cosas
más complicadas
por la falta
de documentación
normalmente
a no ser que utilices
una biblioteca
y digas
ostras
me voy a copiar
todos los ejemplos
y ya está
pero tampoco
te los cuestionas
porque no entiendes
por qué
y aún así
están malas prácticas
las puedes hacer
las puedes hacer
normalmente
y esto lo he visto
así de veces
así que
sí traducciones
y fechas
entonces
esto no lo hagáis nunca
¿por qué?
porque esto
igual en castellano
y en inglés
tiene sentido
pero un día
vienen y os dicen
bueno
alemán
¿sabes que en alemán?
que esto a lo mejor
va al revés
que esto va al revés
que esto va al revés
que además
para el número
o tener en medio
o algo
bueno
o sea
una locura
y empiezas a ver
con otros ojos
todas las traducciones
que has ido haciendo
en lo largo
y en lo ancho
así que no
no concatenéis
en los componentes
esta es la forma correcta
y casi todas
casi todas
mira página
x de y
exacto
el típico página
el paginación
¿no?
que dices
página x de y
no la hagáis
sí
árabe
chino
japonés
pero hay veces
que ni siquiera hace falta
que sea
porque alguien me dirá
ah pero yo solo trabajo
en inglés
y en
y en
y en castellano
bueno
primero es que en mala práctica
lo segundo es que nunca sabes
nunca jamás sabes
cuando te pueden decir
de repente
alemán
porque empezamos a tener
un montón de usuarios
alemanes
yo que sé
no lo sabes
entonces
déjalo fluir
si lo puedes evitar
yo sé
tampoco vengo aquí
a decirte algo de
de que lo tienes que hacer
así o
pero bueno
yo te recomiendo
que sea así
vale
dicho esto
dicho esto
guaraní
claro
por ejemplo
¿qué sería?
¿cómo harías para que la palabra
result sea result
cuando el número es 1?
también se puede hacer
a ver
no lo voy a hacer
porque ya llevamos un rato
con 18n
Andrés
pero también se podría hacer
igual que hemos hecho aquí esto
muchas veces
lo que puedes hacer
es tener
es tener
plurales
¿cómo se pueden hacer
los plurales?
tú aquí en el
es
puedes hacer
¿cómo se podría hacer?
por ejemplo
imagínate que aquí
tenemos resultados
pues podríamos hacer esto
puedes hacer esto
puedes hacer esto
hay diferentes formas
de hacerlo
resultado
para tal
hay diferentes formas
de hacerlo
y ahora me podría volver
loco
pero una forma
sería esta
y dirás
¿cómo?
pero si esto es lo mismo
bueno
aquí esto es singular
esto es plural
esto es una separación
dentro de la traducción
de forma que tú
esta parte de aquí
lo que puedes hacer aquí
igual que tenemos key
podríamos pasarle
en lugar de los arcs
pues podríamos pasarle también
aquí un options
o le podrías pasar
por ejemplo
sí
mejor un options
¿no?
y en el options
podrías tener
el plural
dirías
plural
options
en el plural
o le puedes poner el count
normalmente se le pasa un count
¿vale?
y en el count
le podrías pasar
por ejemplo
si es uno
si el count este es uno
se quedaría con el primero
¿sabes?
o sea
es que al final lo voy a hacer
pero bueno
básicamente aquí
mirarías el count
no sé qué
no sé cuánto
se puede hacer
es que todo se puede hacer
en esto de las traducciones
y yo he visto una prueba técnica
por cierto
esto es un ejercicio
bastante interesante
de prueba técnica
y hay en una empresa
que esto que os estoy enseñando
lo piden
os dice
haz un método
i18nt
de traducción
y tienes que hacer todo esto
claro
tiene un poco de configuración
antes de usar
pero lo vale
claro
efectivamente
bueno
para una prueba técnica
te pido utilizar
framework react
ya sé que es una lib
en un framework
¿utilizarías bit
o lo montarías con webpads
desde cero?
bueno
yo utilizaría bit
y me enfocaría
en lo interesante
lo importante
eso haría yo
vale
pues
pues eso
que poder se puede
¿vale?
que todo tiene
todo tiene solución
con un poquito
de programación
y un poquito
de saber hacer las cosas
vale
continuemos
ya tenemos
las traducciones
no voy a poner
a traducirlo
pero ya hemos visto
que funciona
en este caso
ves
cuando estoy en castellano
pues me pone
últimos cómics
si me voy a la home
me redirecciona
como podemos ver
¿vale?
me redirecciona
y podríamos poner
el selector
para ir al castellano
inglés
eso sí
lo podríamos hacer
en un momento
porque
tiene un truquillo
a ver
se puede hacer
vamos a hacerlo
en un momento
utilizando el locale
podemos hacer locale
y creo que tienes
vamos a recuperar
vamos a utilizar
el view router
que es la forma correcta
como hemos visto antes
para poder recuperar
cuál es la localización
¿vale?
entonces vamos a utilizar
aquí locale
y también tenemos otro
que pone locales
locales
si eres español
locales significan
como unos recintos pequeños
donde se ponen las tiendas
no significa eso
locales
son los lenguajes
que tenemos configurados
entonces
podemos mirar
cuál es el
que tenemos ahora
justamente seleccionado
aquí tendríamos
en este caso
español
y aquí tendríamos
el resto
pues lo que podemos hacer
es mostrar links
¿ves?
aquí tenemos
este nav
¿para qué es?
ah porque esto es un nav
que había puesto por aquí
este resultado de búsqueda
me voy a cargar
este resultado de búsqueda
no por nada
sino porque
ahora no tengo ganas
de ajustar mucho
los estilos
y quiero hacer más cosas
entonces vamos a poner
justamente
vamos a recuperar
los
show locales
¿no?
entonces tendríamos
cuál es el local
el local actual
le puedes cambiar el nombre
si quieres
este es el local actual
y estos son todos los locales
podríamos
¿qué podríamos hacer?
podríamos filtrar
¿no?
filter
podríamos filtrar
que l
locales 0
no
locales 0
ah es que estos locales
filtramos
el que tenemos
ahora mismo
puesto ¿vale?
y esto
nos debería
decir
los
rest of
locales
por ejemplo
hostia
estoy pensando
en una forma
oh que bueno
una forma más fácil
de hacer esto
una forma más fácil
de hacer esto
una forma más fácil
de hacer esto
que curioso
esta es una forma curiosa
de filtrar
ah no
no no no
perdón
no no no
estaba pensando
una cosa loca
a ver
¿lo podríamos hacer?
vale
es que no se puede
no se puede
porque pensaba
que locales
era un objeto
pero es una array
entonces podríamos
haber quitado
justamente la key
que no queríamos
que tuviese
y ya está
pero bueno
ya lo estamos
haciendo así
ya está
ya está
lo dejamos así
entonces podríamos
devolver
por ejemplo
selected
locales
ponemos en locales
y rest of locales
esto
vamos a hacer
un console log
de esto
solo para ver
que funciona
vamos aquí
con la consola
vale
está tan bien
que ni siquiera
lo veo
porque no sale
ah porque no guarda
los cambios
no
ah espérate
que lo tengo
todo ocultado
jajaja
vale
selectes locales
español
rest of locales
pues tendríamos esto
¿no?
¿qué podemos hacer
de esto?
pues ahora que tenemos
un poco esta información
la podríamos mostrar
de forma que
podríamos hacer
el desplegable
un drop down
y todo esto
ah borra el option
gracias hombre
he dejado el option
uff la madre me parió
gracias
como no me quiero liar
¿vale?
no me quiero liar
en hacer el drop down
y tal
porque no es lo interesante
si es un objeto
no podrías usar
from entries
claro es que no es un objeto
es un array
entonces
podría
podría crear
un array
pero
de un objeto
de un array
pero es que no tiene mucho sentido
porque ya sí
se puede hacer perfectamente
lo que voy a añadir aquí
solo por añadir algo
¿esto qué es?
ay
es que he puesto esto
y esto sigue saliendo aquí
es que esto que he hecho aquí
no lo quería hacer aquí
lo quería hacer
en realidad
aquí
aquí
esto si intento
seleccionarlo todo
a ver
voy a intentar la cosa
y hago esto
oh
qué bueno
sí que se puede
nunca me acuerdo
que sepa hacer esas cosas
bueno
pero ¿dónde tengo el input ese?
basta ya
¿por qué me sale ese input?
ah
por este
la madre que me trajo
la madre que me trajo
digo
me quiero quitar el input
y lo que quiero
lo que tengo que editar
lo que tengo que comentar
es todo esto
vale
ahora
lo que podemos hacer aquí
justo después
pues nada
igual que tenemos esto
pues haríamos esto
¿no?
y pondríamos aquí
se supone
vamos a ver esto
¿vale?
porque hoy vamos a ver
un poco
vamos a ver un poco esto
ahora aquí alguien
podría decir
bueno
pues si quieres poner
el enlace
para el otro
podrías hacer
podrías hacer
esto
tenemos aquí
barra
espérate
que esto
hay que ponerlo así
¿vale?
y dentro un template
string
y aquí podríamos poner
pues bueno
voy a poner solo
el primero
podría haber más
pero voy a poner
solo el primero
si no aquí
debería poner una lista
de todos los locales
y tal
pero como he dicho
no quiero hacer el drop
y esto
pues decirle aquí
restos locales
cero
esto lo dejamos así
así
vale
restos locales
not defined
claro
esto hay que sacarlo aquí
que bueno
esto ya se puede hacer aquí
esto lo he hecho antes
para ponerle una función
y tampoco
es necesario
vamos a dejarlo así
vale
y ya tengo aquí
el inglés
¿no?
a ver
sí
tengo el inglés
entonces como puedes ver
además funciona mal
porque lo concatena
bueno
por un montón de historias
de que está funcionando fatal
está
o sea
esto no es la forma correcta
¿no?
el concatenar
porque como podemos ver
no
esto no está tirando
sí que ves
que me pone aquí
latest comics
como que funciona
pero me ha dejado ahí
el es
o sea fatal
esto no se hace así
¿cómo se tiene que hacer esto?
esto en realidad
lo que tienes que hacer
con el link
es decirle
vale
link
tú lo que tienes que ir aquí
es ir a la home
tú le dices
yo quiero ir a la home
y luego
tiene aquí
una prop que es locale
y le dices
cuál es el idioma
bueno
este sería restos locales
cero
entonces
tú lo que le dices es
quiero ir a la home
y quiero ir en el idioma tal
eso es lo que tienes que hacer
entonces tú aquí
ahora
si nos vamos a la home
pam
ves me voy al inglés
y ahora fíjate
que sí que ha ido al inglés
ahora tengo el botón
de ir al castellano
le das al castellano
y ahora sí me ha ido al castellano
o sea
tú le tienes que decir
a qué página tiene que ir
y en qué idioma tiene que ir
no
jamás
nunca
que esto es otra cosa
que he visto un montón de veces
es un bueno que he visto un montón de veces
nunca
tienes que crear tú la url
porque no tiene sentido
que creas tú la url
no tiene sentido
no tiene sentido
y es muy peligroso
además que muchas veces
ni siquiera vas a ser capaz
de saber la url
porque
o sea
es muy complicado
complicado
tú le tienes que decir
a dónde tienes que ir
¿vale?
ahí le tienes que decir
yo quiero ir a la home
en castellano
quiero ir a la home
en inglés
en lo que sea
pues ahí lo tienes
¿vale?
súper importante
súper importante
así que
así es como haríamos
esta navegación
¿qué le dijiste al inter
que se escapó y ya no funciona?
creo que ni lo configuré
así que
a un curso bueno de 18n
la vida
el trabajo
el trabajo
no la compliquemos
efectivamente
no la compliquemos
pues esta sería la forma correcta
¿vale?
y si alguien se pregunta
ah el use callback
vale
hacemos el use callback
vamos a hacer un poco
de optimización
es una tontería
pero en este caso
igual tiene sentido
el prefijo de la ruta
para el idioma
siempre tiene que estar
al principio
cibran 92
por ejemplo
yo si estoy aquí
y ahora voy navegando
¿vale?
no sé por qué
no me he encontrado
esta ruta
no sé por qué
no he encontrado
esta ruta
pero no sé
si es porque
nos hemos cargado algo
a ver
voy a ir al inglés
voy a ir aquí
aquí sí que me he encontrado
pero ves que no me he encontrado
la ruta
ah
no me he encontrado la ruta
igual porque pasa lo mismo
vamos a verlo
vamos a verlo
porque es raro eso
puede ser
hostia no
es que esto es súper importante
es que esto
ostras
amigos
espérate
que es que el next.js
tiene muchas cosas chulas
pero esto
esto no te arregla solo
esto no es increíble
pero no necesariamente
quieres ir al slash
que tal si yo quiero ir a la página
en la que estoy
pero en español
pues igual
igual
mira
ahora lo arreglamos eso
¿vale?
me apunto eso
mira
voy a hacer
el use callback
y miramos todo eso
todo eso ¿vale?
mira
primero
use callback
y 18n
¿qué pasa con esta función?
esta función
cada vez
que se actualiza
este provider
por lo que sea
bueno por lo que sea no
cada vez
que el locale
cambie
se va a volver a generar
esta t
ahora
yo viendo este código
sinceramente
yo no utilizaría
el use callback
¿por qué?
porque no
no se ve que tenga mucho sentido
¿entiendes?
no se ve que
que esta función
se vaya a regenerar
cada vez que se renderice
este provider
porque no tiene pinta
de que se vaya a volver a crear
pero
si te quieres asegurar
o porque crees que hay un problema
de rendimiento
porque sabemos que esto
está en un árbol
en el que no se va a volver
a actualizar
lo que vamos a hacer
en cambio
es ponerle un use callback
¿cómo ponemos un use callback?
pues en el método
que queremos asegurarnos
que eso lo generamos
cuando cambia una dependencia
así que ponemos aquí
un use callback
¿vale?
es un hook de React
así que
ahora lo importamos de arriba
bueno no sé por qué
me lo trae de aquí
pero
vamos a dejarlo así
use callback
¿vale?
y este use callback
lo que va a hacer es que
en lugar
de
regenerar
esta función
cada vez que se renderice
este contenido de la función
le vamos a decir
no
esta función
que hay aquí
en el
como parámetro
del use callback
solo queremos
que se regenere
cuando
cambie el idioma
que es que tiene sentido
porque si miramos
el método
veremos que
la única
dependencia
que tiene aquí dentro
sería justamente
el lenguaje
el local
la key
le viene como parámetro
por lo tanto
este método
no hace falta
volverlo a generar
hasta que no cambie
el local
eso sería el tema
de esta forma
lo que estamos haciendo
es optimizar
el
bueno
el rendimiento
no solo actualizar
el rendimiento
una de las cosas
más importantes
en realidad
es evitar problemas
no se hace solo
por un tema de rendimiento
se hace por un tema
de problemas
que puedas tener
porque al generar
constantemente
una función
lo que puedes hacer
es que si intentas
comparar
si ha habido cambios
en un componente
pues siempre te va a decir
que ha habido cambios
porque la función
que le devuelve
siempre es nueva
entonces no puedes
hacer una comparación
limpia
¿vale?
¿cuál sería la diferencia
con un useEffect?
¿todas?
¿en ZOA?
¿todas?
no tiene nada que ver
o sea el useCallback
es para memorizar
memorizar
una función
y en cambio
el useEffect
sería para ejecutar
código arbitrario
cada vez que ocurra
un renderizado
en tu componente
¿qué diferencia
entre useCallback
o useMemo?
el useCallback
sería justamente
para funciones
el useMemo
solo sería
para valores
es más amplio
el useMemo
de hecho
el useCallback
podrías
simularlo
con un useMemo
lo que pasa
es que el useMemo
el useMemo
no es lo mismo
el useMemo
sería más bien
para valores
por ejemplo
imagínate
que lo que quieres
es calcular
o filtrar
en un array
de 10.000 elementos
pues con el useMemo
podrías decirle
vale
filtra
este array
solo si ha cambiado
estas dependencias
pero también
obviamente
podrías llegar a hacer
con el useMemo
podrías simular
el useCallback
lo que pasa
es que el useCallback
te permite
hacer un contrato
mucho más limpio
y mucho más fácil
mucho más fácil
a ver
que Rush
es la primera vez
que participa en el chat
Midu ¿cómo estás?
bien
gracias por preguntar
Rush
soy Gerba de Uruguay
te escribo
hace poco vi tu vídeo
de cómo comenzaste
con programación
me inspiró
para continuar
metiendo porfolio
y tirarme al agua
del mercado laboral
para que te hagas una idea
soy sociólogo
y vengo de un mercado
poco relacionado
con esto
ya me imagino
bueno Rush
pues Rush Gaming
mucho ánimo
dale cañita
que al final
es una carrera
de fondo
no pierdas
no pierdas
la esperanza
sigue mejorando
sigue subiendo de nivel
aquí estaremos
para ayudarte
en lo que sea
y nada
muchas gracias
por ver el vídeo
y por haberte pasado
muchas gracias
¿cómo manejas
tener urls
para diferentes idiomas?
en este caso
no tienes urls
por diferentes idiomas
lo podrías llegar a hacer
pero no lo tenemos
y de hecho
no sé
tendríamos que hacerlo
en otro punto
ya no lo haríamos tanto
en esta parte
de NXDS
podríamos utilizar
MyDelWars
para traducir
las urls
lo que tienes que tener
en cuenta
es que hay una parte
por ejemplo
tú puedes tener
el cómic
podríamos decir
que esto
no lo traduces
pero aquí
que pone ID
tú en realidad
aquí podrías tener
como el Slack
el Slug
se le llama
se llama Slug
porque luego me preguntáis
Slug
Slug
Slugify es lo que se suele hacer
entonces tú podrías pasarle
en lugar de la ID
le podríamos pasar
un, dos, tres
la ID
guión
y el título
en castellano
cómic
o
cómo hacer
cómics
bla, bla, bla
esto es súper
esto también es súper importante
es que la vida
la vida es complicada
a ver
lo que haces con esto
imagínate
Slug
en inglés
en castellano
esto es la vida
hay tantas cosas
a enseñar
en el mundo de la programación
espera
un, dos, tres
how to make cómics
y bla, bla, bla
¿vale?
estos son dos Slugs
o sea, dos Slugs
es que se dice Slug
pero entonces
tú lo que haces aquí
tú lo que haces aquí
es que
este Slug
dices
ostras
pues lo que voy a hacer es
un, dos, tres
punto
cómo hacer
tú recuperas
la cosa esta
y lo que haces es un Slug
no, no Slug
no, cómo se hace esto
un Slug
bueno, pues
puedes hacer un Replace
puedes hacer lo que te dé la gana
pero lo que puedes hacer
por ejemplo
para que lo entendamos todos
lo que
esto no sé si
sería lo que queremos
no, yo creo que no
podría hacer un Split
y quedarte con el cero
mira
esto
básicamente
y esto
tanto en inglés
como en castellano
ves
la URL
estaría traducida
pero lo que harías
es conseguir
tener la ID
mira
vamos a verlo
esto
voy
voy ya
un momentito
que voy a
ponerme bien
y voy a abrir
el Ranges
un momento
Ranges
es que he quitado
tantas cosas
vale, ya está
hago Ede
y te podrías explicar
en más detalle
para qué sirve
use callback
es que no hay más detalle
es que
solo sirve para lo que he explicado
o sea
para generar
para evitar
que se vuelva a generar
la función
punto
eso es para lo que sirve
no sirve para nada más
no se usa use memo
con use context
pues a veces sí
a veces no
es como dijeras
no se usa use state
en un componente
pues a veces sí
a veces no
así que
no es
no se usa
ya está
o sea se usa
depende
use memo
quieres memorizar
un valor
para evitar
que se calcule
cada vez
que se renderiza
el contenido
dependiendo de dependencias
pues si es sí
pues lo usas
si es no
pues no lo usas
vale
entonces
¿cómo guardas los strings
a traducir?
no es que
tú al final
este tipo de cosas
o no las traduces
o vienen de base
o sea
o las traduces
y vienen de base
de datos
o dejas que se puedan poner
cualquier cosa
de hecho esto
podría buscar ejemplos
que pasa esto
bueno el tema
el tema
que aquí si ponemos la ID
la ID
¿vale?
vas a ver que tenemos
1, 2, 3
o sea
tú tienes
tendrías por ejemplo
HTTP
HTTPS
Facebook
esto lo hace un montón
de páginas
Facebook
yo que sé
Facebook
yo que sé
el diario
punto es
noticias
y lo tienes aquí
1, 2, 3
el rey
deja
su cargo
¿vale?
entonces
¿por qué poner
1, 2, 3?
esto cuando lo veáis
lo vais a identificar
un montón
pues este 1, 2, 3
es porque es la ID
es porque es la ID
entonces no utiliza
tanto esto
que también puede utilizarlo
a veces
esto también se puede utilizar
pero hay veces
que ponen la ID
justamente por esto
¿vale?
esta ID
¿por qué os creéis
que pone la ID
por ahí en medio?
pues no la ponen
no la ponen por gusto
ya lo digo yo
voy a intentar encontrar
un ejemplo
ah
que esto no es un ejemplo
va a ser complicado
pero no imposible
encontrar un ejemplo
vamos a ver
a ver
a ver si aquí
en Airbnb
ah
es que
es que ya pasa
la gente
es que ya pasa
hasta hacer estas mierdas
porque mira
Airbnb
¿ves?
es que tiene rooms
y aquí ya tiene la ID
y tal
pero a veces
hay sitios
donde por temas
de deseo
intentan poner aquí
apartamento
en la
cerdaña
francesa
es que
mira
fotocasa
fotocasa estoy seguro
que lo hace
estoy seguro
sé que me sale mal
pero es que sé que
fotocasa lo hace
porque
es de mi empresa
y sé que los hacen
¿vale?
vale
esto es una búsqueda
o sea que aquí no tiene sentido
pero si vamos a un detalle
mira
mira
bueno en este caso
en este caso
fíjate que ha utilizado aquí
calefacción
terraza
piscina
todo esto
todo esto
todo esto no sirve para nada
¿sabes?
esto no sirve para nada
esto está en la URL
solo por estar
porque lo pone ahí
pero la ID
la tiene ahí
es que la ID es la clave
la ID es la clave
porque si no es lo que dices
¿cómo traduces?
pues esto
tú lo pasas al inglés
y vas a ver
que la URL se traduce
porque traduces
esas cosas
pero lo importante
¿ves?
todo eso
hitting
no sé qué
pero lo importante
¿qué es?
la ID
y ahí está la ID
y es que la ID
es la clave
si no
imagínate
en todos los
hay sitios
por ejemplo
yo que sé
hay páginas web
que es muy difícil
que puedan traducir
todas las URLs
coño
perdón
es muy difícil
muy difícil
coño
¿qué pasa aquí?
es que estoy
entrando a
de tu
y me redirigui
estoy flipando
ah vale
es que
es la
es la
es la
dice
has estado trabajando
y le he dado aquí sin querer
y me ha abierto una cosa chunga
me ha abierto una cosa súper chunga
a ver aquí
si esto lo tienen
vale
vale
fíjate aquí
vale
aquí
lo que pasa
es que utilizan el Slack
directamente
¿por qué?
ah
igual
ojo
ojo con esto
¿ves esto?
que no tiene nada que ver el título
¿para qué es esto?
¿para qué es esto?
¿sabes?
pues aquí
aquí tienes un ejemplo
¿por qué?
porque el título puede cambiar
el Slack puede cambiar
pero
aquí tendríamos esto
ese trozo
lo han puesto ahí por algo
¿no?
a ver aquí
mira aquí otra vez
esa
esa es la idea
pues
es la idea escondida al final
o sea
en este caso
van a traducir todos los títulos
no
obviamente
así que
uy
he cerrado
¿he cerrado todo?
no
¿qué he hecho?
vale vale
solo he cerrado esto
vale
es la idea hasheada
claro
¿cómo lo recuperas en ese caso?
pues es que lo mismo
pero si lo estoy explicando aquí
si es que es lo mismo
es lo mismo
pues mira
le haces un reverse
es lo mismo
reverse not a function
vale
porque esto es con el split
bueno
o sea
el reverse hacia aquí
vale
1, 2, 3
lo mismo
ya está
aquí lo tienes
aquí lo tienes
es lo mismo
lo mismo
o
mira
exacto
como ha hecho
Cobrita
lo podemos pasar al
podemos hacer esto
esto no funciona
ya hubiera sido increíble
eh
all
creo que hay que hacerlo así
no
no
esto no funciona
es que creo que lo que tienes que hacer
es sería al revés
habría otras formas
ah no
espérate
no
no funciona
ya decía yo
ya decía yo
me has engañado
me has engañado
ah tengo dos puntos
no
entonces
joder
cómo se nota
¿qué está pasando?
res
element más bi
de las element
vale
ahora estoy seguro
que me habías engañado
falta otro punto
cuatro puntos
no no
el último tiene que ser el rest
no funciona así
esto sería increíble
que funcionase
ojalá funcionase
el día
o sea el día
la idea
en realidad
hay otra forma de hacerlo
que es mucho mejor
que sería
básicamente
así
ah no
eh
espérate
no sería así
espérate
no sería así
pensaba que esto
sí que iba a funcionar
a ver idea
¿esto qué tiene?
esto tiene esto
add
menos uno
ah vale vale
sí que ha funcionado
sí que ha funcionado
sí esto sí que ha funcionado
o sea
hacemos el split
y sacamos el último
esto sí
parecía que no funcionaba
pero porque no me estaba
enseñando la idea
pero ahora
ahora sí
hostia
ahí ves
uno, dos, tres
ahora sí que está funcionando
le decimos
at menos uno
y ya está
así que ya está
ya tendríamos
vamos con
vamos con más cosas
porque no hemos solucionado
todos los problemas
amigos
esto es también súper importante
para Next.js
las traducciones
y trabajar en estático
si entramos en
en castellano
a un
que no lo encuentra
me dice que no lo encuentra
que la hemos liado
que no lo encuentra
lo hemos roto
lo hemos roto
madre mía
qué de cosas importantes
tiene Next.js
con el tema de las traducciones
la madre del trabajo
y luego
antes
alguien también me ha preguntado
una cosa
de si quiero ir
a la misma ruta
lo vamos a mirar también
¿vale?
pero primero
vamos a arreglar esto
¿por qué está pasando esto?
¿por qué me está petando?
si la ruta es lo que
os he prometido
desde el principio
os he dicho
oye ¿no?
que esto va en castellano
pasa una cosa
si habéis estado
en clases anteriores
si habéis estado
en clases anteriores
habréis visto
que hablamos
del GetStaticPath
y del GetStaticProps
pasa una cosa
cuando tú estás
generando páginas
¿petó?
¿petó?
si no ha petado
pero está controlado
está controlado amigos
exacto
porque en el StaticRendering
le hemos puesto
rutas generales
¿vale?
estamos generando rutas
¿veis que lo pone por aquí?
pone GetStaticPath
entonces
esto no genera
las rutas
por arte de magia
no la genera
por arte de magia
por desgracia
no la genera
por arte de magia
¿qué significa esto?
esto lo que significa
es que
vamos a tener que generar
aquí también
con todos los locales
o sea
con los dos locales
vamos a tener que hacer
por ejemplo
podríamos hacer
podríamos
aquí recuperamos
los locales
esto es una información
que tenemos aquí
los locales
son los idiomas
que tenemos
y aquí debemos
indicarle
de cada uno
cuál es la traducción
¿por qué hacen esto?
claro
porque imagínate
que esto es un blog
pues tú
si tienes dos idiomas
seguramente vas a querer
recuperar
los artículos
de tu blog
en dos idiomas diferentes
si no lo quieres hacer
igualmente
tienes que generar
las dos rutas
porque las dos rutas
se van a renderizar
diferente
en una con las traducciones
en castellano
y otra con las traducciones
en inglés
entonces
una vez que tenemos
los locales
lo que podemos hacer
básicamente creo que esto
es un array
si no me equivoco
así que podríamos
bueno
aquí tendríamos
aquí tendríamos
un array
¿vale?
con todos estos
con estos
¿vale?
tendríamos un array
con estos
es que estoy pensando
o en hacer esto
dos veces
o podemos hacer un reducer
bueno
pero es que no
quiero hacer un reducer
quiero hacer un reducer
entonces
tendríamos
si hago un map
eso sería de dos
podría hacer un for each
podría hacer un for each
o podría hacer un concat
podría hacer un for each
vale
vamos a hacerlo
vamos a tener
todos los paths
vamos a hacerlo rápido
así
locales
.for each
¿vale?
y aquí tendríamos
el locale
que es el idioma
¿vale?
de cada uno
de los idiomas
lo que tenía el path
este concat
lo que deberíamos hacer
podríamos dejar el map
que esto ya estaría
teníamos path.concat
y concatenar
lo que hemos creado
hasta ahora
y aquí en params
deberíamos pasarle
el locale
el locale
que le hemos indicado
o sea
hacemos una iteración
de los locales
en este caso
locales
esto sería
un array
con es
para cada uno
lo que hacemos
es concatenar
en path
concatenar
este array
de aquí
y este array
de aquí
lo que nos va a dar
es un array
de objetos
donde tenemos
todos los parámetros
de las ideas
y el local
que en algún caso
esto será
en castellano
y en otros casos
será en inglés
y con esto
si no me he equivocado
deberíamos
tener
en los paths
ahora
tanto en inglés
como en castellano
¿vale?
redax
reducer
tampoco
creo que
quede mucho más legible
con un reducer
tienes que generar
las rutas
para cada local
bueno
lo que acabo de hacer
me parece algo
súper imprático
¿verdad?
hasta que punto
es más práctica
guardar el local
el storage
es que esto todo
me parece un lío
muy imprático
mira Zimbran
todo lo que estamos viendo
o sea
me parece muy poco
o sea
imprático
la pregunta sería
¿cómo harías
¿cómo lo harías
en otro sitio?
¿cómo lo harías?
¿sabes?
¿cómo harías
realmente
apuestas?
hostia
venga
vamos a hacer una apuesta
¿cómo harías esto?
de otra forma
que
tengas todas las rutas
que
estemos generando
los archivos estáticos
o sea
la verdad
es que todo esto
lo está haciendo
bastante
mira
Nazasol dice
reducer
me cuesta todavía
entenderlo
por eso no lo he hecho
normalmente con el reducer
funka o no funka
a ver
cómo se hacen las predicciones
venga
vamos a hacer
una predicción
va a funcionar
la primera
va a funcionar
la primera
claro que sí
confío
venga inicia la predicción
ahí lo tenéis
vamos
predicción
entonces
la verdad
es que entiendo
que es impráctico
si no queréis
hacer más de un idioma
y no tenéis que hacer
nada de esto
si vais a hacer
solo un idioma
en vuestra página web
pero cuando queréis
hacer dos páginas web
es que es inevitable
y claro
aquí
de alguna forma
le tenemos que decir
los dos idiomas
que queremos generar
le tenemos que decir
oye
para los que me quieres
es que imagínate
yo aquí
porque estoy yendo
los cómics aquí
pero si fuesen artículos
estarían traducidos
en dos idiomas
guau
que grande
aquí un montón de gente
confiando
yo ya no confío
no
dios
¿por qué?
¿por qué no confías?
la última mi dolor falló
pero igual seguiré apostando
por él
gracias
chavimón
vamos
a ver
voy a predecir yo también
a ver si funciona o no
voy a votarme a mí mismo
voy a votarme
en la reserva
43.000
¿va a funcionar?
¿sí o no?
¿y qué tengo que hacer yo aquí?
¿no puedo votar?
ah sí
un 85% confía
dios
dios
85% confía
que grande
claro que sí
confío
lo siento
pero no
dios
no
los streamers
no pueden hacer una predicción
en su propio canal
no puedo
ostia
un 86% confía en mí
dios mío
qué presión
qué presión
qué presión
espero no fallar
amigos
no quiero fallar
no quiero fallar
100.000 puntos
se están apostando
100.000 puntos
aquí
las apuestas
son de
100.000 puntos
oye
es una pena
que no pueda
mostrar las predicciones
aquí en la pantalla
sería genial
sería genial
apuesto
24.000 puntos
madre mía
Cibran dice
puede ser al final
y al cabo
no tengo experiencia
seguramente cuando lleve un año
peleándome en webs
con los lenguajes
claro
¿sabes qué pasa Cibran?
y esto es verdad
hay mucha gente
que nunca llega a pelearse
con idiomas
hay gente que nunca
nunca
¿sabes?
nunca lo ha visto esto
nunca
es un conocimiento
bastante interesante
para tener
a mí me parece
bastante interesante
entenderlo
todo lo que hemos hecho
por ejemplo
pero
no sé
entiendo que hay gente
que es que no lo ha visto
nunca
hay gente que tiene años
de experiencia
y que no lo ha visto
en la vida
así que
tengo una pregunta técnica
si tienes una aplicación
con internacionalización
ejemplo
Uber Chile
Uber España
Uber Francia
¿tendrías un proyecto
para cada país?
normalmente
en ese tipo de
empresas
pueden pasar dos cosas
pongamos el ejemplo
de Amazon
¿vale?
porque Amazon
sí que lo sé más
Amazon tiene diferentes proyectos
pero ¿qué pasa?
que tienen diferentes
tienen diferentes proyectos
mismos componentes
¿sabes?
o sea
tú vas a Amazon
y lo vamos a ver
en un momento
vamos a Amazon.com
¿vale?
Amazon.com
y Amazon.d
entonces
hostia
en este caso
igual
han empezado
igual
tienen ya el mismo proyecto
ojo
antes no era así
antes no era así
¿sabes?
antes había más diferencias
por ejemplo
y lo que tenían
son exactamente
los mismos
no siempre
los mismos componentes
pero a veces pasa eso
que
tienen diferentes proyectos
¿por qué?
porque a lo mejor
el detalle
de
es que aquí por ejemplo
Amazon.k
vamos a ver esto
igual
lo han unificado todo
igual
lo han unificado todo
antes no
ni siquiera los detalles
eran tan iguales
o no sé si es que
me está detectando
pero no
lo han unificado bastante
antes incluso
el CSS era un poco distinto
pero había componentes
por ejemplo
el botón
las cosas que
sí que se veían distintas
o sea
se veían iguales
entonces
hay veces
que es que depende
depende de un montón de cosas
hay veces que sí que
quieres tener
quieres tener
el mismo proyecto
en diferentes idiomas
pero hay veces que es tan grande
tan grande
que quieres tenerlo
por regiones
¿sabes?
por ejemplo
hay veces que tienes
uno en EMEA
otro en otro sitio
depende
depende de proyecto
depende de un montón de cosas
mientras no te vuelvan 500
lo damos por bueno
ah claro
la otra forma
sería tener un archivo array
con todos los strings
en su respectivo idioma
y según es local
y usas el respectivo archivo array
eso lo he visto en muchos juegos
para las traducciones
o la localización
de la UI
un archivo array
con todos los strings
bueno
es parecido
¿no?
a lo que hemos hecho
no sería parecido
más o menos
pero con un objeto
si falle
me haré más fuerte
en las aplicaciones móviles
es parecido
también depende
también pasa exactamente
lo mismo
yo creo que
normalmente
también puedes tener
aplicaciones
para una región
en concreto
sabes
tú puedes decirle esto
no me lo publiques
en tal sitio
de hecho
en mi empresa
lo hacemos
en mi empresa
lo hacemos
con España
e Italia
así que
es complejo
hacer subdominios
en Nexties
para hacer subdominios
necesitas
necesitas
otra cosa
prefiero siempre
obtener locales
de navigator language
mal
vamos a ver
Vladex
dice
prefiero siempre
obtener
el locales
de navigator.language
eso en realidad
no está bien
del todo
no está bien
¿por qué?
porque el navigator.language
solo está disponible
en el cliente
eso para un proyecto
tuyo en tu casa
o alguna cosa pequeña
puede estar bien
te puede funcionar
puede ser suficiente
pero para proyectos
grandes
y
corporativos
donde se trabaja
no es suficiente
no se puede utilizar
el navigator.language
no solo eso
sino que por temas
de SEO
tampoco tiene sentido
si tú utilizas
el navigator.language
el problema que tienes
es que tus rutas
eso significa
que lo traduces
en el cliente
y lo que te va a pasar
es que tus rutas
van a estar
en los dos idiomas
no le sabes indicar
a Google
cuál es el idioma
realmente
al que corresponde
tu ruta
y eso en realidad
lo puede liar
más que otra cosa
entonces
entiendo lo que quieres decir
porque es mucho más simple
pero es simple
porque solo lo puedes utilizar
en proyectos realmente simples
o en proyectos
que realmente no
vayan a
a tener servidor
servidor
rendering
que van a tener
cierta entidad
ahí está
venga
midu panic
si si estoy nervioso
siento que se te escucha
más bajo
es que se me escucha
más bajo
se me escucha más bajo
porque me decían
que petaba
el sonido antes
entonces lo bajo
un poquito
según mi dudez
no he trabajado
no he dicho que no trabaje
me refiero
que a lo mejor
hay gente que trabaja
que lleva años trabajando
y no ha tocado el i18
en su vida
en su vida
no saben ni para qué es
venga va
vamos a ver
vamos a ver el resultado
a ver que
a ver que
venga
nervios
nervios
nervios
vamos
he guardado los cambios
no guardar los cambios
no vale
ah
espérate
que a lo mejor
a lo mejor
tenemos que refrescar
tiene mala pinta
¿eh amigos?
tiene mala pinta
los quiero engañar
no os quiero engañar
pero tiene mala pinta
los quiero engañar
tiene mala pinta
vale
a ver
espérate
espérate
vamos a ver
que hemos hecho
todas las cosas bien aquí
¿no?
adiós
vamos a ver
un momento esto
vamos a ver
un momento esto
vamos a ver
un momento esto
vamos a ver
un momento esto
un flat
en principio
en principio
porque estamos concatenando
en este array
creo que no
creo que no
jajaja
por no usar tasks
si no lo sabemos
todo ya
hostia
es que el path
es vacío
el path
es vacío
el path
es vacío
¿veis?
que el path
me lo ha dejado vacío
¿por qué?
files.map
file
devuelvo esto
devuelvo eso
y estoy concatenando
hostia
no me está concatenando
path.com
path
tengo aquí
para cada local
los locales
sí que están
porque se ven aquí
en inglés y en castellano
gracias por no fallarme
me he ido promoviendo
las apuestas
madre mía
pues
hay un fallo
hay un fallo
a no sé cuál
adiós
ni mi ex
atrevería tanto
lo siento
amigos
lo siento
lo siento
lo siento
lo siento
a ver
aquí
yo lo veo todo bien
no sé qué es lo que
se me está escapando
la verdad
no sé qué es lo que
se me está escapando
puede ser que sea
el que decía el flat
que a lo mejor
tenía que estar aquí
en los tres puntos
puede ser
puede ser que sean
aquí los tíos
¿no?
es que es raro
es raro
a ver que podríamos hacer
un
es que es raro
porque no me hace
path.concat
es que solo he hecho esto
porque no me está
concateando
porque me está dejando
todo vacío
estoy flipando
estoy flipando aquí
vamos a ver
vamos a
vamos a hacer esto
separado
vale
vamos a poner aquí
paths
for
locales
toda la gente
es fada
no
no os enfadéis
hombre
no os enfadéis
esta es la vida
esta es la vida
del programador
esta es la vida
del programador
vale
pensad bien que el lunes
el lunes
entonces
vale
aquí sí que
aquí sí que están
¿veis?
este
path for locales
vale
aquí
o sea aquí sí que están
este
aquí están estos
aquí están los de inglés
vale
entonces
paths
igual
vamos a hacer paths
paths for locales
vale
a ver esto
yo creo que era el concat
es el concat
que la he liado antes
add push
no no hace falta
con esto ya
lo tendríamos
ha sido
no estaba retornando
el concat
no
no es que
no estaba retornando
el concat
el tema era
tenía esto
tenía esto aquí
y aquí he dicho
path.concat
y aquí le he dicho
1, 2, 3
y esto
no sé por qué
no me lo estaba pillando
no me lo estaba pillando
esto es lo que
le
sí
pero dale
dale que no
dale que no
no lo hemos conseguido
no lo hemos conseguido
el concat retorna
no cambia la red original
¡ah!
¡claro!
claro
es que no he hecho
la asignación
del concat
no he hecho
ya está
ya está
claro
se me ha olvidado
joder
pues mira
era un fallo
súper tonto
básicamente era esto
lo que había que hacer
¿qué le ha dicho?
Iván lo olvidó
joder
Iván están todas
tío
Iván el cabrón
están todas
o sea
Iván
la leche
mira
Iván
vamos a
vamos
predecir
bueno
lo siento
lo siento
a todos los que
habéis fallado
lo siento
gracias por confiar en mí
lo siento mucho
os he fallado
no volver a morrer
lo siento mucho
lo siento mucho por fallaros
lo siento
lo siento
lo siento
voy a fustigar
va
voy a fustigar
la pasión de Midou
con el cable
no fallaré
no fallaré más
cinco latigazos
lo siento
venga otra
perdonadme
perdonadme
perdonadme
lo siento
espero que me perdonéis
a ver
a ver
para arreglarlo
va
para arreglarlo
vamos a hacer algo
vamos a hacer algo
vamos a
primero vamos a
vamos a regalar
una suscripción
se la vamos a regalar
a Iván
que están todas
le vamos a regalar
una suscripción
va
le vamos a regalar
una suscripción
se la ha ganado
él ha visto el error
la ha visto rápido
ha sido fugaz
vamos a regalar
a Iván the Olivier
le vamos a regalar
una suscripción
que se la ha ganado
oye pero espérate cómo se pone aquí vas a regalar esta unidad no como como
regalar sólo a sólo quiero regalar a él a un espectador
y van a ver si soy capaz de buscarle lo ni bien
mañana me acuerdo hasta el nombre si tiene una suscripción ya tendrá sufición ya pues
no voy a poder no voy a poder poder porque no me deja sentí van no siento iván no me deja porque
no me puedo copiar la no me puedo creer que no me puedo copiar en la url y sí que puedo
ya está está está ya está está venga iván ahí tienes y vamos a regalar también a otra la comunidad
vale me salió caro el error sí pero bueno toma ahí tiene iván y van además en mecenas el tío o sea
que muchísimas gracias iván y ahora regalamos una rando vale ahora regalamos una rando no iván te
la has ganado y además así no ves no ves pura los que estáis suscritos no veis publicidad entonces
vamos a regalar una mira ya estoy estoy en la posición 2 de persona que más regalan mi propia
comunidad sea esto que es pero esto que es esto que es venga vamos a regalar otra a esta está rando
va venga por haber fallado por haber fallado lo siento si se habita el primero la madre lo parió
qué fuerte y van en realidad en midu y el que vemos es un doble que es el que pone cuando
pero hostia eren no me digas no bueno eren lo siento no lo he visto no he visto pero igualmente
igualmente no solo lo he hecho por esto de esquí van el tío están todas están todas pero lo tengo en
cuenta eren games tengo en cuenta lo tengo en cuenta no tengo en cuenta joder es que no puedo estar por
te vas a echar lo importante yo te tiré el prime bien fuerte bueno gracias en games gracias
sí creo que no se cabre como como sea eren jagger nos nos revienta a todos bueno pues ahora sí que
funciona vale ahora ya sabemos la explicación por la que no funcionaba ya lo tenemos ahora en castellano
podemos ver que también funciona obviamente no tengo todas las traducciones lo deberíamos hacer
debería estar aquí un rato con el tema traducciones pero no lo tenemos vamos a
vamos a avanzar porque ahora sí que yo creo que el tema traducciones ya así que está todo funcionando
vamos a mirar esto rápidamente porque tampoco es que sea muy complicado a ver a voy a ver si esto
funcionaba pero si esto esto funciona todo debería funcionar verdad y dime que funciona
vale castellano vale se me había olvidado la asignación la re asignación no estés molesto
no estés molesto no estés molesto vale sigamos vamos a ver el tema de la variable entorno lo vamos
a ver muy rápido porque es muy fácil y la historia pero bueno solo para que además luego os enseñaré un
truquillo que está bastante chulo así que cómo se utilizan las variables de entorno en exiles por
suerte la variable entorno en exiles funcionan de gratis ahora aquí en el tema en vuestro editor en el
proyecto lo que sería en la raíz de proyecto podéis crear un archivo y le pueden llamar el primero que
deberíais crear seguramente es en punto local que significa local bueno pues obviamente de tu máquina
local este no es un archivo que deberá subir de hecho a pues no mira pensaba que a lo mejor estaría
ahí es que se ha olvidado el punto es punto en punto local de hecho si te fijas no sé si se ve porque
yo estoy en medio como siempre sí sí que se ve justamente mira lo puedo lo puedo mira si miras aquí
si miras aquí justamente aquí verás que está como si estuviese pálido como mi cara cuando veo que las
cosas no me funcionan porque se ha puesto grisecillo como dice como dice de temecheng se ha puesto
difícil porque justamente en el kit ignore cuando tú inicias el proyecto en exiles ya te pone aquí los
en el kit y no te pone el punto local en punto de blog en punto local el punto 3 es el punto
passion fíjate que estos puntos en punto local son para que los tengas en tu máquina local vale súper
importante tu máquina local pues es punto local localmente puedes intentar levantar claro puedes ejecutar
test por eso tendrías el de punto 3 punto local tienes el de punto development el de development
sería como estamos trabajando ahora y el punto production que sólo sería si utilizas el next
start vale entonces gracias con la y por la sub muchas gracias amigo entonces entonces ya tendríamos
el de este para que lo vamos a utilizar bueno ya que estábamos teníamos por aquí está en el
servicio ser este teníamos justamente esto que era algo lea search y aquí teníamos no acuerdo que era
cada uno creo que este es apay apaid y vale o sea que esto sería el apaid y esto sería el apaid y esto
sería el api que me parece esta información que veis aquí no os preocupéis porque es pública o sea la podéis
hacer pública no digamos que algo ya tiene como tres keys tendrías la país de api y luego tenéis la
admin que es como es parecido a cómo funciona firebase vale entonces la admin key en la que es bastante
peligrosa pero estas dos sí que las puedes dejar aquí y no hay ningún problema estas al final lo único
que funcionan son de consulta e incluso podéis hacer que sólo funcionen para ciertos host así que no hay ningún
problema entonces ahora que ya sabemos esto vamos a poner apaid y ya piqué aquí pero obviamente he
creado estas constantes pero no las vamos a tener aquí esto lo vamos a repasar como variables de entorno
está mejor lo habéis hecho 80 veces pero luego cuando las despleguemos vais a ver lo que es realmente
interesante así que esto lo pegamos para tener problemas lo pegamos a mí me gusta dejarle las comillas
dejo las comillas dobles pero aquí cada uno que haga lo que quiera porque se supone que sin comillas
debería funcionar también pero me gusta porque lo formatea bien dicho esto ahora para leer estas estas
api keys bueno lo único que tenemos que hacer es tirar del proceso así que aquí ahora podríamos hacer
proceses punto punto app id y lo mismo con apique vale apique hasta aquí todo bien todo correcto ahora
vamos a desplegar nuestra aplicación y no vamos a encontrar algunos problemas así que vamos a arreglarlos
qué problemas nos vamos a encontrar bueno porque esto lo hemos dejado aquí bueno puede haber dos
problemas voy a asegurarme una cosa vamos a volver a levantar esto porque a lo mejor como al crear el
el no lo ha pillado vale vamos aquí voy a refrescar aquí vamos a ver si puedo seguir buscando vale y no sé
cómo tratar a ver vamos a buscar data vale quédate con data vale funciona la búsqueda todo está funcionando
bien o sea que la variable entorno local nos funciona ahora vamos a desplegar este proyecto aquí hay
diferentes formas de desplegarlo vale que podemos hacer para desplegar podríamos utilizar el clic el line
command utility que tiene verse el podríamos ejecutar verse el no se lo tengo instalado si no habría que hacer
esto verse el menos que y esto lo que haría es desplegarlo directamente otra cosa que podemos hacer
y de hecho me voy a hacer porque me viene bien es el tema de tener un repositorio de aquí y rápido de
esto voy a instalar verse lo vamos a hacer primero así y luego lo hacemos es el clic de verse el no el de
next es raro en bite porque tienes que hacer import punto meta punto no es raro sino que eso sigue la
especificación que es mucho mejor el proceso punto eso es una buena buena cosa que está fijao mira esto
este proceso punto en punto apaid y esto en realidad esto es una cosa que viene del mundo de note 10 vale
esto viene de note 10 esta forma de trabajar porque porque estas variables de entorno son sobre los
procesos de note 10 y en el cliente pues se utilizó porque web pack y todo este tipo de herramientas pues
cuando no existían los módulos de javascript los en magrin modus se vino con este tipo de cosas
entonces en realidad este proces punto esto no existe en el navegador o sea si yo abro las herramientas
bueno aquí así que puede existir pero si me voy a mi página y yo abro mi navegador esto en la consola
no existe vale o sea esto peta procesos notifying o sea esto no tiene ningún tipo de sentido esto viene
de no y es que mucha gente no lo sabe pero esto no es del navegador ahora el import punto meta punto
en que en este caso tampoco va a funcionar porque porque estoy fuera de un módulo que es que pone
cannot use import meta outside module pero ya el error es diferente no te dice que no existe este
import meta punto en esto en realidad sí que es parte de la especificación de javascript en realidad en
este caso bit lo está haciendo mucho mejor es mucho más interesante así que nada que lo tengáis en
cuenta que esto también es una cosa que no no sé mucha gente no no sabe sabes que dice a procesos
en vital pues no esto es porque en realidad next 10 utiliza web pack y por eso lo puedes utilizar
porque no usar doten por ejemplo bueno en este caso eren games es que no tenga sentido porque de
hecho creo que utiliza doten por debajo pero es que ya lo hace automáticamente que cuál es la
diferencia en realidad de utilizar el doten si ya creando aquí los ficheros ya los tienes sabes no tiene
mucha mucha historia bueno verser ejecutamos verser papá y ahora me dice setup and deploy y te dice
cuál es la que quieres desplegar vale le voy a decir que 10 y ahora me dice en que scope bueno vamos a
poner mi luz de no mi luz de pro a ver déjame ver en cuál estoy bueno yo creo que estaré y habría
iniciado sesión latón ya se puede cambiar si se hago aquí y tan y ponemos aquí tal vale vale pues vamos a
poner en mi duda por si acaso para que no me coste dinero link to existing proyecto porque no tenemos
todavía un proyecto así que le decimos que no cuál es el proyecto el nombre del proyecto le vamos a dejar
el mismo que el del directorio vale así que le damos a enter en qué directorio está tu código localizado
le voy a dejar que está aquí porque creo que debería detectar que es un proyecto de nex y es vale setting up
project subiendo y ahora me debería decir una url donde se supone ves ha detectado el proyecto dice
el comando de bill va a ser next bill el output director y es el por defecto de nex y es para
hacer un para hacerlo en desarrollo por esto quieras hacer quieres sobre escribir estas esta configuración
le decimos que no vale desplegando si no tuvieseis iniciada vuestra sesión seguramente os diría de ir a la
página web a iniciar y tal vale entonces dice mi duda es barra xk cd app created verser y dice venga
inspecciona esto si te atreves y eso si vas a la página mira ya se ha actualizado de forma totalmente
o sea automática e instantánea podemos darle un clic y deberíamos ver cómo cómo está ya está haciendo un
building vale y building y ahora vemos la duración y está haciendo building podemos ver los pasos que
están tomando aquí fecha en para que si está haciendo un empie mi store básicamente vale vale y bueno ya
nos dice que no está vigilando guillermo rau que no está haciendo que está coleccionando peta perdón
perdón que pete que peta que ha petado yo peto peto yo pero mejor desde hija si mejor desde hija vale
pero os estoy enseñando porque hay veces que que esto os puede servir para empezar y luego lo podéis
conectar con hija vale no es sabes no es obligatorio empezar con hija vale entonces nada ya está desplegando
ahora vais a ver que esto no funciona en realidad ya les explicaré por qué porque es parte de la explicación
peto yo a peto yo igual es que estoy muy no sé si es
petal midu
ahora ahora peto menos en serio peto menos ahora
hola hola midu hacía mucho que no me pasaba me encantan ex hice algunos proyectos junto material y
genial me encanta tu educación by the way muchas gracias muchas gracias estoy muy petante yo a ver
igual es que veo pero es que no veo en rojo es muy raro es muy raro tú siempre petas estoy muy
petante sí sí sí sí vale esto ha hecho un don parece que debería todo funcionar bueno sigue
haciendo un building esto no sé por qué sigue haciendo un building que por cierto aquí podemos
ver que ha generado fíjate más de 173 para en estático o sea aquí ha generado todas las 173 porque
lo habrá hecho en los dos idiomas lo estás petando no en serio peta o no peta peta no peta
soy un petazas
se escucha midu qué tal es gatsby en comparación con el ns 10 comparación con ex y es no hay color no hay color
no hay color o sea yo
a ver yo la verdad es que entre gatsby en ex y es no o sea no no tiene comparación ninguna o sea
yo me quedaría con ex y es me quedaría con ex y es vale nos ha asignado dos dominios que no lo he visto
es que se ha quedado aquí en building mira de hecho ya está desplegado o sea esto está funcionando bien
vais a ver que alguna cosa funciona otras cosas no vale el tema nos ha dejado aquí dos urls una es
se supone que la custom y otra la automática la buena se supone que debería ser la custom porque
como podéis ver es más corta entonces vamos a entrar papá ya las traducciones me ha hecho la
redirección al castellano podemos entrar a un cómic de hecho ya podéis mira os voy a pasar el enlace que
ya tenemos el proyecto desplegado y podemos cambiar entre un idioma y otro además va rapidísimo o sea
va rapidísimo como podéis ver va bueno seguimos teniendo problemilla este este problema es más por
el culpa por culpa de la del componente imagen de next 10 tendríamos que ver cómo podemos evitar
sabes cómo podemos hacer que se quede en blanco lo revisaremos en el siguiente vale el tema es que ya
se ha desplegado pero si vamos a nuestra api de búsqueda que a ver si me acuerdo cómo era era search y
aquí ha dicho data no teníamos un un endpoint para hacer búsquedas bueno una página de búsqueda
ser escudadita y ves error 500 para el r500 te pillaste el mac estudio al final me llega el lunes el lunes
hacemos lo abrimos y todo así que vale el propietos me está petando aquí hay un montón de formas o intentos de
cómo podríamos intentar ver qué ha pachado aquí qué ha pachado aquí entonces una cosa que puedes
intentar y lo te lo explico porque esto a veces no no se explica mucho que veo que lo ha movido de
sitio coño antes sabía dónde estaban los logs está el output creo que es esto no source no opud no
no hostia
funciones ostras vale vale ahora sí vale los logs vale que tenemos como logs tened en cuenta que los
logs desaparecen son en tiempo real por lo tanto está bastante bien de que puedes puedes leer o sea
yo voy haciendo puedo limpiar todo esto vale y si intento acceder aquí en tiempo real debería
ver aquí el pet el pt el pt en rojo vale me debería decir vale pues apretado por esto bueno ahora veo
que no aparece no sé por qué no sé si porque ya tengo demasiado cliente o porque tarda un poco pero
bueno antes habíais visto justamente que no se está actualizando porque esto es de ahora mismo bueno que
podéis ver los petes que esto mucha gente dice ostras no sé por qué me está petando qué tal bueno pues
aquí lo puedes ver esto es el pt y el pt es justamente por un validis header porque se ha quedado como en
define el género de x algolia a piki así que vamos a arreglarlo como lo podemos arreglar pues el problema
aunque no ponga aquí obviamente ya me dice que le falta la piki y esto es porque no hemos puesto las
variables de entorno así que nos vamos a nuestra aplicación y nos vamos a settings y en settings aquí
tenemos un montón de cosas y una de ellas es environment variables y te voy a enseñar una cosa que está muy
chula que está bastante chula que muy poca gente conoce y que la gente entiende mal pero es una
chorrada es una chorrada tampoco quiero dar mucho hype pero hay veces que la gente dice ah pero claro
si tengo mi environment variable el local que pasa cómo puedo hacer para tener las variables de entorno y
tal lo vas a ver ahora es
complicada la palabra pt porque el pt mido más 18 pero pt pt aquí es petar de explotar no sé lo que
significa en sus países en tu país no sé lo que significa en el mío significa que explota vale pues
aquí tenemos que añadir las variables de entorno pues está aquí esto fácil esto es fácil porque tú pones
aquí podríamos estar aquí ponerlo si es de producción si es preview si es de bloc men aquí
puedes poner en este caso voy a poner que es de todos porque tampoco tiene mucho sentido pero que
sepas que más puede diferenciar si quieres y aquí puedes hacer que automáticamente se expongan las
variables de entorno del sistema esto si quieres normalmente te va a interés a que lo dejes así porque es
bastante útil así que déjalo así venga añadimos el de api y ya añade bien que este es la api y ahora dos
cosas a tener en cuenta lo primero que esto ahora de repente no va a funcionar por arte de magia tienes
que volver a hacer un despliegue vale así que nos vamos a diplo y mens le damos aquí el botón derecho
y creo que si le das a redeploy vale redeploy with existing building caché sólo te permite los de
kit bueno por dios bueno no pasa nada no pasa nada hacemos un redeploy ahora en un momento vale voy
a quitar esto que había dejado dos consuelos por aquí que no nos interesan y vamos a volver a hacer
un deploy vamos a poner percel ejecutamos percel percel y ya está se despliega ping si 600 subs que
grande muchas gracias amigos llegaremos a 800 está complicado pero bueno si no hay reto cuál es la
gracia con la gracia muchas gracias por vuestro apoyo es increíble es increíble de verdad vale
bueno está haciendo building está una cosa que me gusta de que de poder hacer esto aquí el hecho de
que puedas ver en la terminal si está haciendo building y todo esto esto es increíble esto está
muy chulo es la leche es la leche cómprate un tesla siempre no me quedan subs para un tesla no me
quedan midú estoy comenzando un proyecto en el template de ecommerce el mismo next y es desea me
suerte tus tutoriales me ayudan suerte doctor light man suerte si no podríamos ver para aquí
mira más o menos tarda un minuto así que pues nada un minuto tenemos que esperar a importante una
cosa importante de lo que ha pasado ahora y ahora os explico el truquillo este que os decía de las
variables de entorno cuando vuelves a ejecutar versell que es lo que he hecho yo aquí el tema es
que te despliega la primera vez te lo despliega producción la primera vez pero si yo ahora vuelvo
a ejecutar aquí versell aunque aquí no sé por qué no me ha dicho nada es raro porque según esto dice
deploy to production ah no no vale vale es que este esto es del anterior el nuevo es este vale fíjate
que ahora me lo está desplegando a una url de preview si lo que queremos es desplegar en
producción tenemos que poner esto de hecho me lo estoy diciendo aquí ya decía yo que me
extrañaba que no me lo había dicho hay que poner versell guión guión prot vale para asegurarse que
lo despliega producción aquí veremos que tenemos ahora tenemos este este es el primero que hemos
desplegado antes ves production curren significa que es el que está ahora en producción tenemos este en
preview que es el que acabo de desplegar y ahora ha vuelto a hacer uno de production lo bueno es que tú
puedes desplegar en privo y tantas veces como quieras así viendo si funcionan las cosas por ejemplo
podríamos entrar en este lo podríamos visitar ver que todo funciona bien y aquí podríamos intentar
hacerlo el search data y tal para ver si realmente lo hemos arreglado y lo hemos arreglado vale con la
variable de entorno ahora sí que funciona ahora que hemos visto que esto funciona entonces podríamos
llevarlo a producción que es lo que estamos haciendo dicho esto vamos con el truco el truco del
almendroco hay muchas veces por ejemplo imagínate que yo me descargo este proyecto de github que de
hecho lo voy a hacer o sea lo voy a hacer voy a no sé si no sé si ya cree creo que no vale lo
intentamos crear desde la terminal creéis que podremos o que podremos h repo great venga venga vamos a
intentarlo a crear un nuevo repositorio en github from scratch me da miedo que me lo pete todo pero
bueno voy a voy a confiar nombre del repositorio xkcd app descripción debes xcd the best way to read
xd comics visibilidad pública te gustaría añadir no ya esto me da miedo no quieres añadir licencia no
si publica esto clon de new repositorio y local y no no no me lo a ver kit remote
show vale no nos tengo vale vale pues no pensaba que me lo iba que me lo iba a sincronizar con el
repositorio local ya veo que no ya veo que he sido demasiado demasiado optimista vale vámonos a
nuestro repositorios tus repositorios y tenemos ahora este vale pues nada qué raro que no se puede
hacer esto o sea que no te lo haga automáticamente sería increíble claro si te lo si te lo si dices
descargarlo yo creo que lo hace yo creo que sí que lo hace bueno esto no debería ser importante
vamos a añadir vale nos aseguramos que no tengamos la variable de entorno vale y aquí vamos a decir
let's begin the hunger games
sabía que no me iba a dejar por él la mierda está
no es que se me ha olvidado esto que estoy en desastre vale y con el push este
para para para pam pam pam pam pam refrescamos y aquí tenemos todo vale entonces ojo a esto el tema
el tema es el tema es ahora fíjate que aquí no está en las variables de entorno locales
imagínate que yo elimino mi variable entorno está esta variable entorno a esta variable entorno las
eliminó yo me clono el repositorio y digo ostras que las variables de entorno pero las variables de
entorno por suerte las tengo en las tengo justamente en vercel pues lo que podemos hacer para recuperarlas
es verser en punto no pool punto en punto local y esto lo que hace es descargar de verser lo que me ha
dejado fatal porque no lo veo aquí así ves que me lo acabo de crear ya te me ha traído todas y me ha
traído estas dos que yo tengo en verser esto es una pasada y esto no lo cuenta nada esta es la forma
correcta en la que vais a tener justamente las variables de entorno sólo por esto no me digáis
que no han valido no han valido a dos horas y cuartos no me digáis que no han valido dos horas
y cuartos ahora lo vais a ver lo vais a ver en todos los pocos habla de esto bueno igual sí que se
habla de no sé no sé pero en serio yo esto no lo he visto en ningún sitio ahora lo vais a ver todo
el lado pero os juro que yo no he visto ningún sitio es que da gloria trabajamos next ya está la gloria
ahora que hemos visto no sólo funciona costaron miles de vídeo crees bueno os he compensado no
os he compensado no esto también podéis traeros por ejemplo sólo las de producción puede estar
de producción puede estar eros entonces aquí se van creando veis en el punto local punto production
qué pasa que yo no he diferenciado entre las de producción entre las de desarrollo producción y
de test pero si las diferenciáis o las podéis traer y os lo van a traer a verse el en es de
prequete vale yo siempre lo he hecho con el enf dice que está de prequete pues bueno con pool punto
de puntos del apos no pues no sé no sé no sé si es que lo van a quitar me extrañaría me extrañaría
que lo fueran a quitar no sé si es que lo han cambiado le van a cambiar la help igual le cambian
el a mira es verser ahora lo van a hacer guión guión punto en punto loca vale pues lo tienes que hacer
así perdónate que es que han actualizado el clic pero así verser pool guión guión en en punto local
y entonces te descargas las locales esto es súper interesante por un montón de cosas o lo primero te
descargas el repositorio no tiene las variables de entorno te las puedes traer sin necesidad de saber
lo que hay ahí o sea tras tres y punto obviamente tú tienes que estar logueado en esa cuenta de verser
se te han podido olvidar luego es posible que las tengas de sincronizadas que tengas unas en
tienes unas por ejemplo en en tu máquina local y tienes otras en el repositorio de allí así que es
bastante interesante para para esto te olvidas de andar creando en punto examples claro a ver sí que
puede ser interesante de crear el en punto examples si es un proyecto de código abierto pero si no es un
proyecto de código abierto puede ser bastante chulo no se está trabajando con gente en un equipo este
tipo de cosas así que por eso está muy chulo ahora si lo que queremos es asociar este proyecto que
teníamos con el de github ves que ahora si volvemos a que el proyecto nos pone connect with git repositorio
ahora como lo hemos creado lo que podemos hacer es irnos a github lo puedes hacer con git lab con
beat bucket y aquí además esto es increíble porque detecta cuál es el último repositorio que has estado
tocando veis entonces te pone esto así que le damos aquí a conect y ya está amigos ya lo hemos
conectado de forma que cada vez que hagamos ahora un comita master desde aquí pues ya lo tendríamos voy
a quitar este de production vamos a poner aquí por ejemplo el pack vamos a quitar vamos a quitar esto
vamos a quitar los carets vale y vamos a poner aquí remove carets vale hacemos un push y ahora deberíamos ver
cómo desde nuestro repositorio si refrescamos tenemos esta cosa de aquí que esto lo que nos quiere decir es
que el despliegue está en proceso le damos un clic podemos ver verse el pending y esto además de forma
totalmente automática os van a desplegar también las pool ricos que es increíble es increíble así que
ya lo tenéis ya lo tenéis por aquí y le podéis dar y ver cómo cómo está tienes todos tus proyectos en
verse el tengo bastantes de mis proyectos en verse la verdad que sí tengo bastantes proyectos en verse el
pero me gustaría empezar a probar en el ifi me gustaría empezar a probar en el ifi porque tiene muy buena
pinta y tiene algunas cosas que me llaman bastante atención también quiero empezar me hizo un meme alguien
me ha hecho un meme vamos a ver el meme también que rompe bueno ya he probado ya he utilizado en
su día utilizar cloud fair workers que me encanta y cada vez lo quiero utilizar más porque me parece el
futuro así que nada a ver si soy capaz de sacar ideas y proyectos de cloud fair workers y una cosa que
tiene súper interesante es el tema de que tengo una base de datos de como si fuera un redis
a ver hay gente por aquí que dice macho un meme
aprendí una importante lección no puedes contar con nadie en especial con tus héroes
que bueno y encima ha puesto aquí el código y todo
que cabrón
que bueno que bueno que bueno que bueno que bueno que es que ha puesto hasta el código con el que he fallado
hay que buenísimo buenísimo me ha encantado me ha encantado me ha encantado y hay dándome
latigazos
que rata la pasión de verdad lo siento mucho por haberos fallado pero pensad que que todo el mundo falla todo el mundo falla si alguien no falla
preocuparos preocuparos porque seguramente algo raro está pasando fallar es humano de hecho esto lo que espero que os ayude es a pensar que a todo el mundo le puede pasar bueno en este caso es un error menor pero bueno me equivoco todos los días todos los días y abrazo el error
no pasa nada esto esto es normal así en la vida así que no hay ningún problema así que bueno si alguien no falla es porque copia y pegó de esta core flow sí sí sí sí o porque se está copiando el código mientras lo está yo que sé por algo
es un error menor a mí me costó miles de vídeo si alguno de ustedes os ha costado os ha costado lo suyo
es verdad lo siento que ha pasado nada que me he equivocado ha habido un momento que me he equivocado en hemos hecho una predicción una apuesta a ver si hacer si el código que había hecho funcionaba
y de hecho en el meme se ve claramente
donde estaba el error el error estaba que el concat no
no modifica el array original ha sido un error desprecipeante tengo que decir
porque el concat devuelve un nuevo array entonces tenía que haber sido paz
igual paz punto concat o haberlo hecho con el
el spread o lo que sea
y no no ha sido así
pero bueno ha sido bastante divertido
pero hemos visto bastante cosas chulas hemos indagado un montón en el
i18n creo que espero que os haya servido porque sé que es algo que no
no se suele ver en esta profundidad o sea a lo mejor se ve
i18n directamente en next 10 pero así con buenas prácticas y tal hemos visto la variable de entorno os he enseñado el trucazo
este que yo que yo no lo he visto nunca en ningún vídeo en ningún sitio y a mí me ha salvado la vida me ha salvado la vida
porque a lo mejor se me ha olvidado la variable entorno no la tenía en ningún sitio y sólo la tenía en vercel y la he podido recuperar así y así increíble
también he puesto despliegue totalmente gratuito del proyecto en vercel y yo creo que con esto vamos a dejar el curso de next 10
yes
y
y
y
y
y
y
y
y
y
y
y
y
y