Hoy empezamos una nueva serie de vídeos que van a estar todas centradas en Next.js.
Hoy es el primer vídeo donde vamos a ver Next.js desde cero.
Vamos a aprender qué es Next.js, por lo tanto hoy diríamos que es un vídeo más introductorio
sobre qué es Next.js, crearemos la aplicación, igual jugamos un poquito con la aplicación,
no llegaremos mucho más allá, pero vamos a ver un montón de diferentes temas.
O sea que en el centro vamos a tener Next.js de Vercel, vamos a ver este framework de React
que ahora os explicaré más, pero también me gustaría en esta serie de vídeos tocar Firebase.
¿Por qué vamos a tocar Firebase? Porque el proyecto que vamos a hacer en esta serie de vídeos
va a ser un clon de Twitter, un clon de Twitter, como lo queráis hacer en americano o en inglés.
Pues Twitter sería como en castellano, ¿no? Twitter, Twitter o Twitter, como lo queráis pronunciar.
Pues vamos a hacer un clon de Twitter, ¿vale? Para que podamos aprender más a utilizar Next.js.
Me parece que es una aplicación bastante ambiciosa. La idea será utilizar Firebase, utilizar Next.js, por supuesto.
Y con Firebase intentaremos tener todo el tema de la base de datos, tener también el login.
Creo que vamos a hacer un Twitter que va a estar más orientado a desarrolladores.
¿Esto qué quiere decir? Pues que va a ser más pensado a desarrolladores que compartan sus tweets sobre desarrollo.
Y por lo tanto, pues veremos, ¿no? Que la estética que haremos, el login lo haremos con GitHub, cosas así, ¿no?
Así que, bueno, ya os voy diciendo un poco de spoilers de cosas que tengo en la cabeza.
Ya sabéis que estas cosas empiezan con una idea, ¿no? Y luego, pues puede ser algo distinto según vuestro feedback también,
lo que me digáis que queréis ver y todo esto, ¿no?
Pero en principio va a ser eso. Un clon de Twitter que va a estar más enfocado a desarrolladores, ¿vale?
Para que compartan su código incluso. Eso no sé si lo veremos, pero lo quiero intentar.
Quiero intentar que más que un tweet, aparte de un tweet, pues puedas compartir un snippet de código a la vez que el tweet.
Eso sé que tiene bastante más complejidad, pero bueno, empezaremos sencillo.
Es una cosa que vamos a construir semana tras semana, igual que hicimos con nuestro proyecto de Giphy,
por si no lo sabes o te estás incorporando ahora, pues hicimos una serie de vídeos para aprender React
e hicimos todos juntos esta pedazo de aplicación, un buscador de GIF que podías buscar cualquier GIF que se te ocurriese.
Así, podías buscar aquí zombie y ya teníamos aquí todos los GIF de los zombies y tal.
Lo hicimos con React y desde cero.
Bueno, pues este código está totalmente abierto en mi GitHub, que por cierto, aquí tengo mi Ritmi que está muy de moda,
pero en mi GitHub podéis encontrar el código de este proyecto en el caso de que todavía no lo hayáis visto.
A ver, ¿dónde lo tengo? Aquí. React Live Coding, ¿vale?
Aquí están todos los vídeos con lo que hicimos esa aplicación de GIF y además pues todo el código fuente.
Así que si te interesa, aquí lo tienes.
Entonces, he dejado por aquí esto del GIF porque me parece interesante, ¿no?
Me parece interesante el hecho de ver alguna diferencia que va a tener la nueva aplicación con esta, ¿no?
Ya sabemos que la de Giphy, que estuvo muy bien y que era una SPA y funcionaba muy bien,
pero le faltaba, por ejemplo, server-side rendering, que es algo que vamos a tener con Next.js.
Entonces, ¿por qué Next.js, no? ¿Qué es esto de Next.js? ¿Por qué me parece que es súper importante?
¿Por qué yo estoy súper emocionado de que hablemos de esto? Vale.
Primero, ¿qué es Next.js, no? ¿Por qué vamos a hablar de Next.js y por qué tiene tanto que ver con React?
Next.js es un framework de React. Es un framework que utiliza React.
Pero yo no diría que es un framework. Yo diría que es el framework.
Incluso ya lo dicen en la página web, ¿no? Dice the React framework, ¿vale?
El framework de React. Y no es casualidad.
Hay diferentes alternativas. Hay frameworks como puede ser Gatsby, ¿no?
Que nos permite crear nuestras aplicaciones estáticas en ese sentido, Gatsby.
Pero hay otros frameworks, ¿no? Que han intentado tener esta popularidad.
Pero Next.js lo ha reventado. Digamos que es el estándar de facto.
Tanto que el equipo de React o el equipo de Chrome han estado trabajando en mejorar el código de Next.js, ¿vale?
Incluso en la última versión hemos visto que ha habido participación de Dan Abramov,
que es del core team de React.js.
Entonces, digamos que a la hora de construir una aplicación con React,
Next.js te soluciona tantas cosas, tantas cosas, ¿vale?
Entonces, ¿por qué creo que deberías aprenderlo?
Aparte de lo que he dicho, que es bastante drástico, ¿no?
De que es el framework de React.
Bueno, alguien me preguntaba por el chat y me decía,
oye, pero esto cada vez lo utiliza más gente, lo utiliza alguien, no lo utiliza nadie.
¿Esto cómo funciona, no?
Bueno, lo utiliza muchísima gente.
Y cada vez lo utilizan más.
Podemos ver que, por ejemplo, la página de Netflix Jobs lo está utilizando.
TikTok en su página, el principal lo está utilizando.
Twitch en su página móvil.
También en Hulu.
O sea, la página de Nike.
Creo que también está IGN, por si os gustan los videojuegos.
Me encantan.
Pues IGN también está hecha en Next.js.
Hay la página de PlayStation, está hecha con Next.js.
Hay un montón de páginas que están hechas con Next.js,
de todos los tipos, de todos los colores.
Entonces, la página de Marvel.
Hay esta de sobras, de sobras demostrado que Next.js es un muy buen framework
para hacer aplicaciones que tienen que llegar a producción.
¿Y por qué es esto, no?
¿Por qué tanta gente lo está utilizando?
¿Por qué?
¿Qué es lo que da?
¿Qué características tiene para que la gente se vuelva tan loca, no?
Que va utilizando Next.js.
Pues te voy a intentar hacer un pequeño resumen, ¿vale?
De por qué vale tanto la pena y por qué tanta gente lo está utilizando.
Lo primero es la facilidad que te da para hacer pre-rendering de tu aplicación.
¿Qué quiere decir esto de pre-rendering?
Claro, como vimos en la aplicación de Giphy, si yo desactivase el JavaScript,
de hecho voy a intentar desactivarlo, a ver si soy capaz.
Bueno, lo podría desactivar aquí.
Esta era nuestra aplicación que hicimos, que bueno, la hicimos con Create Reacup,
que estaba muy bien.
Voy a desactivar JavaScript, voy a cerrar aquí, voy a refrescar.
Y bueno, no ha hecho...
Ah, claro, es que tengo que tener esto.
Tengo que tener esto...
Vale, creo que tengo que tener esto abierto para que esté...
Vale.
Si desactivamos JavaScript, ¿qué pasa?
Que nuestra aplicación no aparece, ¿no?
Porque se construye en el cliente, en la parte del cliente, para funcionar.
Y necesitamos que JavaScript se pueda ejecutar.
¿Qué quiere decir esto de hacer un pre-rendering?
Lo que significa es que en el servidor, o antes, de cualquier forma,
se está renderizando nuestra aplicación previamente.
Una de las técnicas, y una de las más famosas, y una que te da Next.js,
es la del server-side rendering.
O sea, renderizar en la parte del servidor, ¿no?
Antes de llegar al cliente, esos componentes, tu aplicación,
se renderizan en el servidor.
Y esto tiene muchos beneficios, ¿no?
Lo primero que podría funcionar sin...
Bueno, funcionar quizá no, pero sí que la podrías ver sin JavaScript,
y tiene unos beneficios en términos de performance.
Además, esto lo que te hace es que tu aplicación sea totalmente isomórfica o universal, ¿no?
Básicamente que tu código funcione tanto en servidor como en cliente.
Y esto, pues, es brutal.
Además, en Next.js lo tienes casi gratis.
Así que no tienes que configurarte un express y toquetearlo y tal.
Eso sería una opción.
La otra opción de hacer un pre-rendering es que Next.js detecta cómo es tu página
y dice, vale, esta página hace una especie de Gatsby,
que ya he visto que hay algún fan por ahí.
Tenemos a Carlos Grosz, ¿no?
Que es fan de Gatsby.
Y está muy bien.
Gatsby lo que te hace es hacer como un pre-rendering,
pero lo que hace es en un paso de construcción, en build time, ¿no?
En el paso de build, lo que hace es, vale, voy a recuperar todos los datos
que necesito en esta aplicación y expulso archivos HTML.
Pues aquí haríamos algo similar.
Ese pre-rendering, por un lado, podríamos tener service al rendering
o podríamos tener uno estilo Gatsby, que lo que hace es recuperar los datos
y directamente tener tu HTML ya pre-renderizado,
pero tú has utilizado los componentes de React y todo.
Además, son dinámicos esas páginas por React, pero se pre-renderiza
de forma que la performance, la optimización que tiene esa página
es buenísima, es súper rápida, porque se sirve muy rápido,
porque es HTML plano y luego además tienes las funcionalidades ya de dinamismo
cuando está en el cliente, ¿vale?
Así que tienes ese beneficio.
Ese es uno de los grandes beneficios, pero hay más.
Tienes el export de estáticos como hace Gatsby, exactamente lo mismo.
Tú puedes decir exportar esta aplicación y lo que hace es compilarla
y te convierte en archivos estáticos HTML para que los subas y ya está,
que no hay nada más rápido que eso, también te digo.
Luego también tiene CSS en JS incorporado de serie,
utilizando una librería propia que se llama StyleJSX, que la veremos, ¿vale?
Veremos un poquito al menos para ver de qué trata esto y en otra clase seguramente lo veremos
en más detalle, pero hoy lo toquetearemos un poquito para ver un poco cómo funciona y tal.
¿Qué más? Cero configuración.
Esto es algo que tiene que ir acá, por ejemplo, ¿no?
Cero configuración.
No tenemos que configurar absolutamente nada para que nuestra aplicación funcione.
Ahora, ¿qué pasa? Que es que con cero configuración tenemos el code splitting,
tenemos rutas utilizando el sistema de archivos, que eso lo vamos a ver en la clase de hoy,
y por supuesto, pues tiene un montón de optimizaciones.
Y esto sin ningún tipo de configuración.
¿Qué más tiene? Que aunque sea cero configuración es súper extensible.
Uno de los problemas que tiene Career Rackup, ¿no?
Es el, vamos a verlo, Career Rackup, tienes el Eject.
¿Qué es el Eject? Esto básicamente, ya hay un montón de artículos que hablan sobre esto, ¿no?
Que es no lo hagas, ¿no? Don't Eject your Career Rackup.
¿Qué significa esto de Eject? Pues básicamente es como soltar, ¿no?
Que es como expulsar tu aplicación de los mimbres de Career Rackup.
Y eso sirve para que puedas tocar la configuración.
Pero con Next.js es súper extensible.
Puedes tener una configuración de Webpack y puedes hacer que machaque la que está utilizando Next.js.
Así que es muy fácil de extender también la configuración de Babel y todo esto.
¿Qué más tiene? Bueno, aparte de todas las optimizaciones que tiene al detalle
y que puedes crear las rutas de una API de forma súper sencilla,
o sea, Next.js te permite no solo crear las páginas de tu app,
sino que también puedes crear la API y las rutas de la API.
Y lo haremos en esta serie de vídeos, ¿vale?
También vamos a tocar backend en esta serie de vídeos,
gracias a lo que nos permite Next.js a la hora de hacer rutas de nuestra propia API.
De hecho, lo podemos ver aquí, que podemos tener unas rutas de la API.
Y además puedes tener MylerWare, puedes utilizar que te utilice GraphQL,
que hagas llamadas a REST.
Así que es brutal.
Además está muy bien porque esto, cuando lo deployas con Vercell,
pues ya lo tienes súper bien encajado.
Porque es como que está preparado para ser deployado con Vercell.
Y eso también, por supuesto, lo veremos.
Pero hay muchísimas más cosas.
Esta tiene Next.js.
Next.js es para hacer el SEO, ¿no?
Y para cambiar el title, description, que en la serie anterior de vídeos,
pues ya visteis que tiene su miga, ¿no?
En React, porque necesitamos una librería y tal.
Esto ya viene incorporado.
Tenemos una forma fácil de hacer aplicaciones AMP.
Tenemos soporte a TypeScript.
Tenemos que sirve archivos estáticos súper fácil.
Si necesitas tener imágenes en tu servidor, esto te lo soluciona, ¿no?
Necesitas nada más.
Soporta variables de entorno, nada más salir de la caja.
Y no solo que sirven en el servidor las variables de entorno,
sino que incluso en tu código del navegador también lo puedes hacer funcionar.
También lo veremos en la serie de vídeos.
Así que, bueno, yo creo que ya os he contado todo.
Os he contado todo lo de Next.js.
¿Por qué lo debéis utilizar?
¿Por qué es interesante?
¿Por qué no os lo podéis perder?
Aquí podéis ver lo que os comentaba de Dan Abramoff, ¿vale?
Que ha hecho un montón de contribuciones al framework este.
Y ha añadido ahora Fast Refresh.
Que esto es otra cosa que a ver si lo vemos.
Porque ahora está activo por defecto.
Y es que cuando haces un cambio en tu código,
es casi instantáneo el verlo reflejado en tu aplicación.
Así que, bueno, tiene un montón de ventajas que iremos descubriendo
sobre el de eso conforme vayamos tocando Next.js.
Y otras que, bueno, que ya os la he contado.
Así que voy a leer un poquito qué me comentáis.
Y ahora vamos a, justo después de las preguntas y tal,
pues ya creamos nuestra aplicación de Next.js
para que vayamos viendo qué es lo que nos va ofreciendo.
Vamos a ver, vamos a ver qué me habéis comentado por aquí
y vuestras preguntas, ¿vale?
¿Se pierde el single page application con server-side rendering,
cierto?
Pues no, no se pierde.
Y esto es lo mejor, ¿no?
Que tiene Next.js, por ejemplo.
Lo que va a hacer Next.js es que la primera página,
sí que es verdad que la primera página tiene server-side rendering.
Por lo tanto, se renderiza en el servidor.
Pero cuando tú estás en el cliente
y haces otra navegación dentro del cliente,
lo que va a ocurrir es que va a ser como una SPA, ¿vale?
Se va a comportar como una SPA.
Esto es brutal, ¿no?
Porque tenemos como lo mejor de los dos mundos.
Por un lado, tenemos el server-side rendering
la primera vez que entra el usuario a una ruta,
sea la que sea,
pero luego, una vez que ya está dentro de nuestra página,
las navegaciones se hacen sin necesidad
de refrescar toda la página, ¿vale?
Ya no se hacen con server-side rendering.
La siguiente navegación,
si, por ejemplo, vamos de la home a una página interna,
lo que va a ocurrir es una SPA.
Va a ser una navegación sin refrescar toda la página, ¿vale?
Así que eso es súper importante.
Bezael me dice,
Mega crack, un abrazo a crack.
Tú si quieres un crack.
Y mira qué guapo sales.
Mira, míralo aquí.
Qué guapo, guapo.
Algo más por aquí.
Algo que extrañaría de Gatsby.
Sería su conexión con los CMS hacia GraphQL.
Next tiene algo parecido.
Por supuesto, con Next.js puedes conectarte
con cualquier CMS, con GraphQL, con Apple REST,
con lo que quieras y necesites, ¿vale?
Así que no te tienes que preocupar por eso porque es verdad
que Gatsby sí que está muy, muy, muy orientado a recuperar el cómo
trabaja con GraphQL, pero Next.js tienes esa posibilidad y tienes
cualquiera.
Al final, la fuente de datos es totalmente agnóstica y puede
funcionar cualquiera.
Entonces, ¿qué más me decía por aquí?
Entonces, el mejor beneficio de usar Next o hacer el server
rendering con Express es que escribirás menos código.
Por supuesto, muchísimo menos código y te puedo asegurar que esta gente
lo va a hacer mucho mejor que tú y que yo a la hora de escribir un servidor
de React que tiene muchas implicaciones, el cómo se hidrata,
cómo se pasan los datos del servidor al cliente, un montón, ¿vale?
Por ejemplo, Óscar, ¿en qué casos nos decantaríamos por Gatsby o Next.js?
Vale, Gatsby, como tal, es más para páginas estáticas, ¿no?
Entonces, buscaríamos aplicaciones que, de alguna forma,
se queden en un número limitado.
No puede ser un número ilimitado de páginas, no podría escalar.
Por ejemplo, en Gatsby, pues, podría estar bien una tienda online
que tiene 100 productos o tiene 200 productos, ¿no?
Pero está cerrado, ¿no?
O un blog que tiene 200 productos.
Pero si tienes unos resultados de búsqueda que tienen filtros
y que tienen ilimitados números de resultados y de posibilidades,
seguramente sería mucho mejor Next.js.
También es verdad que lo que he comentado de páginas estáticas
lo podrías hacer con Next.js.
Así que es un poco...
Yo creo que Next.js, digamos que es bastante más...
Además de potente, más amplio, ¿no?
De sus posibilidades.
Te permite que una página sea totalmente estática
y otra tenga server-side rendering
y otra no tenga ni server-side rendering ni sea estática,
sino que solo funcione el cliente.
Digamos que es un framework bastante más amplio,
que no significa que sea mejor que Gatsby,
porque al final lo que necesitas es ver cuál es tu utilidad, ¿no?
Pero eso sería.
¿Podemos implementar Shopify and XDS?
Creo que Shopify tiene una API y, por lo tanto,
se podría hacer sin ningún tipo de problema, ¿vale?
¿Es un framework o una librería?
Es un framework.
En este caso, Next.js es un framework.
No hay ningún tipo de duda.
Lo primero, porque lo dice la página web.
O sea, lo dicen ellos mismos.
Y lo segundo, porque por las funcionalidades,
diríamos que una biblioteca sería React
y un framework sería Next.js,
que ya fuera de la caja te da un montón de funcionalidades
y soluciones para ti,
que no tienes ni que hacer nada.
Con cero código ya lo tienes, ¿vale?
Así que yo diría que es un framework, ¿vale?
Ahora sí que está convencido, ¿vale?
Pues si vas a necesitar dinamismo, ya sabes.
¿Qué más, qué más?
A ver, a ver.
Estoy...
Es que estáis escribiendo ahora muy rápido
y me está costando...
Voy a ir para arriba,
porque me he perdido unas cuantas cosas, ¿vale?
Voy a ir por aquí.
A ver, a ver.
Y ahora os leo, porque estoy que...
Vale.
A ver.
Si este clave dice Sambio, se va a poner difícil.
Beto Toro, sí.
Se va a poner interesante.
Cuanto menos se va a poner interesante, ¿vale?
Decía por aquí, Jolie,
que os debo las historias de los 10.000,
que estáis pendientes.
Yo la quería hacer,
pero todavía no me han activado las stories de YouTube.
Hasta que no las tengan, pues no las puedo hacer.
Así que nada, estoy esperando a tener el botón
para hacer la primera.
Yo pensaba que era instantáneo
y quería darle las gracias en una story,
pero no.
Tengo que esperar, tengo que esperar.
¿Qué más?
Logan, que no se puede...
Que se tiene que ir.
¿Cuál es la diferencia en hacer
Serversal Rendering con Express
o usar Next.js?
Dice Gerard,
si lo tienes hecho con Express,
pues ninguna.
O sea, hace Serversal Rendering.
El problema es que Next.js trae un montón de optimizaciones
que seguramente sea muy difícil
que tú manualmente las hagas en Express.
¿Por qué?
Pues porque detecta, hace el code splitting,
por ejemplo, detecta si esa página es estática
y eso al hacerlo en Express es bastante complejo.
Tiene un montón de implicaciones
que solo el código,
el concepto de hacer Serversal Rendering
es lo mismo,
pero es bastante más potente seguramente en Next.js
que si yo mismo lo hago en Express.
Y lo sé por experiencia,
porque yo en mi empresa
tenemos nuestra propia solución
de Serversal Rendering
y hace unos años,
pues sí era mejor que Next.js,
pero ahora Next.js ya nos ha pasado la mano
por la cara claramente.
Claramente.
Así que, bueno,
la diferencia del concepto no hay,
sería lo mismo,
pero creo que Next.js cada vez
ha ido evolucionando y mejorando mucho,
por lo tanto hace que sea bastante potente.
¿Vale?
¿Alguien está usando ya el fondo de pantalla?
Pues genial, Matías, me alegro.
Gracias por lo del logo.
Me la ha diseñado un colega,
que se llama Irra,
que le mando un saludo enorme.
¿Qué más, qué más?
A ver, que es que me habéis dejado por aquí.
¿Cuántas horas tienen tus días?
Pues tienen 24
y hago lo que puedo, ¿vale?
¿Se puede más volumen?
Bueno, creo que se oye bajo,
no sé, ¿se escucha bien?
No sé, a ver,
puedo subirme un poco,
no sé.
Venga, he subido un poquito más,
a ver si ahora se escucha mejor.
Defter,
mira, me ha gustado el nombre,
igual intentamos este, ¿vale?
Defter, vamos a intentarlo.
Vale, vale,
es que me habéis dejado
un montón de chats en un momento
y se han perdido.
Dani,
muchas gracias por los...
No sé qué pasa con Argentina,
o sea,
es que Argentina es brutal.
No sabía que Aucero
era un unicornio argentino,
no sabía que era una empresa argentina.
Lo miraré
para ver si podemos hablar
con el fundador.
Dani,
muchísimas gracias
por tu aporte,
muchísimas gracias.
Vale,
también se puede,
dice Dante
que se puede combinar
static y dynamic,
o sea,
el server side rendering
y el static,
por supuesto,
es lo que os he comentado,
podéis tener una página
con server side rendering
y otra que sea totalmente estática.
Es una cosa que veremos también
y que es súper,
súper interesante,
súper potente.
¿Vale?
¿Qué más?
¿Qué más?
¿Esto sería Jamstack?
Sí,
Juan,
esto sería Jamstack,
aunque habla mucho de Jamstack.
De hecho,
en Next.js puedes hacer
solo y exclusivamente Jamstack
si quieres,
pero tiene muchas más cosas.
¿Vale?
No es solo Jamstack
porque al final
el hacer server side rendering
no es solo Jamstack.
Ya tenemos servidor
y Jamstack,
digamos que busca más
ser totalmente estático.
Puedes hacer Jamstack,
pero te ofrece más cosas
que Jamstack,
¿vale?
Que para el que no sepa
lo que es Jamstack,
básicamente es JavaScript,
APIs y Markdown.
Creo que da la M, ¿no?
Ah, no, Markdown no,
Markup.
Entonces,
lo que hacemos
es que con esas tres cosas,
JavaScript,
APIs y Markup,
que es lo que hace Gatsby,
que está orientado totalmente
a hacer Jamstack,
pues tendrías ya
tu página estática
y además son mucho más rápidas
y todo esto, ¿vale?
¿Qué más?
¿Qué más?
¿Necesitabas T-Live,
María Angélica?
Vale, pues en ello estamos,
¿vale?
Vale, ¿qué más?
¿Tiene CodeSplit automático?
Esto no sé si lo he comentado,
pero sí,
o sea,
esto lo que va a hacer NextDS
es que cada ruta
va a cargarla solo
cuando la necesite.
Esto es una cosa
que veremos súper rápido
ahora,
en un momento,
¿vale?
Cuando iniciemos
y, vale,
voy a ver si voy a bajar.
También,
creo que lo he dicho,
¿no?
Que tiene soporte
para TypeScript y tal.
Vale,
genial.
Pues sí que haremos backend,
que alguien ha preguntado.
¿Alguien ha preguntado por aquí?
¿Realizamos backend?
Sí haremos backend.
Vamos a hacer algo de Node.
Así que, bueno,
perfecto.
Igual me he saltado
algún,
igual me he saltado
alguno de,
me he saltado
algunos chats
porque es que me habéis escrito
ahí un montón
en un momentito,
¿vale?
Lo siento,
lo siento si me he saltado
alguno
y si me he saltado
aquí,
Sergiedo,
que además,
Sergiedo que me ha dado
dos euros,
dice,
Apixelated Hippo Chomps
on a One App.
El mensaje
no lo entiendo para nada,
pero muchas gracias
por tu aporte,
te lo agradezco
un montón.
Apixelated Hippo Chomps
on a One App.
Me encanta.
Suena muy,
muy friki.
Vale.
Genial.
Pues creo que podemos continuar
si os parece,
¿vale?
Vamos a ir,
he estado un buen rato
porque no quería dejarme
nada de vuestras,
de vuestras aportaciones,
cualquier duda que tuvierais
y tal.
Pues vamos a,
vamos a crear
nuestra aplicación,
vamos a empezar,
mira,
tenía por aquí una ya creada,
vamos por aquí.
Me preguntan si nos podríamos
crear una base de datos,
manejar tema de conexiones
y tal.
Pues puede ser,
puede ser.
Bueno,
vamos a darle,
¿vale?
Porque si no,
no vamos a empezar nunca.
Voy a crear esto
un poquito más grande,
vamos a hacer un npx,
requerimientos que necesitamos,
necesitamos node,
¿vale?
Tenemos que tener node instalado,
necesitamos git también,
si queremos trabajar
en un repositorio,
necesitamos una terminal
y un editor de código.
Pero si tenéis node,
deberíais tener npm,
de npm creo que necesitaréis,
si tenéis la versión 6,
pues perfecto.
Creo que next yes necesita yarn,
no estoy seguro si hace un fallback,
en el caso de que si no tienes yarn,
que básicamente es el npm de Facebook,
pues va a utilizar npm y ya está.
Pero si tenéis yarn,
pues mejor,
¿vale?
Así que lo que tenemos que hacer
es utilizar npx,
que npx es un comando
que tiene npm,
¿vale?
Pero el x es porque
lo va a ejecutar.
Y lo que vamos a ejecutar directamente
es create next app,
que esto para los que hayáis visto
en la serie de vídeos anterior,
¿no?
Pues era muy similar,
¿no?
Al create react app.
En este caso,
en lugar de create react app,
es next app.
Y aquí le vamos a llamar como,
ay,
ya no me acuerdo cómo era,
dep,
¿alguien me recuerde de deper?
Ah, no,
no me acuerdo.
¿Alguien había dicho un nombre
que me gustaba?
Bueno,
voy a poner tweet,
er,
deber,
deber,
depter,
ah,
no me acuerdo cómo era.
Bueno,
voy a probar depter,
a ver si era este,
si no me lo recordáis,
¿vale?
Por el chat.
Vale.
Pues solo tenemos que ejecutar esto,
¿vale?
Ah,
vale,
Sergio dice que el mensaje de Lipo
se lo ha puesto por defecto.
Pensaba que solo aparecía el sticker.
Pues no,
eso ha sido,
ah,
depter,
vale,
genial,
o sea que lo he hecho bien,
bien,
bien,
bien,
muy bien.
Gracias a todos,
o sea que a saco,
pam,
pam,
pam,
genial,
vale,
pues,
ah,
no,
alguien le ha puesto con dos test,
bueno,
lo hemos hecho con una,
¿vale?
No pasa nada,
vale,
muy bien.
Entonces,
aquí ya me está preguntando,
voy a hacer esto grande,
que tengo que seleccionar una plantilla.
Puedo empezar con un ejemplo,
tiene un montón de ejemplos,
os lo voy a enseñar solo para que veáis,
pero tiene un montón,
un montón de ejemplos,
tiene 24 páginas de ejemplos,
tiene una brutalidad.
Tú puedes ir escribiendo aquí
y tiene ejemplo con GraphQL,
con GraphQL,
con Hooks,
con FanADB,
con algún CMS,
pues,
todos los CMS tienes un montón de ejemplos,
así que si necesitáis algún ejemplo,
alguien había dicho Shopify,
pues mira,
no hay un ejemplo de Shopify,
así que,
bueno,
el caso es que tenéis un montón de ejemplos.
En nuestro caso,
vamos a empezarlo
utilizando el default starter app,
¿vale?
Y así,
pues,
será el más sencillo
y no vendrán demasiadas cosas
creadas por defecto.
Voy aprovechando
y os voy pidiendo vuestro like,
dejad el dedito para arriba,
si os gustan los viernes,
para que más gente pues vea el vídeo
y tal,
que los likes ayudan,
así que like.
Vale,
entonces ya hemos terminado de crear
y esto,
pues,
vamos a tener que crear,
vamos a tener que entrar
a la carpeta Depter,
¿vale?
Que nos ha creado esta carpeta
automáticamente.
Vamos a hacer un ls,
vamos a ver un poco lo que hay.
Nos ha dejado un ringme,
ya nos ha instalado las dependencias,
si te fijas,
ha sido súper rápido,
o sea,
no ha sido muy lento,
ha sido bastante rápido.
Tenemos una carpeta pages,
¿vale?
Que son las páginas
de nuestra aplicación,
que luego veremos,
y tenemos una carpeta public.
Entonces,
nos lo ha creado con yarn,
como os comentaba,
pero a partir de ahora
podemos utilizar npm
sin ningún problema.
Podemos hacer un npm run
y esto nos va a decir
los scripts que tenemos
en nuestra aplicación
y ya vemos que tenemos tres.
Uno,
el start,
como para inicializar
nuestra aplicación.
Otro,
el dev,
que va a ser el modo desarrollo.
Y luego tenemos el build,
que esto es lo que nos va a crear,
son los estáticos
para deployar nuestra aplicación.
Por ahora,
lo que vamos a hacer
antes de ejecutar nada
es abrir el editor de código.
Vamos a dejarlo por aquí
y voy a hacerlo un poquito más grande
para que todos lo podamos ver.
¿Vale?
Y a ver,
vamos a ver,
voy a hacer esto así.
grande
y voy a abrir
una nueva ventana
aquí.
Perfecto.
¿Vale?
Así vamos a,
voy a moverme
de sitio
que había dicho
por aquí
para abajo.
Y
lo que necesito
es ver la top bar.
¿Vale?
Por ahora no vamos a ver
nada en nuestra aplicación
porque vamos a revisar
un poquito
lo que nos ha creado,
¿vale?
La estructura que nos ha creado.
Entonces,
ya nos ha creado aquí
una API.
Nos ha creado
una API,
una carpeta API
que se llama
Hello.
Esto es lo que os comentaba,
que vamos a poder crear rutas
de una API con Node
y esto nos va a facilitar
tanto la vida.
Pero bueno,
por ahora esto,
lo único que tienes que saber
es que nos ha creado
un endpoint
donde lo que nos devuelve
es un objeto
que dice name
y pone John Doe
y ya está.
Luego en pages,
en las páginas,
tenemos un index.js.
Aquí es donde tenemos
básicamente el index
de nuestra aplicación.
Aquí es donde está
todo el contenido
de nuestra aplicación
y va a ser lo que vamos a ver.
Ahora está muy a saco,
pero bueno,
lo veremos ahora.
Esto es el componente
que sirve de índice
para toda nuestra aplicación.
En nuestro caso,
la home.
Bueno,
ya lo pone aquí,
que es home.
Y ya vemos que está utilizando
el next head,
así que lo veremos ahora
rápidamente también
cómo funciona.
Luego,
la carpeta public,
lo que básicamente
tenemos en la carpeta public
son recursos
que son públicos.
Tenemos el icono
que es el favicon,
tenemos Vercell,
el logo,
y aquí es donde vamos
a subir nuestras imágenes,
nuestros estáticos,
no sé si tenemos
pues algunos svgs
o algunas imágenes,
jpg,
png,
lo que sea,
los pondríamos aquí
para poder utilizarlos.
Luego,
en el package.json
esto es lo que nos ha creado
y ya tenemos
las dependencias
que necesitamos.
Así de sencillo.
Next.js,
que es la 9.4.4,
es la última,
react y react-down.
React y react-down
porque son el core
de Next.js,
¿vale?
Así que esto es lo que nos ha dejado
por aquí
y el ritme que nos ha puesto
cómo funciona todo.
Bueno,
en este caso lo que vamos a hacer,
vamos a abrir aquí
la terminal
y vamos a inicializar ya,
si os parece,
nuestro proyecto.
Ya nos está diciendo
que se ha iniciado
en el puerto 3000
y fíjate
que nos ha creado aquí
sin que nos diésemos cuenta
ni nos dijese nada,
una carpeta
que se llama
.next.
Esta carpeta
que no tenemos
que subir
ni nada,
no hace falta,
esta carpeta
lo que ha hecho ya
es hacer un bundle
o hace un build,
ha construido
todos los estáticos
del servidor,
del cliente,
todo.
Y tiene una caché
que esto lo que nos sirve
es que cuando hagamos un cambio
va a ser súper rápido,
va a ser,
vamos,
inmediato.
Entonces,
ahora ya
podemos ir a este
localhost 3000
y ahí está.
Aquí lo tenemos.
Esta sería nuestra aplicación,
acabamos de empezar
y ya está.
Es bastante bonita.
Tengo que decir
que Bersel
lo que tiene
es que los diseños
son súper minimalistas
pero súper bonitos,
o sea,
súper bonitos.
Vale,
entonces,
esto sería nuestro
hola mundo
que acaban de hacer
y ya podríamos editar
nuestra página índice,
la home.
Esta página
que además es un poquito
compleja
pero que tiene un montón
de cosas.
Así que lo que vamos a hacer
es simplificarla.
Vamos a quitar todo esto,
vamos a dejar solo el h1
por ahora,
vamos a eliminar todo esto
que ahora mismo no sirve,
¿vale?
Y ahora lo arreglamos
un poco más
y lo vemos mejor.
Vale,
genial.
Lo primero que ya vemos
es que sí,
he cometido un error.
¿Por qué?
Porque se me ha olvidado
cerrar bien,
¿qué pasa?
Que he borrado un div
y el problema
es que he dejado
el cierre del div
por aquí,
aquí al final,
lo vamos a ver,
está aquí,
¿vale?
Entonces ya me está diciendo
que esto está mal,
¿no?
Pero lo mejor de todo
es que cuando he guardado
los cambios
me ha dicho
por qué ha fallado
el compilar
y me lo dice en la web,
no me lo dice en la terminal,
no,
me lo dice en la web
y te dicen esta línea
y tal y además
súper bonito.
Bueno,
pues vamos a arreglarlo,
vamos a guardar los cambios,
a ver ahora sí,
no,
ahora todavía no
porque esto,
esto,
vamos a dejar el div,
vamos a dejar el div
porque esto me lo he cargado
cuando el main,
el main este,
vale,
ahora sí,
venga,
pum,
la hemos dejado más limpio,
más sencillo,
así lo podemos dejar así
a un ladito,
¿vale?
sin que no genere tanto ruido
y podemos revisar un poquito
el código que tenemos aquí
ya de ejemplo.
Primera línea,
import head
from next head,
la primera línea lo que hace
es importar una utilidad
que tiene NextDS
para cambiar
lo que es todo lo que va
dentro,
envuelto
de head,
head es la etiqueta HTML especial
para el title,
descripción,
metatags y todo esto,
entonces lo único que hay que hacer
es importar head
from next barra head
y ya le pondríamos aquí
envuelto
lo que queremos
que esta página
tenga en el head,
en este caso
pues hemos dicho title,
create next app,
aquí ya vamos a poner
nuestro,
a ver cómo lo habíamos puesto,
depter,
¿vale?
y vamos a poner aquí
nuestro,
así,
¿vale?
y ya está,
solo haciendo este cambio
aquí a la derecha
ya podemos ver
que se ha cambiado
inmediatamente,
¿vale?
el favicon
por ahora lo vamos a dejar igual,
pero aquí ya podríamos añadir
pues otro,
el meta de la descripción
y todo esto
y así ya lo tendríamos.
Ahora,
vamos a ver un poquito
esto de los estilos
y los vamos a quitar
porque aquí había
un montón de estilos,
pero aquí ya se ve
un poco lo diferente
y lo raro,
¿no?
¿qué hacen estilos
en línea aquí?
o sea,
¿qué significa todo esto?
¿esto qué es?
¿esto es CSS
dentro de un componente
de React?
esto es muy extraño,
¿vale?
¿qué es lo que pasa?
lo que tiene esto,
este es el CSS en JS,
digamos,
que tiene
next 10
por defecto
que se le llama
style.jsx
que te permite
crear
un CSS
que está
dentro del componente
y que además
tú lo que pongas
en CSS
se refiere
a lo que hay
dentro del componente.
Vamos a verlo
mejor con un ejemplo,
voy a eliminar
todo esto,
¿vale?
voy a eliminar todo esto
y luego hablamos
del de abajo
porque hay dos,
aquí podemos ver
que está el style
y aquí vemos otro
que es style.jsx
global,
este es totalmente distinto,
por ahora vamos a olvidarnos
de este.
Vamos a borrar
todos estos estilos,
¿vale?
Y ahora vemos
pues que no tenemos
ningún tipo de estilo.
Voy a borrar
el class name también
y lo vamos a dejar así.
Entonces,
el style.jsx
al final lo que nos permite
es escribir
CSS,
así que lo que podemos hacer
es decirle
que el h1 este,
este h1 que tenemos aquí
lo vamos a estilar
y vamos a poner
que tiene que tener,
bueno,
lo vamos a centrar
y vamos a decirle
que tiene un font size
de 48 píxeles,
¿vale?
Bueno,
pues como ves
ya está ocurriendo algo,
¿no?
Lo mejor es que ahora
pues vamos a decir
que el anchor,
pues esto ahora
vamos a ponerle
un color así
y el text decoration
pues va a ser none,
¿vale?
Perfecto,
pam,
pues ya ha cambiado,
¿no?
Entonces,
esto alguien diría
vale,
esto está bien,
pero ¿qué pasa
si este h1
lo tienes en otra página?
Así que
podría haber una colisión,
¿no?
Esto no funcionaría.
Pues no,
a ver,
lo que ocurre
es que este style jsx
tú te puedes referir
a este h1
que es de aquí,
pero cuando va
al código,
si miramos,
inspeccionamos aquí
el h1,
vamos a ver
lo que ha ocurrido.
Lo que ha ocurrido
es que ha generado
una clase,
¿vale?
Así que lo que ha hecho
al compilarlo
es decir,
ah,
tú quieres este estilo
en este h1
en concreto,
pues no te preocupes
que yo esto
te lo transformo
en un hash,
en un class name
para que no haya
ningún tipo de colisión
con ningún otro componente
en ningún otro sitio.
Y esto lo veremos
ahora en un momentito
cuando creemos otra ruta
y tengamos otro h1,
¿vale?
Y lo mejor de todo
es que aquí
pues podemos ver
pues los estilos
que hemos puesto,
¿vale?
Así que lo mejor,
claro,
¿cuál sería el único problema?
Que tuviésemos otro h1.
Si tenemos otro h1
y en este caso
sí que ponemos aquí
otro título,
obviamente
aquí sí,
ay mira,
Sergio Serrano,
más majo,
dice Sergio Serrano
que esto es mejor
que Netflix.
Pues muchísimas gracias,
Sergio.
No sé si es mejor
que Netflix,
ojalá tuviese tanto contenido
como Netflix,
pero bueno,
te lo agradezco un montón.
Mira,
Luis Álvarez dice
que esto le recuerda
a Svelte
y es verdad,
se parece,
¿no?
El tener los estilos
aquí directamente,
esto se parece mucho
a Svelte,
aunque es verdad
que Svelte
dentro de lo que cabe
está como mejor separado,
es mucho más limpio y tal,
pero bueno,
a mí me gusta también
esta del JSX,
¿vale?
Entonces,
si tenemos otro título,
aquí sí que obviamente
va a reutilizar
el mismo estilo,
¿vale?
Pero,
¿qué podemos hacer
para evitar esto?
Imaginad que tenemos aquí
un h1 y aquí otro,
¿no?
Y decimos,
no,
pero este h1
tiene que tener otro,
otro,
no sé,
otro estilo.
Al final podemos seguir
utilizando
Class Names,
¿vale?
O sea,
no estamos obligados
a utilizar los tags HTML,
aunque si podemos hacerlo,
pues mejor que mejor,
¿no?
Y esto nos ayuda
a simplificar
bastante el código
que tenemos que escribir
con Class Names,
tener que acordarnos
de qué nombre
le hemos puesto
a la clase
y cosas así,
¿no?
Entonces,
lo que podemos hacer aquí,
Another Title.
Ahora,
este Another Title
lo que podemos hacer
es poner en el h1.
Además,
lo mejor es que aquí
da igual un poco
la especificidad
que tú pongas
en el sentido
de que
si esto
no se va,
cuando miramos aquí
el título,
si miramos el título,
vamos a ver
que sí que ha puesto
el otro Class Name,
pero ha puesto un hash,
ha puesto el hash
que ya había generado antes
y el Class Name
que le hemos dicho nosotros.
Así que de esta forma
pues ya funcionaría bien.
Si lo dejamos así,
vamos a ver,
pues pasaría un poco
exactamente lo mismo
porque ya ha detectado,
¿no?
Ha detectado
que el estilo
que necesita
es exactamente
el que ya tiene
el h1
de antes.
Entonces,
al calcularlo,
le ha dejado
el Class Name
de antes
y ha dicho,
vale,
pero este Class Name
también lo necesita,
¿vale?
O sea que al final
es lo suficientemente
inteligente
para que no te tengas
que preocupar tú
en cómo se van a pegar
los Class Name,
¿vale?
Vale,
así que con esto
tendríamos los estilos
digamos a nivel
de componente,
pero ¿qué pasa
si quieres tener
los estilos globales?
Claro,
alguien dirá,
bueno,
pero yo lo que quiero
es tener estilos
pues más globales,
¿no?
De todo el HTML
y todo esto,
pues los tienes aquí.
En este caso,
lo que puedes hacer
es añadirle
este atributo,
bueno,
esta prop,
¿vale?
Porque esto serviría
como una prop
más que un atributo,
pero bueno,
este atributo especial global
que hace que estos estilos
que vemos aquí,
todos estos estilos
en realidad
van a ser globales.
Por ejemplo,
si yo en lugar
de poner este H1 aquí
lo pongo aquí,
hacemos que el estilo
de este H1
sea global
y lo podemos ver
que esto cambia
porque si aquí
lo inspeccionamos,
lo que nos vamos
a poder encontrar,
bueno,
en este caso
no sé si,
a ver,
si,
no,
vale,
me ha dejado el class name
pero si miramos
los estilos
aquí abajo
veremos que en realidad
el class name ese
no tiene estilos,
¿vale?
Pensaba que le quitaría
incluso el class name
pero no se lo ha quitado,
pero lo que sí que podemos ver
es que en realidad
el estilo
le viene
de la etiqueta H1
porque ahora es global,
no es a nivel de componente
y cuando es global
dice,
bueno,
pues yo le dejo
la etiqueta H1.
Si fuese un class name
dejaría el class name
porque no lo transformaría,
¿vale?
Entonces,
ahora hemos hecho
que ese estilo
sea global,
¿vale?
Vamos a tirar para atrás
este cambio
y lo que vamos a ver
es cómo interesante
es el tema
de las rutas
con la exilés,
así que
vamos a quitar esto,
vale,
entonces,
vale,
está muy bien,
tenemos aquí una home,
es todo fantástico,
pero como seguimos
haciendo crecer
nuestra página,
¿no?
Como decimos,
bueno,
ahora aquí tenemos la home,
me gustaría poder ir
a otra página,
o sea,
me gustaría que aquí
en lugar del welcome to,
vamos a poner aquí,
vamos a quitar todo esto,
aquí vamos a poner ya
nuestro tututu,
¿cómo le hemos llamado
nuestra app?
Depter,
Depter,
venga,
quitamos este otro título,
vale,
tenemos ahí Depter
y pongamos que aquí
pues ponemos otra
otra página
y decimos que queremos ir
por ejemplo,
no sé,
Deptit,
Deptit suena muy mal,
suena porno,
Dep,
Debbie,
vamos a llamarle
Debbie,
Debbie,
o Debbie,
o Debbie,
Debbie,
Debbie,
Debbie,
Debbie,
entonces,
lo que,
es que no sé cómo llamarle al tweet,
no sé cómo es,
Debbie,
bueno,
vamos a poner que tenemos otra,
o timeline,
vale,
tenemos el timeline,
vamos a ir al timeline
y ya está,
más fácil,
venga,
pues imaginemos que tenemos ese timeline,
¿no?
Y aquí pues le queremos decir
que esto está dentro de una sección,
o mira,
esto va a ser un app
de navegación,
vale,
ponemos dentro del timeline
y entonces así ya hacemos
que este app pues tenga algo de estilo,
el app,
todo lo que esté en el app
pues sea más grande,
vamos a por ahora centrarlo
para que salga por ahí
y ya está,
vale,
tenemos el timeline,
¿no?
Y si le damos un click,
pues esto revienta
y nos dice que esto es un 404
y que no funciona,
vale,
¿cómo podríamos crear una ruta
fácilmente en XIS?
Lo mejor es que las rutas,
en realidad,
es creando archivos
y eso es una de las cosas que
está muy bien a veces
y otras veces pues no tanto,
¿no?
Hay veces que esto le gusta a la gente
y atrás que no.
Entonces,
¿cómo podemos crear una ruta
que vaya al timeline?
Lo único que tenemos que hacer
es crear una carpeta
y le llamamos timeline
y dentro creamos el index.js.
Hay una cosa
que no sé si te has dado cuenta,
pero no estamos importando React
en ningún sitio,
¿vale?
Y esto es porque
podríamos hacer import React
from React,
¿vale?
Y esto funcionaría exactamente igual,
bueno,
si voy aquí a la home,
todo funcionaría igual,
pero no es necesario,
esto lo quita
tiene ya directamente
lo importan XDS
por detrás
para que tú no te tengas
que preocupar
y tener que estar
constantemente haciendo
import React
from React,
¿vale?
Así que por eso
no lo importamos
y en este caso,
pues igual,
aquí lo único que deberíamos hacer
es un export default
y le decimos que al timeline
lo que tiene que renderizar.
This is the timeline,
vale,
pues ya tenemos aquí el timeline,
vamos a ver si funciona.
Vale,
pues ya tenemos el timeline,
ya hemos creado
una ruta más
simplemente
creando un archivo nuevo.
Creamos un archivo
y ya funciona.
Ah,
mira,
aquí tenemos a,
me estáis diciendo
fit debit,
la verdad es que debit
tiene buena pinta,
pues me lo voy a apuntar,
¿vale?
Debit,
debit lo voy a dejar por aquí,
es que me ha gustado,
debit.
Vale,
pues ya está,
ya tenemos una ruta
totalmente nueva,
¿no?
Así que ahora,
¿qué pasa?
Pues vamos a comprobar
lo que comentábamos antes.
Si tenemos otro h1,
¿no?
Si hacemos aquí,
decimos,
vale,
pues aquí vamos a poner
el h1,
vamos a poner aquí el h1,
pam,
y tenemos aquí
style.js,
o sea,
style.jsx.
Aquí hay un tema,
¿vale?
Que es importante.
Cuando utilizamos el style.jsx,
tenemos que utilizar las llaves
porque,
o sea,
aquí no podemos pasarle
un string,
¿vale?
Aquí no va un string
ni va al CSS directamente,
¿vale?
Lo que tenemos que poner
son unas llaves
para evaluar el string
que le ponemos dentro,
¿vale?
Importante.
Y además,
también importante
es que en React
siempre tenemos que hacer
que solo se devuelva
un elemento.
Así que,
como podéis ver,
aquí hay un error,
así que lo que tenemos que hacer
es tener un fragment aquí
y otro aquí,
¿vale?
Entonces,
ahora esto
ya sé que funciona.
Y aquí ya,
pues le podríamos poner
el h1,
aquí le cambiamos un poco
los estilos
y le ponemos
que este es de color rojo.
Guardamos los cambios
y ya podemos ver
que este y este
pues tienen estilos
totalmente distintos.
Pero hay un problema
con todo esto.
No sé si te has dado cuenta.
Vamos a poner otro link
aquí.
Voy a poner href,
vamos a ir a go home
porque si te has fijado,
esto lo que está haciendo
no es una SPA.
Y alguien me dirá,
oye,
tú me has dicho
que esto sería una SPA
y me estás engañando.
Me estás engañando.
Ahora te lo explico.
Mira,
el caso es que
si vamos a timeline
y vamos a go home,
puedes ver aquí arriba,
si te fijas aquí arriba,
que está haciendo
una navegación completa.
Está haciendo
una navegación completa.
Lo podemos ver claramente
si inspeccionamos
el código,
¿vale?
Vamos a inspeccionar
el código.
A ver,
aquí.
Entonces,
si vamos aquí
a Nickwork
y guardamos esto,
ahí,
vale.
Vamos a ver ahora.
Si me voy a timeline,
bueno,
igual ahí abajo
no se ve mucho,
¿no?
Aquí mejor.
Vale.
En all.
Vale.
Podemos ver que ha hecho
una recarga de timeline.
Si voy a la home,
pues de nuevo,
ha hecho una recarga entera.
Si fuese una SPA,
no volvería a recargar la página
y no veríamos esto,
sino que cargaría solo
lo que necesita.
Así que,
¿cómo podemos solucionar esto?
Vale.
Pues esto,
en realidad,
es tan sencillo
como utilizar otro paquete
que tiene Next.js.
Vamos a hacer un import from,
tenemos Next
y al poner la barra
pensaba que me pondría
lo que tendría
porque ahora no me acuerdo
si es link o es,
creo que es link.
Vale.
Vamos a buscarlo
en un momento.
Next link.
Next yes.
Sí,
next link.
Vale.
Y aquí importamos link.
Vale.
¿Qué hace el link este?
Al final,
el link lo que hace,
porque como el sistema de rutas,
si te fijas,
no tenemos ningún rutas.js,
no tenemos todas las rutas ahí,
sino que simplemente
ya las ha detectado.
Así que lo que tenemos que decir es,
vale,
este anchor que tengo aquí,
en realidad,
lo que quiero
es que utilices el sistema,
el SPA de Next.js
y evites recargar la página entera.
Así que utilizamos el link
y lo que hacemos
es pasarle el href.
O sea,
esto que teníamos aquí,
mira,
si es que al final
lo que podríamos hacer
y ahora veremos qué pasa.
En lugar de utilizar este anchor,
utilizamos el link.
¿Vale?
Y guardamos los cambios.
Vale.
Y esto es lo que nos debería...
¡Ay, no!
Este no puede ir.
Perdón, perdón.
Es que este es el de Depter.
Este no.
Aquí, aquí.
Al de Timeline.
¿Vale?
Aquí.
Timeline.
Y ahora veremos
qué nos cuenta.
Vale.
Entonces,
esto ahora se supone
que cuando le dé a Timeline
debería ir directamente
al Timeline
sin refrescar.
¿Vale?
Y, de hecho,
ya se puede ver
que no lo hace.
Aquí no está haciendo la recarga.
Esto es importante.
Solo cambiando eso,
lo que hemos logrado
es hacerlo SPA.
Lo vemos aquí súper fácil.
¿Vale?
Voy a refrescar esto.
Yo refresco.
Aquí he cargado localhost.
Y ahora voy a navegar.
Me voy a Timeline
y ya puedes ver
que ahora sí
solo ha cargado
lo que necesitaba.
Y aquí podemos ver
el Code Splitting
que está haciendo
de forma totalmente automática
Next.js.
Y es que aquí,
este Timeline,
si le damos,
solo va a tener
el código
de la página
del Timeline.
Esto,
en el otro proyecto
que hicimos,
esto lo logramos.
Hicimos el Code Splitting
por rutas,
pero tuvimos que hacer
los imports dinámicos,
tuvimos que hacer
un montón de cosas,
¿no?
No fue tan fácil como,
ah, bueno,
quiero hacer el Code Splitting
de mis rutas y ya está.
No, no.
Tuvimos que hacerlo manualmente.
Entonces,
aquí ya puedes ver
que lo ha hecho
automáticamente
por nosotros
sin tener que hacer
absolutamente nada.
Entonces,
hasta aquí bien,
¿no?
Esto funciona.
Pero ahora,
si me voy al Go Home,
si le doy al Go Home,
pues vuelvo a recargar
la página.
Así que deberíamos
también arreglarlo
en el Timeline.
Ahora veremos
que nos está diciendo algo,
¿eh?
Aquí hay un pequeño error,
es una tontería,
pero hay que arreglarlo
aunque funcione.
¿Vale?
Tenemos lo del link,
importamos link
from next
barra link
para hacer que nuestros links
sean SPAs
y ahora vamos a ver
que en la consola
tenemos un error.
Un error.
Bueno,
tenemos como una cosa
que se está quejando.
Tenemos este warning
que lo que nos está diciendo
es que estamos utilizando
directamente un string
dentro del componente link
y esto,
aunque funciona,
está deprecado,
está deprecated.
¿Por qué?
Porque realmente,
conceptualmente,
no está bien.
¿Por qué?
Porque este link
que estamos utilizando
no es el anchor
que utilizamos nosotros.
O sea,
lo que tendríamos que decirle
es semánticamente
este link
cómo se tiene que comportar.
Así que lo que tenemos que hacer,
aunque es muy raro,
lo reconozco,
es que tenemos que envolver
el go home
y también en la home
lo que habíamos hecho antes.
A ver,
aquí,
el timeline,
¿vale?
Esto habría que hacer así,
¿vale?
Y lo tendríamos que envolver
con un anchor
para que semánticamente
le digamos al link
que semánticamente
es un anchor
y lo queremos que funcione así,
¿vale?
Así que ahora,
si refrescamos,
ahora sí,
ya no tenemos ningún error.
Si vamos a timeline,
vamos a go home,
pues ya tenemos una SPA.
Súper fácil,
súper rápido.
Ahora,
que,
ah,
sí,
lo que os quería enseñar
es el tema
del React Fast Refresh.
¿Esto qué es?
Esto es que
cuando haces un cambio
en un componente
se renderiza súper rápido.
O sea,
no se refresca la página,
¿vale?
No es que la página
se refresca automáticamente.
Esto antiguamente
se llamaba
Hot Module Replacement
o React Hot Loader también.
Bueno,
ha pasado por muchas fases,
¿vale?
Pero tenía muchos fallos,
tenía muchos problemas,
configurarlo,
era un coñazo.
Pero en este caso
ya lo tiene incorporado
NextDS,
han trabajado el equipo
de React para ti,
para que esto funcione.
Y lo que podemos ver
es que si yo aquí
le cambio el nombre
con las dos T's
y guardo el cambio,
pues puedes ver
que sin refrescar la página
hemos visto el cambio aquí,
¿vale?
Y aquí podemos ver
este Fast Refresh
Rebuilding Done.
De hecho,
de hecho,
esto,
en realidad,
lo podríamos ver también
creo que en los estilos.
Este cambio,
si hacemos aquí
le ponemos que sea en rojo,
de la misma forma,
sin refrescar la página,
sin hacer absolutamente nada,
ha cambiado este color directamente.
Lo cual hace que
hacer cambios
es súper rápido, ¿no?
Puedo ir guardando,
voy guardando,
y ya ves que es que
es casi, casi, casi inmediato.
O sea, es brutal.
O sea,
tú puedes ir cambiando aquí
y ya no te sale a cuenta
esto de abrir las herramientas
de desarrollo
e ir cambiando manualmente,
¿vale?
Esto sería el React Fast Refresh.
Es una cosa de React
y como todo lo que estamos tocando
son cosas de React,
pues ya funciona de gratis,
¿vale?
Así que voy a pasarme por el chat
a ver qué me estáis comentando
y ahora volvemos por aquí,
¿vale?
Vale, pues,
pues,
¿qué más me comentáis?
A ver,
creo que tenemos por aquí
un troll.
Voy a ver si lo puedo echar.
Sí,
que está por ahí
y que no lo para.
A ver.
Ahora lo he hecho,
ahora lo he hecho,
al pesado ese.
Es que hay alguien
que está poniendo ahí
todo el rato,
no sé,
cosas como en inglés,
¿no?
O yo qué sé.
A ver, chico.
Borrar,
fuera de aquí.
Ay, no, borrar no.
Te quiero echar.
Temporalmente.
Añadir.
Si lo añado como moderador,
esto puede ser un locurón,
¿eh?
Venga, va.
Ya está.
Y esto.
Vale.
Pues ya la está.
A ver qué me comentáis.
Queremos ver APIs con Next.
Juan Carlos.
Juan,
no te preocupes.
Vamos a ver APIs con Next.
No lo vamos a ver hoy,
ya te lo digo,
porque hoy es más
una iniciación de Next.
YS,
empezar el proyecto y tal,
pero lo veremos.
Y a lo mejor,
si queréis,
lo que sí que podemos hacer
es ver cómo funciona
la que ya te viene por,
la que te viene directamente,
¿vale?
Así que,
pero sí,
veremos APIs en la serie de vídeos.
Así que no os preocupéis,
no sé en qué vídeo exactamente,
pero seguro que lo veremos.
¿Se podría utilizar
material UI con Next.
YS?
Sí.
Sería mejor que
Style Components,
es una opción.
Style Components
se puede utilizar
sin ningún tipo de problema
con aplicaciones
de Next.
YS,
¿vale?
Es muy parecido
a Nox,
o Nox,
Next.
YS,
sí,
que es de Vue.
Está hecho con Vue,
está basado,
obviamente,
en Next.
YS,
Next.
YS llegó antes,
pero se parece mucho.
La idea es muy,
muy,
muy similar.
Está brillosito,
sí,
me da brillo,
creo que es de un poco el calor.
No estoy sudando mucho,
pero creo que es el foco.
A ver.
No sé si mejor
o es que me ha dado el sol,
pero bueno.
Vamos a usar context en esta app,
Claret,
sí,
utilizamos context en esta app,
¿vale?
Explica la diferencia
entre getInitialProps
y useEffect.
Vale,
pues probamos,
podemos ver esa,
la del getInitialProps
y useEffect.
Vamos a ver esa,
¿vale?
Que me parece interesante.
El getInitialProps
sigue vigente,
es que hace mucho que no lo uso
y estoy retomando recién.
Lo vamos a ver ahora
y os lo explicaré.
Utilizaremos el getInitialProps
porque hasta hace muy poco
era el por defecto
como se tenía que hacer,
pero veremos que ahora
hay dos métodos
que vienen a deprecar
el getInitialProps,
¿vale?
Está el getStaticProps
y el getServerDataFromProps,
bueno,
no me acuerdo de los nombres,
pero lo veremos en un momentito.
Por ahora,
getInitialProps,
digamos que es como lo vamos a hacer,
pero no,
dentro de poco,
o ya nos deberíamos ir acostumbrando
a no hacerlo así.
Veremos las tres formas,
¿vale?
Veremos el getInitialProps
porque es el más típico,
¿vale?
Que es un método especial
que ahora explicaremos
para qué sirve
y luego,
pues veremos los demás.
Bueno,
luego en otro día,
¿vale?
Ahora,
ya os digo,
hay dos métodos
que vienen a deprecar
el getInitialProps,
pero es verdad
que el getInitialProps
es que ahora todavía está
en todos los sitios,
entonces es muy difícil.
Creo que vale la pena
aprender el getInitialProps
y además creo que para empezar
está bien,
pero luego en otras clases
veremos el resto,
¿vale?
Veremos los otros métodos
que te pueden servir
para hacer esto.
Rambito me dice
¿cómo hago para ser
tan maravilloso cada semana?
Y en realidad creo que
sois vosotros los que me hacéis
joven, interso y suave
y contento,
¿vale?
Así que es eso.
¿Cuál es la complejidad
de pasarse de React
a Next.js?
Ninguna,
porque Next.js utiliza React,
¿vale?
Entonces es verdad
con lo que os he ido explicando
para que vayáis viendo
cómo os tenéis que adaptar
mentalmente,
pero en realidad
es muy fácil,
tampoco es tan complicado.
Así que bueno,
pues eso.
Ya dice por aquí Nicolás
que ya no se utiliza
GetShotProps,
ahora se usa GetStaticProps.
Sí y no,
¿vale?
O sea,
sí se utiliza
el GetStaticProps,
pero también hay otro método
que no solo es
el GetStaticProps,
o sea,
tenéis la posibilidad
no solo de hacer
el GetStaticProps,
también podéis hacer
el GetServerSiteProps,
¿no?
Porque hay veces
el GetStaticProps
sería más
si queremos hacer algo
que sea realmente estático,
¿no?
Queremos que nuestra página
se renderice
directamente en el servidor
con información estática,
más a lo Gatsby,
¿no?
Pero también hay veces
que queremos que,
por ejemplo,
los resultados de una búsqueda
y queremos que sea
muy,
muy dinámico
y necesitamos que sea
que cada segundo
cambie y tal,
pues puede ser
que utilicemos
el GetServerSiteProps,
¿vale?
Pero por ahora
vamos a pensar
en el GetInitialProps
y ahora lo veremos
un poquito
el GetInitialProps,
¿vale?
¿Qué más?
¿Qué más?
Diferencias entre
Next y Gatsby
la he comentado antes,
pensad que Gatsby
es más para cosas estáticas
y Next te permite
ir más allá,
¿vale?
Y creo que es bastante
más redondo
NextYes,
¿vale?
Librería para manejar
State,
veremos,
esto lo quería comentar
también,
veremos si,
tengo que pensar
cuál sería el caso
de uso,
¿vale?
Pero quiero enseñar
en esta serie de vídeos,
quiero ver
si podemos ver
un hook especial
que es de los creadores
de Vercell
que se llama
SWR
que es
Stale While Revalidate
y es una forma
de hacer fetching
de datos
que es bastante
interesante
que está muy orientada
justamente a hacer cosas
con Jamstack
que te da
algunos beneficios
y estoy pensando
a ver cómo
lo podríamos ver
en algún ejemplo
de NextYes,
¿vale?
Así que algo así,
esto intentaré
que lo veamos
para que lo sepáis.
¿Se puede manejar
el historial y demás
como un React Router?
No es exactamente
como un React Router,
el historial
y hacer,
o sea,
puedes importar
NextRouter,
puedes hacer un,
tienes hooks
como hacer un
UseRouter,
o sea,
que puedes cambiar
el historial,
no hace falta
que hagas el tema
de navegar
solo con el link,
igual que hemos hecho
el NextBarraLink,
tienes el NextBarraRouter
y puedes utilizar
el router,
mira,
lo vamos a ver
en un momento,
aunque no funcione,
para que veáis
el ejemplo,
¿vale?
de lo que estoy hablando.
Al final,
ay,
esto,
¿dónde está mi...?
Vale,
aquí,
vale,
¿dónde me he dejado esto?
Yo es que lo tenía
en pantalla completa.
Vale,
el caso,
para que veáis
un poco a lo que me refiero,
de la misma forma
que hemos hecho
el ImportLink,
podemos hacer
ImportRouter,
no,
ImportUseRouter
from Next
y aquí
BarraRouter,
¿vale?
Y aquí,
una vez que haces esto,
aquí ya tienes
el router,
aquí este router,
si lo miramos,
pues esto
debería funcionar
y deberíamos ver
que tenemos,
pues eso,
el pathname
y tal.
Además,
pues podemos hacer
un replace,
podemos hacer el push,
¿no?
Podemos hacer un push,
pues para ir a una ruta
de forma programática,
esto seguro,
seguro que lo vamos a ver
también en la serie de vídeos,
¿vale?
O sea,
que no os preocupéis,
el uso del URouter
y cómo funciona,
seguro que lo vemos
y también el hacer
una forma programática
de cómo movernos,
¿vale?
Así que,
pero para que lo sepáis,
¿vale?
Que se puede utilizar
como un real router
en este sentido,
no en utilizar
como componentes
y cosas así,
esto no.
Tienes que utilizar
ya más librerías externas
que no creo
que lo veamos.
¿Qué más?
¿Qué más?
¿Podemos usar JS variables
en el template string?
Sí,
y eso es bastante interesante.
En style JSX,
por supuesto,
podemos utilizar variables.
Dice,
¿por qué la segunda página
no toma la fuente?
Esa es una buena pregunta,
es verdad,
vamos a verlo.
¿Por qué no toma la fuente?
Porque si la fuente,
a ver,
si vamos al timeline
y la fuente
está en el global,
vale,
ah, amigo,
ya sé,
ya sé por qué,
ya sé por qué pasa esto.
¿Por qué no sale la fuente?
Si hemos puesto aquí
que estos estilos
sean globales,
¿por qué no está tomando
la fuente?
Vale,
esto tiene una explicación
y la explicación
es que este estilo global,
hemos dicho que sea global,
pero no hemos dicho,
o sea,
es global cuando ese componente
está montado.
¿Qué pasa?
Que el componente
que tenemos aquí
de la home,
este componente
se desmonta
y al desmontarse
está quitando los estilos,
aunque sean globales.
Por eso,
claro,
si copiamos estos estilos,
si estos estilos
los pusiéramos
en esta página,
pues ya lo tendríamos solucionado.
¿Por qué?
Porque estamos diciendo
que sean globales,
pero no que,
o sea,
son globales
cuando están cargados.
Para solucionar esto,
lo que deberíamos utilizar
es una página especial
que en NextYes
app,
a ver,
ahora no me acuerdo
da un poco
en app
custom app,
no,
custom app,
lo que podemos hacer
es tener una página
que es especial
que le podemos decir,
vale,
esta página
es la que básicamente
va a envolver
nuestra aplicación,
¿no?
Entonces,
hacer este custom app,
al final,
como ponemos aquí,
lo tenemos que crear
con un barra,
de hecho,
vamos a hacer esto,
que esto
es bastante importante
y la gente
al principio
suele necesitarlo
bastante.
Entonces,
aquí lo que podemos hacer
es persistir
parte del layout
que tiene que ser
para todos los componentes,
porque claro,
estos estilos,
aunque hemos puesto
son globales,
lo que estamos viendo
es que se desmontan,
¿no?
Y esto,
pues no queremos que ocurra,
lo que queremos
es poder utilizarlos,
¿no?
Claro,
¿qué pasa?
Que ya nos dice aquí
que hay un pequeño problema
y es que
si hacemos un cambio
a este archivo
app.js
vamos a tener que
quitar el servidor
y volver a levantarlo,
¿vale?
Esto sí que no va a tener
el react refresh,
este fast refresh,
¿vale?
Vamos a tener que hacer
un reset de esto.
Entonces,
lo que necesitamos hacer
básicamente sería,
tenemos esta app,
vamos a hacer
que lo único que haga
por ahora
sea esto.
Esto sería la app
y lo que hace aquí
es que esto recibe,
como podemos ver,
el componente
y page props,
que son las páginas
que debería recibir
la página.
¿Vale?
Entonces,
vamos a hacer un export,
default de esta función.
Por ahora esta función
no tiene mucha historia,
pero lo que podríamos hacer
sería básicamente
que esto
ya tuviese aquí
unos estilos,
¿no?
Así que hacemos aquí esto,
hacemos esto aquí,
¿vale?
Y en estos estilos
vamos a decir
que son los globales,
que ahora estoy pensando
que esto lo podríamos
haber solucionado
de otra forma,
¿eh?
Pero bueno,
vamos a probar
si esto funciona
y así conocemos
el concepto de app,
¿vale?
Esto,
ay,
estos estilos globales
los ponemos aquí,
¿vale?
Entonces,
ya nos ha dicho
que esto no va a funcionar
así de gratis,
¿vale?
Así que vamos a tener
que cerrar esto
y volver a levantarlo,
¿vale?
No se ha visto
porque estaba,
¿vale?
Pero lo que he hecho
es refrescar,
¿vale?
El servidor,
voy a poner por arriba,
allá,
¿vale?
Vale,
pues he refrescado el servidor
y ahora sí podemos ver
que tenemos el disk de timeline
sí que tiene aquí,
en este caso sí que tiene los,
a ver,
que la consola
se está quejando de algo,
vamos a ver,
ah, no,
nada,
vale,
vamos a refrescar,
vale,
aquí vemos que ahora sí
que tiene los estilos,
si voy a la home,
pues también tiene los estilos,
¿por qué?
Porque hemos hecho
que estos estilos
que son globales
persistan
en toda nuestra aplicación.
Claro,
si le decimos
que tenemos unos estilos globales,
pero están a nivel de componente,
cuando ese componente
se desmonta,
esos estilos,
aunque sean globales,
se borran también,
¿vale?
Esto es bastante importante,
así que buena pregunta,
una buena práctica.
Esto,
esto que hemos hecho,
en realidad,
puede ser innecesario,
¿no?
¿Por qué?
Porque podríamos utilizar
la composición de React
para crear,
digamos,
un componente
y de hecho ya podríamos
empezar a crear componentes.
Podríamos tener un componente
que,
por ejemplo,
ahora le podemos llamar,
a ver,
vamos a crear una carpeta
o app layout,
por ejemplo,
¿no?
Podemos crear una página,
un componente
que sea layout,
index.js,
export default,
app layout.
Una solución
que podríamos hacer
es,
en lugar de tener
este app.js,
¿no?
Y tener que tocar
ese archivo
cuando no es necesario,
podríamos tener
este layout aquí.
Vamos a hacerlo aquí.
Hacemos el return
y este layout
lo que va a recibir
por props
va a ser el children,
que ahora veremos
por dónde aparece.
Vale,
aquí se me ha olvidado
el function,
¿vale?
Aquí ponemos los estilos,
vamos a ponerlo bien,
¿vale?
Que no se nos olvide
el React fragment
porque aquí
encendimos el children
y además vamos a ver
qué podemos hacer
con este app layout,
con la composición.
Es que esto de React
es lo mejor.
Claro,
lo que podemos hacer
es que este children
siempre esté envuelto
de un main,
¿no?
De esta forma
ese main
además lo podríamos
ya estilar aquí
porque si no
vamos a eliminar
este app
que es lo que habíamos
hecho antes,
fuera.
Y lo que vamos a hacer
es utilizar
este layout,
¿vale?
¿Veis que aquí
hay un main?
Esto es la home
y necesitaba este main.
Por lo que podemos hacer,
bueno, mira,
aquí tenía un container,
pero este container
no sirve para nada
así que por ahora
lo vamos a eliminar
y esto también fuera,
¿vale?
Pero ya podemos ver aquí,
¿no?
Este main
que tenía tal,
pues lo que podemos hacer
ahora es utilizar
nuestro app layout
y lo que hacemos
en lugar de utilizar
el main
es utilizar el app layout.
Así que lo que hacemos
es mover esto aquí,
esto por aquí,
¿vale?
Esto aquí.
Ya tenemos,
este app layout
es el que nos va a dar
los estilos globales
y todo esto,
¿vale?
Entonces en el app layout
tenemos aquí el main
y el children,
o sea que el main bien
y ahora en el timeline
lo mismo,
o sea,
aunque esto aquí
no estaba utilizando el main,
pero bueno,
es buena idea,
¿no?
Que lo utilice.
Ahí,
aquí.
Ahora envolvemos
toda nuestra aplicación
con esto
y ni siquiera hace falta
que,
o sea,
los estilos
los podríamos envolver también,
pero no hace falta como tal.
Vale,
y en realidad,
pues esto debería estar funcionando.
Para ver si está funcionando
vamos a poner
monospace,
por ejemplo.
A ver.
Vale.
Ahora como hemos cambiado
el app .js,
no sé si tendremos que
volver a cerrar
porque esto está en compiling.
Vamos a volver a resetearlo
como hemos borrado
el archivo este.
A ver.
Ahora está compilando,
por eso está petando.
Me he puesto ahí en medio,
pero...
Me voy a poner aquí.
Vale.
Pero ahora podéis ver
que está funcionando
como esperamos.
Está utilizando el monospace.
Lo que hemos hecho
es crear un componente
que le llamamos
app layout.
Este layout
va a ser como el layout
de toda nuestra aplicación,
por lo tanto,
es común
para toda la aplicación
y lo que podemos hacer
es que todas las páginas
utilicen este app layout.
Para que tenga todavía más sentido,
lo que podríamos hacer,
por ejemplo,
es que en lugar de importar
el head
en todas nuestras páginas
y tal,
pues podríamos hacer
que este app layout
también sea el que añade el SEO.
¿Vale?
Así que la razón
por la que no lo hacía
era eso,
pero podríamos solucionar
o como lo hemos visto
del app
o con esto.
¿Vale?
Así que esas sean
las dos formas.
¿Vale?
He tenido que colocar
el guión bajo
antes,
¿Vale?
Porque es un fichero especial.
El guión bajo
app.js
es un fichero especial
de NextGS
que es el que detecta
que se quiere hacer
un componente
que es el que envuelve
la aplicación.
¿Vale?
Es como algo
más personalizado.
Normalmente no se necesita
y ya hemos visto
que hay una solución
para no tener que hacer eso.
Pero hay un componente
que por defecto
lo que hace
es envolver nuestra aplicación
y podríamos utilizarlo
y customizarlo
para nuestras necesidades.
Ya te digo
que normalmente
puedes encontrar
otra solución
como hemos hecho al final.
¿Vale?
Enrique Moreno
dice que NextGS
dice que tiene muchas bondades
pero ¿cuáles serían
sus faltas,
sus falencias,
sus carencias?
Diría.
Bueno, pues yo diría
que a ver,
una de sus carencias
aunque no es una carencia
es un problemita
que puede tener,
¿Vale?
Es que al final
te estás atando a algo,
¿no?
Un framework
lo que te da
es muchísimas funcionalidades
pero te estás atando a él.
De alguna forma
te estás como firmando
un contrato.
Entonces,
mi recomendación
sería
que donde utilicéis
NextGS
no sean todos
vuestros componentes.
¿Vale?
O sea,
¿qué quiere decir esto?
Por ejemplo,
vamos a ver un ejemplo.
Si yo ahora tengo
esta página,
¿no?
Y tengo este link,
este link que utilizamos
que es el de Next,
NextLink,
esto al final
puede ser problemático.
¿Por qué?
Porque si tenemos
en toda nuestra aplicación
que estamos utilizando
este link
que es el de NextGS
y tal,
cuando lo queramos cambiar
el día de mañana
si lo queremos cambiar,
pues bueno,
lo que se puede hacer
es crear una serie
de componentes
que de alguna forma
envuelvan esta funcionalidad
y el uso de cosas
de Next
esté lo más limitado posible.
Eso podría ser una solución.
Y por supuesto
que sea que es toda la,
todo lo que es
la lógica de negocio
y tal,
no la metáis
vuestros componentes,
que eso será mucho más fácil
de poder reutilizarlo
y tal.
¿Vale?
¿Qué diferencia hay
entre el app
y el document?
Digamos que el document
está todavía más arriba,
¿vale?
Y el personalizarlo además
pues tiene otros problemas también.
¿Por qué?
Porque el app,
digamos que es
un poquito más bajo
y el document
es todavía más arriba
porque lo que te permite
es meterle
pues al HTML,
le puedes poner
props al HTML,
le puedes poner
al tag del body.
Entonces,
sería otra solución,
también lo podrías hacer aquí
pero creo que
no es tan necesario.
Yo creo que
hay que tener en cuenta
además que el document
solo está renderizado
en el servidor.
El document solo
se renderiza en el servidor
y no se renderiza
en el cliente.
Entonces,
yo creo que para lo que hemos hecho
a veces puede tener sentido
por si tienes que meter
algún tipo de tags
o tal que se cargue,
¿no?
Como un script en línea,
cosas muy especiales,
Google Analytics,
cosas así,
pero si lo puedes evitar
pues mejor.
¿Vale?
¿Qué más?
¿Qué más?
¿Qué más?
Por aquí,
a ver,
que me habéis puesto
por arriba
un montón de cosas.
React Query,
¿cuál sería la diferencia
entre React Router
y Next Link?
Pues Next Link
sería solo para añadir
el link del anchor
y Next Router
lo que te da es
el objeto completo
del router
que lo que puedes hacer
es navegaciones programáticas
pero no es lo mismo
que tú tengas un link
que tú lo que quieres
es que cuando el usuario
le dé,
vaya,
que otra que tengas
el objeto router
que cuando haga una acción
el usuario,
bueno,
aparte que el objeto router
te da toda la información
de dónde estás,
los parámetros que hay,
cosas así,
¿vale?
O sea,
hay bastante diferencia.
O sea,
el Next Link solo es
tengo este link
y lo que quiero
es que cuando haga clic
se vaya con navegación SPA
a otro sitio,
eso sea el Next Link,
el Next Router lo utilizaríamos
si es más complejo
lo que queremos hacer,
si queremos ver
los parámetros de la ruta,
si lo que queremos
es reemplazar la URL
por otra
cuando abrimos una modal,
si lo que queremos
es que cuando hace
un contacto el usuario
y falla
lo redirigimos a otra página,
eso son cosas,
¿no?
que son más programáticas,
pues ahí utilizaremos
el Next Router,
¿vale?
¿Qué más?
¿Qué más?
¿Solo se puede exportar
en un servidor de Node
o permite para un servidor Apache?
¿Solo se puede
en un servidor de Node?
O sea,
ya está preparado para Node,
pero igualmente
tampoco entiendo muy bien
lo del servidor Apache
porque al final
un servidor Apache
es agnóstico,
¿no?
O sea,
podríamos tener
el servidor Apache,
el servidor Apache
podrías, por ejemplo,
servir las páginas estáticas,
¿vale?
¿Cuando no necesitas SEO?
Bueno,
la verdad es que
lo bueno de Next Router
es que viene bastante preparado
para el tema de SEO,
¿vale?
¿A que alguien contento
esté el Wild Revalidate?
¿Cuándo no es beneficioso
usar Next.js como solución?
Bueno,
pues Dante te comentaba esto,
¿cuándo no necesitas SEO?
Sí,
cuando necesitas una aplicación
que es lo suficientemente pequeña,
por ejemplo,
la de Giphy
que teníamos nosotros,
¿no?
Pues era muy pequeñita
y no pasaba nada
si no tenías
servidor rendering,
al final,
el tener servidor rendering,
el tener temas de bundle,
aunque sea la build
para hacer estáticos,
eso no solo implica
más código,
sino que al final
lo que implica
es más trabajo,
así que tenlo en cuenta.
Vale,
¿qué más?
Os voy a enseñar,
os quería enseñar esto,
¿no?
Antes hemos hecho
la prueba esta del Giphy,
esta del Giphy,
vale.
Habíamos visto
que si yo desactivaba
el JavaScript
de esta página,
pues que no salía nada,
¿verdad?
Vamos a verlo rápidamente.
Si yo desactivo aquí,
esta es una aplicación
que hicimos
con Create Rackup
y si refresco,
pues me dice
que necesita JavaScript
para utilizar esta.
¿Qué pasa si tenemos esta?
Que vale,
ahora es bastante sencilla,
¿no?
Pero,
¿qué pasaría
si desactivamos aquí
JavaScript?
Vamos a probarlo
y refresco.
Vale,
pues estoy refrescando,
JavaScript está desactivado,
pero puedes ver
que no notas
nada diferente,
¿verdad?
De hecho,
si le doy a Timeline,
¿qué pasa?
Pues que va.
¿Por qué?
Porque al final
esto no deja de ser
un link
que sin JavaScript,
pues esto lo va a entender
el robot de Google,
lo va a entender
un usuario
y esto es súper interesante.
¿Por qué?
Porque imaginemos
que el JavaScript
que tiene tu página,
pues,
o el dispositivo
que tiene el usuario
es súper lento,
¿no?
¿Qué pasa?
Que en el de Giphy,
hasta que no se carga
todo el JavaScript,
no funciona la página.
Pero en este
no solo puede ir viendo,
sino que incluso
si tiene links
y le da,
aunque no esté
el JavaScript cargado,
funciona.
Entonces,
esta es una gran ventaja,
¿vale?
Aquí tenemos la diferencia.
Aquí podéis ver
que está,
aquí lo pone,
que está JavaScript desactivado,
podemos ver
que en nuestra aplicación
aparece,
que funciona
y que además
si le damos un link,
o sea,
funciona correctamente.
Así que,
esto es algo
a tener muy en cuenta,
¿vale?
Este es uno
de los ejemplos,
de hecho,
claro,
podemos ver
que está aquí
el This is the Timeline,
que todo esto
pues está con
Service Art Rendering,
que se está renderizando
sin ningún tipo
de problema.
De hecho,
aquí tenemos el This is the Timeline
y esto
es una maravilla,
¿vale?
¿Qué más?
¿Se verán rutas privadas?
Pues igual
lo vemos,
¿vale?
Igual lo vemos.
Me lo veré
a ver cómo
lo podemos hacer.
¿Qué más?
¿Qué más?
Hacer una Progresive Webpack
con Next.js
se puede hacer
sin ningún tipo
de problemas.
Igual lo vemos,
aunque a veces,
no sé,
me quiero enfocar más
en temas
de Next.js
y tal,
¿eh?
Luego,
Nicolás Sánchez
dice que Server Site
desactiva
el Static Site Generation.
Y es verdad,
claro,
si quieres que sea Server Site
y que sea información dinámica,
entonces no puede generar
un archivo estático,
¿vale?
Vamos a ver lo del
GetInitialProps
que os comentaba antes,
¿vale?
Y a ver cómo funciona esto
y a qué se refiere exactamente.
Vale.
Uy,
que me he puesto aquí.
Vale,
vamos a ello.
Entonces,
vamos a quitar esto.
Pam.
Tenemos aquí el Timeline.
Vale,
voy a volver a activar.
Voy a activar.
Vale,
ya está activo.
Sí,
parece que sí,
que está activo el JavaScript.
A ver si voy a desactivar
el JavaScript
y no me va a funcionar.
Vale.
Pues entonces,
aquí en las páginas,
por ejemplo,
en Timeline,
este componente Timeline,
podremos añadirle
un método especial
que le llamamos
GetInitialProps.
GetInitialProps.
Y esto,
pues,
le tenemos que pasar
a una función.
¿Qué tiene este
GetInitialProps?
Vale,
esto no es una cosa
de React,
¿vale?
Esto no lo intentéis
en un componente vuestro
que tengáis en un proyecto
de React.
Esto es algo
solo y exclusivamente
que funciona
con NextYes,
¿vale?
Lo que está haciendo
es que
los componentes
que son de tipo página
le está añadiendo
este método especial
que se llama
GetInitialProps
y ya hemos visto
que también está
el GetStaticProps
y el GetServerSideProps.
¿Vale?
Y esos dos,
estos dos últimos he dicho,
GetStaticProps
y GetServerSideProps
son los nuevos.
Este es el más clásico
y el que va a empezar
a ser deprecado
en favor de los otros dos.
Entonces,
¿qué es lo que hace
este GetInitialProps?
Este GetInitialProps
lo que nos va a ofrecer
es una forma
de que en el servidor
podamos añadirle
las props
que tiene que utilizar
el componente.
Y de esta forma,
mira,
aquí ya nos dice
que está recomendado
utilizar GetStaticProps
o GetServerSideProps.
¿Vale?
Pero lo que nos va a permitir
es hacer, por ejemplo,
un fetching de datos
y con este fetching de datos
se lo podemos pasar
como props al componente.
Por ejemplo,
vamos a ver un ejemplo, ¿vale?
Este es el Timeline.
Bueno,
vamos a poner que
a este Timeline
le podemos pasar
un nombre de usuario, ¿vale?
Y aquí, pues que
this is the Timeline of
y el nombre de usuario.
Tan sencillo como esto.
Vamos a...
Ahí.
Así.
This is the Timeline of
quien sea, ¿vale?
Aquí vamos al Timeline,
voy a guardar los cambios.
Y ahora, pues,
me dice este es el Timeline
de nadie, ¿no?
Porque, claro,
esto no se lo estoy pasando
de ninguna forma.
En el GetInitialProps
lo que podría hacer
es devolver
el nombre de esto
de usuario, ¿no?
Vamos a ver
si le paso aquí
Username
y le digo
y le digo que esto
es midudep.
A ver qué pasa.
Vale, pues no ha pasado nada
porque creo que
lo que tiene que devolver
esto es una promesa.
Vale, tiene sentido.
Una de dos.
Podemos hacer o async.
¿No?
A ver.
Sí, vale.
O podemos hacer que sea async
o podemos devolver
una promesa.
Promise Resolve
y hacer así.
¿Vale?
Cualquiera de las dos
debería funcionar.
Vamos a ver.
Si ahora ponemos aquí
la, la, la
y guardamos los cambios
y refrescamos.
Vale, ahí lo vemos.
La, la, la.
Vale.
Pues vamos a hacer async.
Lo importante es que
esto devuelva una promesa.
Me extraña.
La verdad me ha sorprendido.
A ver, voy a probarlo otra vez
porque, claro,
puede ser
puede ser
que esto
tenga que...
Claro, claro.
Sí, sí.
No hace falta que sea una promesa.
Pero bueno,
en nuestro caso normalmente
cuando hagamos fetching de datos
y cosas así
pues será una promesa normalmente.
Entonces,
lo que estamos haciendo aquí
es pasarle las props
que va a tener el componente,
que va a recibir el componente.
Pero ¿cómo está funcionando esto exactamente?
¿No?
¿Dónde se ejecuta esto
para que nosotros
tengamos acceso
a esta información?
¿Vale?
Lo que está ocurriendo
es que
este método
se está ejecutando
en el servidor.
¿Vale?
Cuando tú entras a la ruta
Next.js dice
Ah,
estás en esta ruta.
Voy a ver si el componente
de la página,
del timeline
tiene un método
getInitialProps
y lo voy a ejecutar
antes de renderizarlo.
Entonces,
lo que está ocurriendo
es que
recupera primero
los datos
de forma asíncrona
y ahora veremos
cómo hacer un fetch
de datos
y pasárselos.
¿Vale?
Y vamos a intentar
incluso utilizar
la propia API
que tenemos aquí
para ver cómo funciona.
Pero por ahora,
pues lo que está haciendo
es hacer un fetch,
o sea,
lo que está haciendo
es ejecutar esta función.
Esto devuelve los datos.
Si es asíncrono
lo va a esperar,
va a decir,
yo hasta que no tenga
los datos
no puedo renderizar
este componente.
No puedo renderizar esto
porque el username
lo necesito.
¿Vale?
Lo va a renderizar,
renderiza el componente
con esa información,
pero además
hace algo
muy especial.
Y es que si vemos
el HTML
y lo revisamos,
vamos a ver
que aquí,
aquí,
bueno,
se ve muy pequeñito,
pero lo voy a hacer grande,
bla, bla, bla.
¿Vale?
Porque esto es importante.
Aquí podemos ver,
¿no?
Que tenemos este script
next data type application
json,
bla, bla.
¿Vale?
Lo que está haciendo esto
básicamente es que
desde el servidor
ya ha renderizado el componente,
pero además
no solo le da
el componente renderizado
con esa información,
sino que además
está enviando
esos datos
que hemos creado
o que hemos recuperado
en el get initial props,
se los estamos enviando
en HTML.
¿Por qué es esto?
Porque
cuando estamos en el cliente
hay un paso
que se llama de hidratación.
Piensa en agua,
¿no?
Que le echamos agüita
a la planta,
¿no?
¿Qué pasa?
Que para tú poder renderizar
lo que tienes en el servidor
y que en el cliente
lo renderices exactamente igual
y poder iniciar React,
tú tienes que saber
con qué datos
has iniciado eso,
¿no?
Entonces,
tú en el servidor
lo has renderizado,
pero además
los datos
con los que has renderizado eso
se lo pasas al cliente
para que el cliente
sea capaz de renderizar
exactamente lo mismo
que tú ya has renderizado
en el servidor.
Y este paso
se le llama hidratación.
¿Por qué se llama hidratación?
Porque básicamente
le estamos pasando algo
que está estático,
el HTML que le pasamos
no deja de ser un string.
Entonces,
hidratarlo
es proveerlo de vida,
hacer que ese HTML,
ese string
que estamos recobrando
el servidor
en el cliente
podamos hidratarlo,
lo podamos hacer
que funcione,
hacerlo dinámico
y para eso
necesitamos saber
con qué datos
se ha iniciado
en el servidor.
esta es la explicación
del get initial props.
Ahora,
vamos a hacer algo
un poquito más interesante.
Vamos a ver
si funciona
aquí en localhost,
voy a ir cerrando esto,
esto fuera,
fuera,
localhost 3000,
teníamos aquí la API,
no me acuerdo
si esto es con API
barra,
sí, efectivamente,
vale.
Entonces,
he entrado aquí
a localhost 3000
API hello,
¿no?
Y esto ya me devuelve
un JSON.
¿De dónde está saliendo esto?
Aquí en Pages,
cuando creamos
nuestro proyecto,
si lo recuerdas,
habíamos visto
que tenemos
una carpeta especial
llamada API,
API,
y dentro tenemos
un archivo
que es hello.js.
Es tan sencillo
crear endpoints
de API
en Next.js
con Node
que es maravilloso
y lo vamos a ver
en la serie de vídeos,
¿vale?
Aquí lo que vemos
es que lo que tenemos
que hacer es
hacer un export default,
tenemos que exportar
una función
que recibe como parámetros
la request
y la respuesta,
¿vale?
Y en la respuesta
le estamos diciendo
el status code
que queremos que devuelva.
En este caso,
queremos que sea un 200.
Esto significa
que ha sido ok
la respuesta.
Y la respuesta,
además,
tiene que devolver un JSON.
Aparte de ser un 200
en la cabecera,
tiene que devolver un JSON
con el name
y el nombre,
un string.
En este caso,
aquí podemos decir
username
y aquí podemos poner,
por ejemplo,
vamos a ver,
Vrime,
¿vale?
Que ha escrito en el chat
y ahora si refresco aquí,
pues ya podemos ver,
¿no?
Que Vrime,
estoy devolviendo Vrime.
Esto obviamente
es muy sencillo.
O sea,
estamos devolviendo
información que está
totalmente estática,
pero podríamos hacer
una llamada
a una base de datos,
a una API
y lo veremos.
Porque si queremos
utilizar Firebase,
pues tendremos que hacer
cosas de estas
y la haremos
en estos endpoints.
En estos endpoints
tendremos diferentes endpoints
para hacer diferentes cosas.
Ahora,
¿cómo podemos utilizar esto?
¿Cómo podemos recuperar
esta información?
Lo que podemos hacer
es básicamente
hacer un fetch
¿de qué?
De la ruta
que es API
barra hello.
Ahora,
esta respuesta
la transformamos
a JSON
y en realidad
ya estaría.
O sea,
voy a hacerlo largo,
pero luego lo arreglamos,
¿vale?
Porque vamos a poner
aquí un response.
La response
que tenemos que recuperar
es el username
de la respuesta
y vamos a devolver
el username.
El objeto
que devolvamos
en esta promesa,
¿vale?
Que al final
devolvemos un objeto
con el username,
ese objeto,
lo que nosotros devolvemos
en el getInitialProps
son las props
que le van a llegar
al componente,
¿vale?
Así que esto es
súper importante.
Ahora,
si guardamos los cambios
y volvemos al timeline
que teníamos antes
y refresco,
vamos a ver si esto funciona,
vale,
ha petado.
Vale,
ha petado porque
en el fetch
he utilizado
un path relativo.
Pensaba que a lo mejor
se lo iba a comer.
Con patatas.
Pero no se lo ha comido.
No ha estado por la labor.
Bueno,
le ponemos aquí esto.
Ahí,
que he puesto dos barras.
Venga.
Y a ver ahora.
Ahí.
Ahora.
Ya está.
Ahora sí.
Este es el timeline
de UberRain,
¿vale?
¿Por qué?
¿Y por qué me estaba
petando tan rápido,
¿no?
Porque estaba petando
en el servidor
y por eso estaba...
Este console.log
que he puesto aquí
en la línea 29
lo podemos ver
en la terminal.
¿Por qué?
Porque la terminal
es donde se está ejecutando
el server,
¿vale?
Así que eso es importante.
No lo vais a ver aquí
en esta consola,
sino que lo vais a ver
en la terminal.
Pero lo interesante de esto
es que ya hemos hecho,
estamos haciendo un fetch
a una API totalmente externa.
Bueno,
en este caso
está en el mismo proyecto,
pero en realidad
esta URL
podría ser una URL
de fuera.
O sea,
no tiene por qué ser esta.
luego la respuesta
transformamos a JSON
y de este JSON
recuperamos el username
y devolvemos este username.
De nuevo,
súper importante,
el objeto que devolvamos aquí
es el que le va a llegar
como props.
¿Por qué?
Porque si nosotros aquí ponemos
que lo que devolvemos
es username
en minúscula,
aquí,
y guardamos los cambios
de esto
y refrescamos,
ya podemos ver
que no lo detecta.
¿Por qué?
Porque aquí este username
lo hemos puesto
con la N mayúscula.
Así que el objeto
tiene que ser exactamente
el mismo,
¿vale?
O sea,
no se le...
Claro,
puedes recuperar
lo que te interesa.
Por ejemplo,
puede ser que recuperes
menos campos
y aquí,
por ejemplo,
tuviésemos también
el last name
y al final
solo utilizas username
no hay ningún problema,
¿vale?
Pero hay que tenerlo en cuenta.
En este ejemplo,
además,
podríamos dejarlo
tal cual así.
Podríamos hacer un return
del fetch
y básicamente
el objeto que devuelve
es exactamente el mismo
que queremos
que tenga
en el getInitialProps.
Así que con esto
refrescamos
y ya lo tendríamos
exactamente igual.
Con esto funcionaría bien
y lo mejor de todo
es que es
serviceRendering,
es una forma
de recuperar los datos
y ya está.
Ahora,
una cosa muy importante.
Este método
que hemos visto,
este getInitialProps,
solo funciona
en componentes
de tipo página.
no funciona
si por ejemplo
todo esto,
todo este timeline,
creamos aquí
un nuevo component
y aquí ponemos
timeline,
a ver si...
Vale.
Creamos un nuevo archivo
aquí.
Vamos a llevárnoslo
todo.
¿Vale?
O sea,
esto es un componente
que es timeline
y tal.
Vale.
He creado un componente
que se llama,
o sea,
que es exactamente
el mismo
que la página.
Pero aquí
lo que vamos a hacer
en la página
es simplemente
vamos a importar
el componente.
En la página
vamos a importar
el componente.
Components,
timeline,
¿vale?
Y aquí
pues hacemos
el timeline page.
A ver qué pasa con esto.
Y aquí lo único
que hacemos
es hacer esto
y timeline.
Vale.
Claro,
¿qué pasa?
Que no está detectando
el getInitialProps.
Funcionar funciona,
pero el problema
es que no
no está
no está funcionando
el getInitialProps.
No se está ejecutando.
Si aquí pongo
un console.log
aquí vamos a ver
que esto no se ejecuta.
¿Vale?
O sea,
que es importante
que sepas
que el getInitialProps
solo lo puedes tener
en tipo página.
¿Vale?
En las páginas.
No lo puedes utilizar
en un componente,
en subcomponentes y tal.
Yo creo
que el día de mañana
seguramente
vamos a ver
que con el suspense
esta funcionalidad
sí que venga.
¿Vale?
Pero por ahora
no funciona.
Así que
getInitialProps
solo tenemos aquí.
Con esto
hemos visto
básicamente
¿qué he hecho aquí?
Ah,
porque he puesto aquí
he tirado para atrás
los cambios
y he puesto
una barra de más.
¿No?
Sí,
ya está.
Ya tenemos
Uberline.
¿Vale?
¿Qué más?
¿Se puede combinar
paso de props
con getInitialProps?
En este caso
hay que tener en cuenta
que esta página
tú no tienes acceso
a esta página.
Sí que le puedes inyectar
le puedes inyectar props
pero para eso
deberías crear
por ejemplo
a ver si se ve
lo que hemos visto antes
¿no?
Ahí.
Deberías crear
el a.js
y claro
ahí es en el único sitio
que tú a una página
le podrías inyectar props
pero claro
a un tipo página
normalmente
¿vale?
sin crear ese
a.js
que hemos visto antes
no le puedes inyectar
otras props
porque se está
utilizando de gratis
¿vale?
Así que en este caso
no.
Lo que pasa es que al final
en este getInitialProps
que por cierto
hay una cosa que no he comentado
que es súper importante
hay una cosa que no he comentado
que es bastante importante
importante, importante, importante
¿vale?
Este getInitialProps
he dicho que se ejecuta
en el server
sal rendering
se ejecuta en el servidor
pero
también se ejecuta
en el cliente
cuando estamos en la home
por ejemplo
aquí estamos en la home
¿no?
y estamos en esta home
y puedo ir al timeline
claro
cuando
si voy a poner este
esto como estaba antes
así que esto es
bastante importante
¿vale?
he añadido aquí
un console.log
y devuelvo a respuesta
¿vale?
cuando estoy en la home
de nuestra aplicación
y le doy a timeline
¿vale?
lo que va a pasar
es que está
no, no
me ha puesto el console.log
¿dónde me lo ha puesto?
ay, ay, ay
quería verlo aquí
pero bueno
no pasa nada
el caso
vamos a verlo mejor
en la network entonces
a ver
si esto lo vemos aquí claramente
¿vale?
de algún sitio
o sea
cuando tú estás en la home
y quieres ir al timeline
¿de dónde recuperar los datos?
pues lo que va a hacer
es ejecutarlo
en el cliente
¿no?
porque no puede
como hemos dicho
tiene que mantener
ser una SPA
por lo tanto
cuando va a timeline
lo que vemos
es que
se descarga el chunk
y además
hace la llamada
a la API
pero la está haciendo
en el cliente
o sea
está funcionando como SPA
lo que está haciendo es
vale
estoy en la home
tengo que ir al timeline
en la home
si que he hecho
service al rendering
voy a ver
si el timeline
tiene un get initial props
porque esa información
la necesita
esta página
para funcionar
y ejecuta eso
en el cliente
¿vale?
entonces
es importante
que el get initial props
si tú entras a la ruta
directamente
sea la home
la que sea
se ejecuta en el servidor
pero una vez que estás
dentro de la página
como es una SPA
lo que va a ocurrir
es que este get initial props
se va a ejecutar
en el cliente
cada vez
que tú navegues
a una página
que tenga un get initial props
se va a ejecutar
¿vale?
esto es importante
y en este caso
pues ya lo hemos visto
esto lo ha hecho
en el cliente
¿vale?
vale, vale
vamos a ver
qué me comentáis
dentro de API
¿puedo construir mi API?
valga la redundancia
por ejemplo
con Fastify
¿y debería funcionar?
no
¿vale?
no se puede utilizar
cualquier
no se puede
utilizar cualquier
libro
o no deberías
o no necesitarías
la verdad es que
no he intentado
no he intentado
utilizar directamente
pero yo creo
que no
o sea
creo que no
porque el tema
del routing
a lo mejor
te da algún problema
es que la verdad
es que no lo he probado
nunca
pero a ver
¿cómo funciona esto?
es que no
no lo vais a necesitar
¿vale?
o sea
no lo vas a necesitar
Héctor
¿por qué no lo vas a necesitar?
o no lo deberías necesitar
porque al final
aquí en API
tú puedes crear
aquí tantos endpoints
como necesites
o sea
aquí ya podemos crear
por ejemplo
un endpoint
que sea Pepito
y ya lo tendríamos
o sea
ya tendríamos
un nuevo endpoint
que sería Pepito
y en este caso
pues Pepito
aquí le ponemos Pepito
y ya tendríamos
un endpoint nuevo
entonces
la verdad es que
no tengo claro
si luego podría
a ver
no debería haber
ningún problema
que utilices
Fastify Express
y cosas así
pero no sé
cómo se va a llevar
con el tema
de las rutas
pero bueno
al final le puedes pasar
no sé
la verdad
tengo dudas
igual lo podríamos probar
a ver
pero nunca he tenido
la necesidad
y por eso
nunca lo he probado
pero me parece interesante
lo miraríamos
a ver qué tal
¿qué más?
¿qué más?
prácticamente en API
serían mis servicios
request
pues sí Renato
aquí puedes hacer
por ejemplo
cualquier tipo
de servicio
o si tienes que tirar
a una base de datos
por ejemplo
pues aquí podrías hacer
la conexión
o sea que
podría funcionar así
sin ningún tipo
de problema
¿vale?
¿qué más?
a nivel de funcionalidad
a ver
que este
te parece largo
¿esta API
es equiparable
a construir una API
en Express?
sí
porque es muy similar
tienes una request
tienes una response
está un poco más limitada
pero normalmente
a lo mejor
para el 90%
de los casos
que necesitas
debería ser suficiente
¿vale?
o sea
esto básicamente
equivale a una ruta
en concreto
de Express
a una ruta
si quieres otra ruta
tienes que crear
otro archivo
y así
tendría que ser
pues con todo
lo que quieras construir
ir creando rutas
y por cada ruta
tendrías un endpoint
que sería un root
de Express
ya está
¿vale?
¿cuándo usar la API
de Next
en vez de una API
en Express?
¿se puede hacer lo mismo
en Next
de lo que se hace
en Express
y la desventaja
de tener tu API
en Next
es que está todo
dentro del mismo proyecto?
claro
es la desventaja
y la ventaja
a su vez
¿no?
que lo tienes
en el mismo proyecto
se deploya
todo
en una sola vez
además
lo que hace
Vercell
es que el deploy
de cada endpoint
es totalmente separado
o sea que
esto lo que va a hacer
es que te va a crear
Lambda Functions
de forma que cada endpoint
va a ser totalmente
independiente
uno de otro
¿vale?
esto tiene ventajas
bastante importantes
a la hora de deployarlo
así que eso es importante
lo malo
que de alguna forma
te estás casando
con el sistema
de deploy de Vercell
esto de la API
en NextDS
es una feature
no es una obligación
¿vale?
esto es algo
que está bastante bien
que es interesante
pero si vosotros
tenéis ya una API
en otro sitio
o lo queréis
en otro sitio
o lo queréis utilizar
lo podéis utilizar
sin la API
¿vale?
esto es algo
es un nice to have
¿vale?
no es algo obligatorio
que es interesante
¿vale?
¿estás haciendo un fetch
del server
al mismo server?
dice Julio
efectivamente
en este caso
sí
estamos haciendo un fetch
del server
al mismo server
en este caso
sí
lo estamos haciendo
por supuesto
podrías hacer un fetch
a otro servidor
lo que pasa
es que este servidor
que ha creado en NextDS
hay una ruta
que ya tiene una API
que es la que hemos creado
nosotros
así que sí
y no puedes poner
punto barra
API
barra
hello
no sé si te refiere
José
a crear una carpeta
pero sí, sí
o sea
por supuesto que podemos
o sea
al final
podemos hacer esto
como lo hemos hecho
¿no?
hemos hecho esto de Pepito
a ver
déjame
aquí hemos hecho
API
barra Pepito
¿no?
y
vamos a quitar esto
y este era el de Pepito
ahora
si esto
lo movemos a una carpeta
llamada Pepito
y a Pepito
lo ponemos aquí dentro
y aquí
lo ponemos como
index.js
esto
y ahora aquí
ponemos
Pepito folder
y guardamos
los cambios
bueno
no se ve
pero aquí puedes ver
que puedes utilizar
la carpeta
no hace falta
que estés utilizando
el archivo
directamente
que puede ser interesante
el tenerlo en una carpeta
si tienes más de un archivo
por supuesto
vale
¿qué más?
si inspeccionamos
que ya es un componente
de React
vale
¿cuándo empezaría
React a usar
esos datos
en el cliente
que ha hidratado el servidor?
en ese mismo componente
se hace alguna acción dinámica
en función de esos valores
hidratados
ya en cliente
vale
a ver si
¿cuándo empezaría React
a usar esos datos
en cliente?
cuando
en el punto
en el que se hace
el React
de hecho
es que sería
al principio
vale
nada más
montar
la aplicación
o sea
en React
tú tienes dos formas
de funcionar
básicamente
¿no?
tienes el React
punto
render
esa sería una
y el hydrate
el hydrate
sería hidratar
entonces tú puedes
renderizar una aplicación
renderizar una aplicación
sería
este
ay
perdón
que he cambiado
este
React done punto render
¿no?
y esto lo que hace es
montar la aplicación entera
montarla
desde cero
pero lo que puedes hacer
es un React done punto
hydrate
que esto lo que hace
es hidratarla
esto lo que hace
es utilizar
un string que existe
e hidratarla
y esto lo tienes que hacer
en el punto de entrada
de tu aplicación
esto lo tienes que hacer
desde el principio
¿vale?
esto estás obligado
a hacerlo
desde el principio
así que
nada más empezar
ya React
utilizaría esos datos
en cliente del servidor
cuando tiene que hidratarlo
¿por qué?
porque tiene que decir
si él es capaz
de montar esa estructura
en memoria
para saber
que por ejemplo
cuando se utiliza un efecto
y tenga que
cambiar un estado
o lo que sea
¿de qué estado parte?
¿no?
de qué árbol
tiene que partir
tiene que crearlo
y para crearlo
tiene que hacer
la hidratación
y la tiene que hacer
lo primero de todo
¿vale?
así que
ya lo sabéis
¿vale?
¿qué más?
¿qué más por aquí?
¿se necesita un servidor
potente
para mayor precisamiento
en el servidor?
bueno
en este caso
si hacéis el deploy
en Vercell
no vais a tener que preocupar
porque
en Vercell
todo esto
lo tenéis más que
solucionado
¿vale?
así que
no os tenéis
ni que preocupar
vale
pues yo creo
creo que lo podemos
lo podemos dejar aquí hoy
¿no?
o sea
creo que hemos avanzado
a ver
ha sido bastante
de inicio
ha sido bastante de inicio
pero creo que lo vale
que el Next 10
sobre todo al principio
nos paremos mucho
en las cosas del principio
si queréis
comentadme
me ponéis en los comentarios
del vídeo
en los comentarios
no en el chat
que el chat desaparece
en los comentarios
me ponéis en los comentarios
del vídeo
como os gustaría
que siguiéramos
la serie de vídeos
¿vale?
que es lo siguiente
lo siguiente
que deberíamos hacer
en nuestra aplicación
de Depter
¿vale?
porque nos vamos a empezar
a poner manos a la obra
vamos a empezar a crear
nuestros primeros componentes
vamos a crear ya
nuestro timeline
por supuesto
si te ha gustado el vídeo
si te gustan los viernes
si te encanta este canal
pues dale un like
que me anima a seguir
compartiendo con todos ustedes
y muchísimas gracias
por estar aquí hoy
espero que os haya gustado
esta iniciación
de NextGS
creo que es un framework
súper potente
creo que
hemos visto nada
un 10%
de las posibilidades
que tiene
NextGS
que poco a poco
vamos a ir
subiendo de nivel
ir viendo
¿no?
como de potente es esto
y vamos a ver
que
wow
las cosas como van saliendo
así que
ya sabes
déjame un comentario
dime por donde quieres
que continúe
la serie de vídeos
a ver si
le damos forma
empezamos a darle forma
¿no?
que hemos puesto el timeline
lo hemos dejado muy vacío
que por ahora
la verdad es que no hemos
hecho nada
pero quería que
todos entendiésemos bien
los conceptos
que cuando alguien
no entienda algo
pues le podamos redirigir
a este vídeo
para que
podamos ir avanzando
en los siguientes
con otros temas
y a partir de aquí
pues nada
empezar a hacer nuestro
clon de Twitter
pero para desarrolladores
así que
mira
me dice por aquí
Monete
si veremos buenas prácticas
en arquitectura
de NextGS
sí
a ver
la verdad
que lo bueno
de NextGS
es que tampoco
tienes mucho
para salirte
de arquitectura
tienes que tener
una carpeta
páginas
las páginas
son rutas
así que eso
te obliga mucho
a ir en esa línea
pero yo creo
que sí que veremos
buenas prácticas
ya
mientras veía esto
ya se me iban
ocurriendo unas cuantas
así que
sí sí
sí que lo veremos
¿vale?
acá va mi aporte
Miguel
gracias por todo
ah mira
Pablo Rodríguez
200 pesos argentinos
muchas gracias Pablo
eres muy crack
te lo agradezco un montón
así que muchas gracias
por tu aporte
Facundo Tone
genio
¿hay alguna desventaja
de Next
en comparación con
Creep Rack Up?
porque o si no
todos usarían
NextGS en vez
de Creep Rack Up
Nicolás
sí
sí que la hay
y la he comentado antes
¿vale?
al final
hay una cosa
que es evidente
¿vale?
y esto es
es así
NextGS
aunque es muy potente
y tiene muchas ventajas
quieras o no
es más complejo
es
necesitas
un servidor
necesitas
un deploy
más complejo
o lo tienes que hacer
en Vercell
al final
es un framework
más potente
pero viene con un coste
¿no?
y eso hace que tu aplicación
de alguna forma
pues necesita
o requiera
de un mejor pipeline
de mejor cosas
¿no?
al final
Creep Rack Up
es muy sencillo
y lo que hace
al final
es crear
archivos estáticos
no hay nada
más rápido
que los archivos estáticos
y es súper fácil
de utilizarlo
¿no?
es verdad
solo se renderiza
en el cliente
pero
el deployar eso
es tan fácil
como subir tus archivos
estáticos
a un directorio
en un servidor
y eso funciona
y ya está
entonces
es evidente
Creep Rack Up
es mucho más sencillo
NextGS
es más complejo
ya hemos visto además
que tiene cosas
que tenemos que aprender
es un framework
te viene esto de las rutas
tiene lo otro
pero
a cambio
te da sus cosas
¿no?
obviamente
un framework
al final
es un contrato
es un contrato
en el que te ofrece
diferentes características
a cambio de un precio
el precio en este caso
pues yo creo que es
aparte de que tienes que aprender
el framework
y las cosas que tiene
que bueno
eso pasa con todos
es que
hay algunas funcionalidades
que brillan
con el deploy de Vercell
y no con un deploy
que tú puedas hacer
en Amazon
por ejemplo
eso sería una
ahí tienes que firmar
un poquito
¿no?
de si quiere aprovechar
100% NextGS
tengo que hacerlo con Vercell
y lo segundo
sería que
quieras o no
tu aplicación
se vuelve un poco
más compleja
¿no?
tienes que pensar
si esto se va a renderizar aquí
si esto va a renderizarse
en el servidor
si esto puede ser estático
si esto no es estático
es más complejo
pero yo creo que vale la pena
y por eso creo que cada vez
más apps
lo están haciendo
espero que te haya servido
la respuesta
y no te haya desanimado
¿subirás el repo?
sí
lo subo
y os lo dejo
en los comentarios
¿vale?
os lo dejo
en la descripción
del vídeo
si utilizo
readfile
de fsnode
¿puedo indicarle
que el archivo
es de tipo json?
creo que es una pregunta
más en general
pero
sí
bueno
no le puedes decir
si es de tipo json
pero tú lo puedes leer
y luego
si sabes que es un json
convertirlo a json
y ya está
Agustina Prats
creo que se va
de pizza y de cervezas
excelente
dice Enrique Moreno
excelente todo
Dani
muchas gracias
por decirme estas cosas
que me anima
sobre todo
a ver que no estoy
por aquí solo
este type of window
different undefined
esta es la típica forma
de saber si estás
en servidor o en cliente
¿vale?
next.js es lo que
typescript es javascript
un compilador
bueno
next.js no es
un compilador
no es un compilador
es un framework
porque no compila
o sea
si lo miramos
al nivel
de expulsar estáticos
y solo estáticos
si
podríamos decir
que compila estáticos
y ya está
pero también tiene
toda la parte
de cómo funciona
en la parte
del cliente
¿no?
de todo lo del head
cuando tú
navegas de una página
a otra
y te mantienes
en SPA
el tema del servidor
eso ya es
más runtime
más que compilación
¿eh?
vos sos un crack
y aprendiste
que son pesos argentinos
pues como no lo voy a aprender
si no paráis
los argentinos
soy vamos
soy súper chéveres
soy la leche
Beto
profe
¿cómo lo haces
para escribir tan rápido?
¿qué consejo nos das?
pues práctica
y muchos años
dándole a las teclas
eso es
bien recordando
la moneda
Franco
queréislo
un dedito arriba
el tema de seguridad
pues
también lo veremos
al final
los endpoints
los puedes securizar
tanto como quieras
al final
es lo mismo
son unas rutas
podríamos ponerlo
por tokens
y algo de eso
veremos
con Firebase
así que
¿quién fue el hater?
excelente contenido
bro
éxitos
muchas gracias Uriel
nada
al hater
le vamos a convencer
poco a poco
de que le va a gustar
Next.js
algunos de los marketplaces
en los que trabajas
tienen Next.js
qué stack tiene
Fotocasa
por ejemplo
yo trabajo en una compañía
que tenemos diferentes marketplaces
y una de ellas es Fotocasa
tenemos una solución propia
porque en el día
que nosotros empezamos
hace 5 años
a trabajar con
server side rendering
con React
y en aquel entonces
Next.js existía
pero estaba más verde
¿vale?
estaba la versión 1
o tal
era muy diferente
a como es ahora
entonces
en aquel momento
parecía mejor opción
hacer nuestra propia solución
con nuestras soluciones
hoy en día
creo que
si tuviese
la misma decisión
en mis manos
utilizaría
Next.js
tiene
demasiadas cosas
demasiadas ventajas
que te quitan
muchísimo código
muchas cosas
que tú tienes que mantener
y las está manteniendo
otra persona por ti
así que
ahora
haría Next.js
el stack que tenemos
en Fotocasa
es con React
tenemos server side rendering
lo hacemos con Express
pero
no está tan bien optimizado
como lo está este
gracias Capo
gracias Nicolás
Fran acaba de llegar
no pasa nada
esto se queda guardado
para que lo sigan
siguiendo
lo sigan viendo después
cuando
cuando cargan las peticiones
cuando es server side rendering
o cuando es static
cuando es static
tienes dos opciones
¿vale?
una sería
el exportar archivos estáticos
más algo Gatsby
que sería hacer un export
directamente
y eso ejecutaría
el comando
eso lo podremos ver
en el siguiente vídeo
para que veáis
cómo funciona
y luego estaría
el static
que sería
el generar
una página estática
¿vale?
sería generar
en el servidor
una página estática
y servirla
pero no sería
un archivo estático
sino generarlo
y lo que haría
es que lo iría refrescando
iría sirviendo
esa estática
y lo podrías
lo podrías arreglar
podrías decir
que cada X tiempo
se fuese refrescando
o cada vez que alguien
hace una petición
pues se soluciona
así que eso sería
un poco
¿cómo haces el import
de biblioteca
de terceros
que me operan
el DOM?
pues aquí en este caso
tipo gquery
pues haces un import
gquery
from gquery
y ya está
y si no utilizas
un script en línea
bueno pues
muchísimas gracias
a todos
gracias
gracias
excelente como siempre
10.500
gracias
muy bien
pues nada
ha sido un verdadero placer
nos vemos el viernes
que viene
con más
next ideas
vamos a ver
cosas más avanzadas
vamos a empezar
a darle forma
a nuestra aplicación
a nuestro
depter
muchas gracias
por estar ahí
nos vemos
en las redes sociales
y si no estás suscrito
ya sabes
suscríbete
dale like
coméntalo
compártelo
con tus amigos
y nos vemos la semana
que viene aquí
con más y mejor
frontend
cuídate mucho
y que pases
muy buen fin de semana
hasta luego
nos vemos al siguiente
muchas gracias
a todos y a todas
hasta luego
chao
chau