que vamos a hacer un proyecto desde cero con Next 1013
y vamos a estar repasando cada una de las funcionalidades.
Si no tienes ni idea de Next, no te preocupes.
No te preocupes porque como vamos a hacerlo desde cero,
lo voy a estar explicando todo.
Voy a estar diciendo cómo crear las rutas,
cómo hacer el fetching de datos,
los diferentes tipos de fetching de datos.
Yo los voy a ir probando.
Puede ser que me equivoquen algunas cosas.
Vamos a probar Turbo Pack también, que está en alfa.
Veremos cómo se hace.
Vamos a probar la nueva imagen, el Next Image,
el nuevo componente de imágenes.
Vamos a probar la forma de cargar fuente nueva,
que es Next barra Font.
Vamos a ver este nuevo sistema de enlaces,
pero bueno, aunque digo muy nuevo, nuevo, nuevo,
si no sabes nada, no te preocupes,
porque lo vamos a hacer desde cero.
Normalmente, eso sí, no voy a explicar React.
No voy a explicar React.
Tienes que saber React.
Si no sabes React, quédate,
que seguramente algo aprenderás,
pero después terminas un curso de React,
porque aquí no vas a aprender React.
O sea, si no, entonces sí que no terminamos.
Si no sabes qué es Next.js,
a ver, Next.js es el framework de React
más importante de lejos a día de hoy.
De eso creo que estoy hablando de forma objetiva.
Ya sea importante por el impacto que tiene la comunidad,
ya sea importante por la cantidad de empresas
que lo están utilizando,
ya sea importante porque al final
muchas de las cosas que ocurren en Next.js
luego de alguna forma se simulan,
o por ejemplo, Dino Fresh no deja de ser
emulación de Next.js,
pero más la parte de Dino,
con sus diferencias notables e interesantes.
Pero las cosas como son,
Next.js a día de hoy
es el framework de React más importante que existe.
Y ahora hace poco, hace unos días,
sacaron la versión 13
en el anuncio de la Next.js.com,
de la edición de 2022.
Hay un montón de novedades,
la vamos a ir viendo,
aunque hoy lo que voy a intentar
es hacer más un curso desde cero
para ver solo estas nuevas funcionalidades,
y no tanto de intentar explicar
de dónde venimos y todo esto,
sino intentar un poquito ir más a saco.
Entonces, Next.js 13 viene con cosas
bastante interesantes.
Una son los React Server Components.
Esto es una nueva funcionalidad
que va a ser de React,
o sea, no es parte de Next.js,
sino que va a estar en React,
y por lo tanto,
puede estar en otro framework de React.
Y esto lo que va a hacer
es que los componentes
se van a renderizar en el servidor
a nivel de componente,
no a nivel de página,
a nivel de componente.
Luego lo veremos con un ejemplo
y creo que lo vais a entender perfectamente.
Y ojo,
porque también vamos a tener que
lo que tenemos en nuestra carpeta app
va a renderizarse solo en el servidor por defecto.
Esto también con un ejemplo
lo veremos clarísimo,
pero esto lo que quiere decir
es que no se va a renderizar
o no se va a ejecutar como tal en el cliente.
Y luego en un ejemplo lo veréis claro, claro, claro.
Luego también tenemos un nuevo enrutador, ¿vale?
¿Cómo vamos a crear nuestras rutas en la página?
Bueno, si has utilizado Real Router,
sabrás que es a nivel de componentes,
versiones anteriores de Next.js 12,
o sea, de Next.js, la 12 y anteriores,
era a nivel de sistema de archivos
y ahora Next.js 13 también es el sistema de archivos,
pero lo que nos permite es tener rutas anidadas.
Y eso lo vamos a conseguir teniendo archivos
que se llaman el page.js,
el layout.js,
loading.js,
error.js,
un montón de .js.
Tenemos dos componentes,
uno para cargar imágenes
y otro para cargar fuentes,
que lo veremos también.
Y esto básicamente,
este HTML streaming,
no sé si,
yo creo que sí que lo veremos,
pero te lo puedo explicar bastante fácil.
Y es que lo que permite
es que normalmente,
cuando estamos haciendo un streaming,
cuando hacemos una request
a una petición,
a una página web,
normalmente hacemos la petición
y el servidor,
pues genera todo el HTML
y te lo devuelve de golpe.
Te dice,
vale,
me has pedido esta página,
toma,
pum,
tu página,
de golpe.
Pues con este Dynamic HTML Streaming,
lo que quiere decir básicamente
es que ese HTML
se lo va devolviendo
como a cachitos al cliente.
Y esto tiene ventajas obvias.
Y es que en lugar de tener que esperar
toda la página que se genere,
lo que va haciendo es
ir devolviendo partes de la información
que va teniendo en XDS
para mostrarle al usuario.
Y esto vamos a ver un poco cómo funciona,
porque obviamente ahí entra
el tema de las rutas anidadas,
de forma que puedes ir haciendo
fetching de datos
y las rutas anidadas
se van como resolviendo
de una forma granular
mientras va viendo información del usuario.
Eso lo veremos después
y lo vais a ver clarísimo,
¿vale?
Entonces,
¿qué más tenemos?
Tenemos más cositas.
Es que es impresionante.
Tenemos la nueva versión de Turbo Pack
que al final
han eliminado Webpack
y lo que han hecho
es utilizar ahora...
Bueno, no lo han eliminado.
Todavía lo utilizan,
pero su idea es eliminarlo.
A ver,
siguen utilizando Webpack,
pero han creado...
El propio creador de Webpack
trabaja en Vercell
y han creado su propio Webpack
que al final va a ser agnóstico
al framework
y lo vamos a probar también
en el Turbo Pack
al final,
a ver si funciona,
si realmente lo notamos más rápido,
si no lo notamos más rápido.
Y lo veremos.
Y luego aquí unas cuantas cosas más,
pero estos anuncios
son un poco más a nivel de...
Más de Vercell
que no tanto de Nexies.
Entonces,
vamos a empezar con nuestro proyecto,
si os parece.
La idea que tengo
es básicamente
que creemos...
Veamos las funcionalidades.
No tanto que creemos un producto
que muchas veces me gusta hacer eso,
pero en este caso,
como creo que hay muchas cosas
a las que hay que revisar,
lo que vamos a hacer
es intentar ir paso a paso
ir creando,
utilizando estas funcionalidades
para crear una página
y tú luego puedes hacer
mil millones de cosas con ello.
Así que vámonos aquí
y te quiero enseñar otra cosa.
En la documentación de Nexies
ahora tienes dos versiones.
Una que estarían
como la documentación estable,
que en esta versión estable
no vas a encontrar nada,
nada de lo que estamos haciendo.
Si quieres utilizar,
si quieres utilizar
las cosas que hoy vamos a ver,
tienes que ir a la versión,
ves que pone aquí,
read the new docs here,
que es esto que tenemos aquí.
Es la versión beta.
Además la ves
porque está en oscurito
y aquí sí vas a tener
toda la información
que vamos a ver hoy.
Es posible que veas este vídeo
en el futuro
y entonces ya sí que sea
la versión estable,
pero si por lo que sea
ahora mismo no la encuentras,
que lo sepas,
que la tienes aquí en beta.
¿Que ya ha salido de beta?
Bueno,
pues la tendrás en la versión estable.
Entonces aquí tendríamos
el que tiene started,
cómo empezar
y esto justamente
es lo que vamos a hacer.
Vamos a empezar
nuestra aplicación desde cero.
Vámonos por aquí
y vamos a crear,
mira,
por cambiar,
porque siempre utilizamos
npx,
que sería el comando de
npm
para ejecutar al vuelo
este paquete
y crear nuestra aplicación de Next.
Voy a utilizar pnpm,
a ver qué tal,
a ver si funciona,
que tenemos aquí
el Experimental App.
Bueno,
no sé,
vamos a crear,
mira,
para que lo veamos más fácil,
lo voy a hacer
sin el Experimental App
y lo vamos a hacer
desde cero
porque seguramente
mucha gente verá
por ahí algún tipo
de documental tutorial
que será
sin el Experimental App
y lo hacemos así.
Así que vamos a utilizar pnpm,
¿vale?
Y nuestro proyecto
va a ser
next.js13
app,
¿vale?
Vamos a decirle que no
porque no tengo ganas
de empezar a explicar
TypeScript.
Sí que quiero utilizar
Slint,
¿vale?
Y aquí ya se está
instalando todo,
perfecto.
pnpm,
por si te lo estás preguntando,
es una alternativa
más rápida de npm,
pero debería ser
totalmente compatible,
¿vale?
Ya tenemos
el next.js13
app,
vamos a abrir
este proyectito
por aquí
y ya podemos ver
que tenemos aquí
pages,
public,
styles.
Pages era la forma
anterior,
si no tienes ni idea
de next.js
no te preocupes,
pero pages era la forma
que teníamos anteriormente
de crear
pues tanto las rutas
de nuestra aplicación
como los endpoints.
De hecho,
si quieres crear endpoints
porque next.js te permite
crear endpoints,
ves que estás en pages
API y aquí tenemos
este endpoint,
pues todavía debes
utilizar la carpeta
pages porque esto
no lo han migrado,
que yo sepa,
a la carpeta app,
así que tenlo en cuenta.
Así que lo primero
que vamos a hacer
es eliminar directamente
la carpeta pages
porque luego vamos a crear
nuestra propia carpeta app,
que es la nueva forma
de crear las rutas,
¿vale?
Entonces,
¿qué más tenemos por aquí?
En next.config.js
si queréis utilizar
esta nueva versión,
la nueva forma
de obtener rutas,
tenéis que poner aquí
experimental
y en experimental
tenéis que aceptar
el appdir,
ponerlo a true,
si no,
no funcionará,
¿vale?
Ahora creamos aquí
nuestra carpeta app
y ahora pondremos ahí
nuestras rutas,
pero antes de empezar
vamos a echarle un vistazo
rápidamente a los archivos,
sobre todo para esa gente
que está empezando ahora.
La carpeta app
la he creado yo,
en no modules
tenemos todas las dependencias,
en public tendríamos
los archivos estáticos
que queremos servir,
que pueden ser imágenes,
el favicon,
joder,
no me sale el favicon.
En styles tendríamos
los estilos de nuestra página,
yo voy a eliminar
este de home.module.css
que es el que estaba utilizando
antes la carpeta pages,
pero que nosotros
no vamos a utilizar,
¿vale?
Y lo quitamos por aquí
y luego tenemos slim.
Esto es una configuración
que ya viene en XDS,
que está bastante bien,
sobre todo para que
no se te olviden
temas de accesibilidad
y todo esto.
Yo voy a instalar,
si quieres,
pues puedes hacer lo mismo,
yo voy a instalar
un paquete que se llama
standard,
que a mí particularmente
me gusta bastante
y que es un linter
que te viene con slim,
con un montón de reglas
ya preestablecidas
y casi no te tienes
que romper la cabeza
de tener que configurarlo
y todo esto.
Ay,
le he dado
npm install.
Bueno,
espero que no haya
ningún problema.
Es que como lo he hecho
con pnpm,
he empezado con pnpm
y ahora estoy utilizando npm.
Entonces esto lo que voy a hacer
es reinstalarlo todo
porque seguramente
no lo se ha encontrado.
A ver si puedo eliminarlo.
pnpm install
standard
menos d.
Venga,
creo que me da tiempo.
Vale,
esto es normal
porque normalmente
las peer dependencies
esto no lo sigue nadie,
pero es un warning,
así que no nos preocupemos.
Y aquí,
ostras,
no sé si como nunca
he utilizado pnpm
para esto,
no sé si funcionará,
pero lo voy a probar igual.
Aquí normalmente
yo lo que hago
es poner
dónde está la ruta
de
no modules,
standard,
slim,
rc,
json.
Vamos a ver si esto funciona.
Yo espero que sí.
A ver,
sí,
sí que funciona.
¿Veis que ahora está en rojo
y que me está diciendo
que esto es un error?
Esto es porque ya he recuperado
la configuración del linter
que yo voy a utilizar.
¿Vale?
Lo de puedes poner
solo standard
es que si pones solo standard
para los archivos de React,
al final no tiene,
no funciona correctamente.
Lo he utilizado
un montón de veces
y con los componentes de React
no sé por qué
se vuelve loco.
Bueno,
dicho esto,
vamos por aquí.
Tenemos el style,
ya lo he comentado,
el gitignore
para ignorar los archivos
de git,
la configuración de next,
el package.json,
aquí tenemos
todas las dependencias
y todos los scripts
que vamos a utilizar
para levantar
nuestra aplicación.
En scripts
tenemos el modo desarrollo
que es el que vamos
a estar utilizando
casi que todo el rato.
Luego build
y ya está.
La build sería
para producción ya.
El start
es si has hecho la build
para poder levantar
el proyecto de next,
el lint
para pasarle el lint,
las dependencias
tenemos el lint,
que es el linter,
config next,
la configuración de next,
luego next,
react y react DOM.
Y en dev dependencies
tengo la de standard
porque ya la he puesto aquí.
A mí no me gusta
utilizar los carets,
pero aquí cada uno
que utilice lo que quiera.
Así que le voy a quitar
el caret
para estar más tranquilo
y por lo demás
este es un archivo,
el log file
que utiliza pnpm
para saber exactamente
cuáles son las dependencias
que ha instalado
y así en la próxima instalación
ser mucho más rápido
y además
instalar justo las mismas,
todo el árbol de dependencias.
Vale,
pues ahora que ya tenemos esto,
yo creo que
ya que he creado,
hay una cosa interesante
sobre una cosa,
una cosa que me gusta mucho
que hace muchas veces
Next.js
es que por ejemplo
esto que os he dicho
que he puesto aquí
y de hecho creo que Gonzi
me lo estaba comentando,
es que si creáis la carpeta
de app
y por ejemplo
para crear una página
tenéis que crear un archivo
page.jsx
que también puede ser .js,
aquí cada uno lo que quiera,
voy a levantar el proyecto,
vamos a poner
npm run dev
y esto me lo deja
en el puerto 3000.
Bueno,
fijaos que aquí ya me dice
la aplicación
Dir es experimental,
por favor,
añade esto
a tu nextconfi.net
para que lo puedas activar,
esto es bastante interesante
y es una cosa
que siempre me gusta mucho
de la experiencia
de desarrollo
que tiene Next,
que siempre que tiene
algún error
de alguna configuración
que te falta,
alguna cosa que se te ha olvidado,
pues que saben
decírtelo correctamente
y ya te lo dice aquí,
oye,
que esto es experimental,
lo tienes que añadir y tal,
bueno,
pues lo vamos a añadir
para que no se nos pase
y aquí ahora
pues vamos a impiar run dev
y ahora sí,
como puedes ver,
ha funcionado perfectamente.
En el page.jsx
ahora tenemos vacío,
por lo tanto,
si yo entro
a mi localhost 3000
deberíamos ver
que no hay absolutamente nada
y ya nos avisa,
nos dice
oye,
nos falta un export default
como un componente de React
en la página
que tenemos aquí.
Si queremos iniciar
nuestra aplicación,
empezar a tener
algo en nuestra página,
tenemos que crear
este archivo
app.page.jsx
y aquí tenemos que devolver
un componente
y vamos a ponerle
homepage,
aunque en realidad
el nombre no es importante,
vamos a ponerle aquí
el function
y vamos a devolver
pues aquí
vamos a poner
esta es nuestra app
por ahora.
Guardamos los cambios
y si volvemos aquí
y refresco,
ya está,
ya hemos terminado,
ya tenemos nuestra aplicación.
Bueno,
ahora ya lo que tenemos,
digamos,
es tenemos nuestra ruta principal,
nuestra ruta principal
que es la pantalla principal
homepage,
ya estamos renderizando
una página
y esta es nuestra app ahora
y esto es lo que tendríamos
justamente aquí.
Esto es súper importante,
cualquier ruta
que quieras crear
necesitas crear
un archivo
page.js
o jsx
o ts
o tsx
¿Por qué?
Si tú aquí
por lo que sea
pones index,
esto no sirve,
¿vale?
De hecho,
si ahora intento entrar,
fíjate que me dice 404,
esta página no se ha podido encontrar.
O sea,
esto es como una regla
que tiene Next.js
a la hora de definir las rutas
y es que la página,
la página para saber
que es una ruta
tienes que poner
que es page.
Otra cosa súper importante,
resulta
que si te has dado cuenta,
lo que nos ha hecho aquí
es que tenemos otro archivo,
nos ha creado un archivo,
yo no he creado este archivo
layout.js,
este archivo
lo ha creado
automáticamente
Next.js
para mí
y nos ha creado
como un componente de React
que se llama
root layout
que se le pasan los children
y este
es uno de los archivos
más interesantes
a la hora
de hablar
de las rutas
que tenemos
y que podemos hacer
con Next.js 13
y es que podemos envolver
nuestras rutas
con un componente
layout
que es algo
que ya se podría hacer
anteriormente
de otra forma
pero es que esto
lo podemos llevar
a cada ruta anidada
que vamos creando
y lo vamos a ver
con ejemplos
así que no se preocupen
así que vamos a poder
ahora estamos creando
una página
pero vamos a ir creando
cada vez más páginas
¿vale?
o sea,
esto empezamos ahora
y ahí luego vamos creando
más páginas
entonces
este layout
digamos que va a ser
la página que envuelve
nuestra ruta
por ejemplo
aquí podéis utilizar
todo el tema de SEO
de hecho fijaos
que ya tenemos
el HTML
el head
el body y tal
vamos a poner aquí
el title
y vamos a poner
title
my first app
with next 13
¿vale?
y aquí podéis poner
la descripción
lo que sea
ahora en el body
imaginad
aquí children
aquí children
va a tener
todo lo que se renderiza
hacia abajo
de nuestras rutas
luego lo vais a ver
mucho más claro
pero para que veáis
bien el asunto
vamos a crear aquí
por ejemplo
un app
y vamos a poner aquí
aquí
con un lead
vamos a poner
que esto es home
por ahora dejo esto
pero fíjate ¿no?
tengo aquí el app
mira vamos a ponerlo
con un header
dentro de un header
vamos a poner aquí el header
y esto lo vamos a poner
por aquí
entonces
tendríamos aquí un header
y después tendríamos
el children
el children ya sabes
que es una prop especial
de RIA
que lo que hace
es que renderiza
lo que se le están pasando
por props
o sea lo que están volviendo
en este caso
va a ser justamente
lo que tenemos aquí
de hecho si volvemos
a nuestra página
fíjate que tengo aquí
el header ¿no?
ya tengo aquí un header
que pone home
y esto es parte del layout
no es parte de la página
¿qué quiere decir esto?
bueno
es obvio
que vamos a querer
crear más páginas
o sea
imaginemos
vamos a poner aquí
una nueva carpeta
¿por qué?
porque el sistema de rutas
en Next.js
se hace a través
del sistema de archivos
del file system
esto significa
que si quieres crear
una ruta
que sea
barra
about
tenemos que crear
una carpeta
llamada
about
y dentro
vamos a tener que crear
nuestro archivo
page.jsx
porque si no
no va a detectarlo
como una ruta
y lo vas a ver ahora
porque vamos a crear
otra carpeta
que va a tener
otro tipo de archivos
que va a ser muy interesante
vamos a poner el about
y dentro
el page.jsx
y aquí
voy a poner esto
esto va a ser
el about page
por ahora voy a poner
que esto es
el about
guardo los cambios
y aquí en el layout
que había puesto
ya aquí
justamente
como home
y tal
vamos a hacer una cosa
vamos a poner aquí
como los links
que vamos a tener
en el header
vamos a tener uno
que sea
label home
y la ruta
va a ser
barra
vamos a tener
label about
y este va a ser
ruta
barra about
lo que vamos a hacer
con estos links
que es un array de objetos
lo vamos a renderizar
y lo vamos a hacer
justamente aquí
vamos a renderizar esto
vamos a ver links map
donde tenemos
el label
y la ruta
y el label
lo vamos a utilizar
aquí dentro de un
li
como la key
vamos a poner
si vamos a utilizar
la ruta
me parece bien
que utilicemos la ruta
porque no deberían repetirse
las rutas
vale
esto lo ponemos por aquí
esto lo cerramos aquí
esto acá
vale
y dentro
vamos a poner un enlace
vamos a utilizar
en nuestro componente
link
que vamos a ver
de donde lo sacamos ahora
es un componente especial
de Next.js
que lo que nos va a permitir
es hacer navegaciones
dentro de nuestra propia página
y aquí el href
pues le ponemos la ruta
y lo que vamos a pasarle
como texto
va a ser el label
y este link
lo vamos a importar
si no recuerdo mal
porque siempre se me olvida
de donde lo importamos
pero creo eso
de Next.link
vale
esto no hace falta
poner el .js
así que lo vamos a dejar así
y ya está
vale
importamos el link
justamente
de Next.link
y esto va a renderizar
un enlace
con el href
a root
y va a detectar
automáticamente
si esto es una navegación
que tiene que hacer
interna en la aplicación
o
o sea
si es interna
o externa
y ojo
fíjate
no necesitamos poner
esto
vale
esto es una
novedad
que antes
si que había que ponerlo
bueno
pues ya no es necesario
esto automáticamente
y ahora lo verás
va a renderizar un anchor
de hecho
si vamos aquí a Chrome
fíjate que lo tengo aquí
vale
tengo aquí home y about
y ahora si le doy al about
pues me he ido a la página about
fíjate que ha cambiado
la ruta de about
y ha cambiado también
el contenido de about
si me voy a home
vale
pues ya tenemos aquí
una navegación
digamos interna
en nuestra página
entre una página y otra
una cosa que es bastante interesante
de lo que está pasando aquí
vale
para que lo tengas claro
es que si vamos aquí a home
y yo pongo aquí la red
pam
aquí la red
y me voy al about
vale
fíjate
fíjate que entre home y about
no está cargando
aquí
no está cargando absolutamente
bueno
ya verás que sí que carga
cosas ¿no?
ahora estoy en el about
si me voy a la home
pam
fíjate que hace este get
pero no refresca la página otra vez
y de hecho
una vez que ya va cambiando
ahora ya no está cargando
absolutamente nada
esto es porque está funcionando
como una single page application
esto quiere decir
que las navegaciones
están ocurriendo en el cliente
no está recargando toda la página
y esto obviamente
en temas de rendimiento
se nota muchísimo
y con esto
solo con esto
fíjate que ya hemos hecho
bastantes cositas
hemos creado nuestra aplicación
ya tenemos dos rutas
pero obviamente esto
lo tenemos que seguir complicando
un poquito
así que no te preocupes
que vamos a ir a ello
entonces
una cosa que te he dicho
que es muy importante
es el tema del archivo
page.js
js o .jsx
o ts o tsx
si yo aquí creo ahora
por ejemplo
una carpeta llamada components
lo que ocurría antes
es que
tú tenías dentro de pages
podías crear carpetas
pero las carpetas
siempre eran rutas
y entonces
este components
hubiera sido una ruta
más
en este caso
ya no es una ruta
a no ser que le pongamos
el page
como no se lo voy a poner
voy a crear aquí
por ejemplo
navigation.jsx
.jsx
o sea voy a crear
un componente
y en este layout
que yo había hecho
esta cosa de aquí
voy a quitar todo esto
lo voy a pegar aquí
veis que yo había hecho
todo esto de aquí
de hecho
bueno había puesto
voy a quitar todo el header
también
y vamos a poner aquí
export function navigation
y esto
return
y devolvemos todo esto
¿vale?
o sea
he extraído
a un componente
la funcionalidad
no
he puesto navigation
pero bueno
es el header
¿qué más da?
más o menos
ya me entendéis
así que
lo que ahora
podemos hacer aquí
es importar
este navigation
navigation
¿vale?
y utilizarlo
aquí
navigation
¿vale?
¿esto por qué
lo he hecho?
esto básicamente
aparte de que
está bien que
separéis los componentes
¿no?
las partes visuales
y que lo pongáis
en un componente
aparte
esto
es porque
os quería enseñar
que dentro de app
en realidad
podéis crear
rutas
que no van a ser
o sea
podéis crear carpetas
que no van a ser
rutas
porque hasta que
tú no tengas
dentro de components
una página
page.jsx
no va a funcionar
como una ruta
y eso lo podemos
comprobar aquí
si yo intento
poner aquí components
vemos que nos dan
404
¿vale?
es como que no existe
esta ruta
pese a que
la tengas aquí
o sea que lo importante
no es como
hay que pensar
que para crear rutas
no basta
con crear
las carpetas
hay que crear
la carpeta
y luego además
hay que poner
el page.jsx
si no tienes
un page
no sirve para nada
o sea no
no puedes hacer
nada con ello
o sea no es una ruta
sí que lo puedes importar
para componentes
para utilidades
lo que tú quieras
pero no tiene otra utilidad
¿vale?
ahora que ya
tenemos todo esto
con el componente
ya lo hemos visto
voy a intentar darle
un poquito de estilos
más que nada
porque primero
está muy pequeñito todo
se ve horrible
y porque te quiero enseñar
cómo se deberían cargar
los estilos
en general
y también a nivel
de componente
por ejemplo
en general
como tenemos el layout
y este layout
que tenemos aquí
este archivo root layout
este layout es como
lo que envuelve
toda la aplicación
¿vale?
y luego lo vamos a ver
¿por qué?
porque este root layout
tanto en el page.jsx
de nuestra ruta principal
como la página about
¿vale?
podemos ver
que se está renderizando
esta navegación
este navigation
que hemos hecho
este componente
en realidad
está en el layout
no está en la ruta
del about
y ya podemos ver
cómo va heredando
el layout anterior
y esto después lo veremos
que puedes tener
un layout
dentro de un layout
dentro de un layout
entonces
¿por qué
estaba comentando esto?
porque al final
este layout
lo que vamos a querer
es justamente
poder reutilizarlo
más adelante
no este en concreto
sino crear otros layouts
y luego vamos a ver
también que podéis
incluso
aunque no sean rutas anidadas
podéis compartir
el layout entre ellos
lo cual es bastante
impresionante
lo vais a ver
ahora
vamos a añadir los estilos
en este layout
vamos a importar
los estilos globales
primero que los teníamos aquí
aquí tengo la carpeta
styles
pues lo vamos a importar
para eso
lo único que tengo que hacer
es ir directamente
a la carpeta
global
css
guardamos los cambios
y con esto
vale
no lo he pillado bien
ah es que es globals
voy a pensar que era global
¿vale?
bueno ya tenemos
estos estilos
lo ha puesto en negro
ha puesto otra fuente
y ya está
no sé si
bueno
lo podemos dejar
sí
vamos a dejarlo así
y ya está
yo le voy a poner aquí
unos estilos
un poco para que se vea
un poquito mejor
tampoco
tampoco una del otro mundo
pero más que nada
porque
a ver
margin auto
para que esté un poco
más centrado
¿vale?
y al menos podamos ir viendo aquí
luego
imaginemos el navigation
aquí tenemos el components
tenemos el navigation
y
yo quiero tener estilos
que son solo
del navigation
¿por qué?
porque estos estilos
que tenemos aquí
que justamente se llaman globals
estos son
como estilos
que se van a aplicar
a toda la página
a toda la página
de hecho lo podéis ver
muy fácil
porque si hacemos
una inspeccionar aquí
y miramos el body
podéis ver aquí
que pone body
o sea
como ha transformado
ese css
realmente es que ha puesto
body
y le ha puesto el css
justamente como lo tenemos
en archivo
¿por qué?
porque hemos importado
los estilos
y ya está
ahora
en el navigation
quiero añadirle estilos
voy a ponerle aquí
un navigation
punto
module
punto css
porque en x10
es compatible
con css modules
lo que vamos a hacer aquí
es poner unos estilos
sencillos
vamos a poner
yo que sé
vamos a poner
punto header
display flex
no sé
la verdad
que más poner
bueno no
header no
porque esto
debería ser
navigation
vamos a poner
navigation
vamos a poner
display flex
list style non
vale
y no sé
navigation
bueno
vamos a dejar esto
por eso
quiero enseñaros
el ejemplo
y ya está
de hecho
bueno
vamos a poner otra cosa
navigation
punto header
vamos a poner aquí
border
un pixel
solid
ff0
border
radius
4 pixels
padding
4 pixels
vale
y aquí
lo que vamos a hacer
es importar
estos estilos
y aquí le podemos poner
por ejemplo
styles
from
navigation
punto
module
punto css
y estos styles
lo que vamos a hacer
es pasárselos
como si fuesen clases
aquí tendríamos
en class name
pues vamos a ponerle
el styles
punto
y aquí tendríamos
header
header
y aquí tendríamos
este
lo vamos a poner aquí
punto
navigation
vale
miramos aquí
y ahora podéis ver
que ya me ha puesto
los estilos
pero fíjate
la diferencia
de los estilos anteriores
que hemos dicho
que eran globales
porque si miramos
los estilos
que está aplicando aquí
en realidad
aquí lo tenemos
¿veis?
está hasheándolos
hashear
significa que ha creado
un class name
específico
que evita la colisión
con otras clases
de otros elementos
así que
esta es la diferencia
entre importar
un css
a nivel global
como hemos hecho
en el layout
que tiene sentido
porque al final
es como
a ver
eso se va a aplicar
en toda la página
que hacerlo
a nivel de componente
y la diferencia
está en como
los hemos importado
y como se llaman
los ficheros
aquí tenemos
el punto module
y en los estilos
es globales
punto css
los importamos
y ya está
y también
como los hemos aplicado
para aquí
hemos importado
los estilos
hemos dicho
este es el header
este no sé qué
y ya está
ahora vamos a ponerle
aquí un poquito
de gap
4x
bueno
16x
bueno
32x
más o menos
más o menos
para que se vea
un poquito de esto
¿vale?
vale
pues ya tendríamos
un poco
a ver si
vamos a darle
un poco de
creo que esto
funcionaba
si no me equivoco
mal
vamos a poner
esto así
y el text decoration
decoration
underline
creo que esto
funcionaba
sí
vale
pues ya está
al menos ya tendríamos
esto funcionando
perfectamente
y que se vea
un poquito mejor
no sé si hacerle
la
no sé si
lo puedo hacer yo
más grande
y ya está
vale
hasta aquí
todo bien
amigos y amigas
buenas mil
siento que llevo meses
sin verte
hasta aquí todo bien
contadme
hay alguna cosa
que hasta ahora
no han entendido
nadie
funciona con sas
si nextgs
hasta ahora
sí que siempre
ha funcionado
con sas
lo que pasa es
y podríamos utilizar
sas
ahora mismo
pero lo que
quiero justamente
es luego utilizar
turbopack
y turbopack
sí que sé que no
funciona con sas
¿por qué le he llamado
navigation.module.css
y no navigation.css
el navigation.module.css
es justamente
una convención
para saber
que ese archivo
css
es de css
modules
o sea
es un css
que vas a importar
y lo vas a aplicar
con los hashes
que hemos visto
si no lo pongo así
pues es como que me estoy refiriendo
que no es un css
modules
básicamente
ahora veremos
las rutas dinámicas
no os preocupéis
¿qué tiene el page.js?
bueno el page.js
lo hemos visto antes
pero ya os podéis imaginar
o sea
el page
en la barra
o sea en el principal
ahora mismo
tenemos un h1
esta es nuestra app por ahora
y en el about
tenemos esto es el about
que es justamente
esto de aquí
si voy al home
esta es nuestra app por ahora
y si voy al about
esto es el about
o sea
lo que se está renderizando
justamente aquí
entonces
¿cómo puede ser
que lo de arriba
no cambie?
o sea lo de arriba
no cambia
porque es parte
del layout
¿vale?
por eso se queda así
como quieto
y es una de las cosas
más interesantes
y ahora veremos
además de las rutas dinámicas
también veremos el tema
de que
podemos tener layouts
anidados
también
¿ok?
a ver
¿qué más me preguntáis?
las rutas dinámicas
¿vale?
hasta ahora
hemos usado
algo nuevo de Nex
hasta ahora
todo lo que hemos usado
es todo lo nuevo de Nex
todo lo que hemos visto
hasta ahora
solo se puede utilizar
con Nex 10.13
todo
todo
¿por qué?
porque la carpeta app
no existe antes
algo raro
se está pasando ahí
con los estilos globales
¿no?
muchos
muchos asteriscos
bueno
puede ser que se apliquen
más de una vez
pero ya está
¿la carpeta components
puede estar fuera de app?
¿sería bueno?
buena pregunta
la carpeta app
hay la carpeta components
que yo la he puesto aquí
esto lo podéis sacar
directamente
lo podéis poner aquí
por ejemplo
¿no?
lo podéis dejar aquí
y ponerlo fuera
de la carpeta app
yo lo he puesto dentro
simplemente
porque os quería enseñar
que se podía
poner fuera
pero
o sea
que se podía poner dentro
pero lo podéis poner fuera
y debería funcionar
exactamente igual
¿ves?
que está funcionando
exactamente igual
yo sinceramente
si me preguntáis
por buenas prácticas
y tal
y muy pronto
para hablar de buenas prácticas
hay gente que os dirá
que lo mejor
es tenerlo todo recogido
o todo junto
en la carpeta app
yo sinceramente
creo que igual que
tenemos los estilos fuera
pues tener una carpeta components
fuera de app
pues puede ser buena idea
más que nada
porque
si empezamos a tener
mucho mucho mucho
ficheros dentro de app
que tienes page
layout
loading
error
y además
todos los componentes
sé que se supone
que lo han hecho por eso
se supone que lo han hecho
para que esté todo junto
pero yo sinceramente
no lo veo tanto
no lo comparto
sobre todo a nivel de componentes
pero bueno
es pronto para decir
pero bueno
que sí que se puede hacer
Tailwind funciona con Turbo Pack
a día de hoy
no funciona con
Turbo Pack
al parecer
reimporta los estilos globales
eso puede ser
por un tema de
eso puede ser
esto de que reimporta
los estilos globales
puede ser porque está
en modo de desarrollo
¿se pueden meter más rutas
dentro de la carpeta
aparte de la page.jsx?
claro que sí
de hecho
a ver
lo que no podéis hacer
o sea
lo que no podéis hacer
por ejemplo
imagínate que tú
ahora queremos una carpeta
o sea una ruta
dashboard
¿no?
pues no podéis hacer esto
esto
esto no va a existir
o sea
esto no va a funcionar
siempre
dashboard page
¿no?
este es
vamos a poner
este
es el dashboard
¿vale?
y yo intento acceder
a dashboard
dashboard
¿vale?
como puedes ver
404
nunca
nunca vas a crear las rutas
a través de solo un fichero
siempre tienes que crear
la carpeta
y luego dentro
el page.jsx
¿vale?
page.jsx
y ahora sí
ahora sí
si refresco
ahora sí que tengo el dashboard
¿vale?
o sea
ahora ya
la única forma
de crear una ruta
es crear una carpeta
y dentro
el page.jsx
sin eso
no funciona
¿vale?
hasta aquí
clarinete
muy bien
pues vamos a utilizar
tengo por aquí
a ver
tengo el fichero
voy a utilizar
luego más adelante
haremos el fetching de datos
y todo esto
como quiero enseñar
utilizar fotos
y todo esto
voy a intentar utilizar
la API esta de fotos
que hay por aquí
el fetching de datos
lo haremos después
pero por eso
las rutas que voy a crear
va a ser de
fotos
no sé qué
no sé cuánto
cosas así
¿vale?
así que
a ver
title
id
vale
pues vamos a tener
fotos
que
hostia
es que hay que 5.000 fotos
bueno
vamos a hacer alguna menos
que sean de post
comments
albums
to dos
users
creo que vamos a poner
posts
sé que es muy típico
pero solo tiene 100
y me parece bien
luego nos inventaremos
el tema de las imágenes
de alguna forma
así que
vamos a crear aquí
nuestra carpeta
posts
posts
le vamos a poner
el page
¿vale?
page.jsx
y en el page.jsx
nos vamos a copiar
el del about
porque no tiene mucha historia
aquí es donde haremos
luego el fetching de datos
aquí
aquí
mostramos
los posts
¿vale?
vamos a dejar esto por ahora
me voy a asegurar
simplemente
que lo anunciamos aquí
los posts
y así
vamos a empezar
label
post
y la ruta
post
¿vale?
así que vamos aquí al post
y ya tenemos nuestra nueva ruta
¿vale?
de about
podemos ir a post
perfecto
ahora
imaginad
y es normal
¿no?
cuando hablamos de post
que necesitamos rutas dinámicas
porque cada post
vamos a querer ver
el detalle
o sea
vamos a poner el body
y quiero ver el texto del post
y entonces
cada post
lo vamos a recuperar
a través de la id
así que
lo que podemos crear aquí
son las rutas dinámicas
que estábamos comentando antes
ya tenemos el about
el post
todas son estáticas
dentro de post
me gustaría
tener la ruta
barra post
barra
la id
del post
pues vamos a crear aquí
una nueva ruta
le ponemos la id
así
entre corchetes
y vamos a crear aquí
nuestro page.jsx
porque si no
no se crea la ruta
y aquí vamos a poner
export default function
post
y ponemos aquí
return
esto es un post
¿vale?
entonces
si ahora entro
a
post
barra
uno
esto es un post
si entro a la barra
lo que sea
esto es un post
¿vale?
mid tradition
bueno esto es un error
que no sé por qué pasa
pero no es por nada
que yo haya hecho
¿vale?
como podéis ver
ahora ya puedo tener
post
barra
la id del post
hasta aquí bien
pero claro
todo parece
esto es un post
no tiene mucho sentido
vamos a querer recuperar
la información
de la id del post
para eso
podemos acceder aquí
a params
y dentro de params
podemos recuperar
el nombre
que hemos puesto aquí
¿veis que aquí he puesto
id?
pues puedo
acceder a id
barra params
y aquí
esta id
este
es el post
y vamos a tener aquí
la información justo
del id
que estamos recuperando
si refresco
vale
otra vez
este es el post
no sé por qué esto
ahora
eso es un error
que he visto que pasa
de vez en cuando
en next 13
no sé si soy yo
que es que le voy a refrescar
mientras está refrescando
lo que sea
pero bueno
ahora ya podéis ver
que este id
que he puesto en la url
y aquí podéis poner
uno
dos
tres
ahí otra vez
no
un dos tres
vale
y aquí ya tenemos
esta información
esto es clave
esto es clave
porque ya nos está
permitiendo
de alguna forma
recuperar
la información
de la url
y con esto
podremos hacer
el fetching de datos
y tened en cuenta
que aquí cualquier cosa
que pongáis ahora mismo
sí que se la come con patatas
vale
ahora bien
tened en cuenta
otra cosa
y es que si aquí
por lo que sea
queréis poner
que esto es post
barra uno
y queréis seguir anidando
por ejemplo
comments
vale
pues esto peta
por qué
porque obviamente
solo hemos puesto
la ruta del uno
si quisiéramos tener
otra ruta
anidada más
lo que tendríamos que tener aquí
es otra carpeta
que fuese comments
y otra vez
poner el page
y tal
lo que vamos a hacer
es volver un paso atrás
vale
por qué
porque quiero
en post
justamente aquí
mostrar todos los post
así que si os parece
vamos a empezar ya
con un tema de fetching de datos
y así
vamos a ver todos los problemas
que vamos a tener
a la hora de entender
todos los fetching de datos
que existen
pero bueno
no te preocupes
que yo creo que
poco a poco
se puede hacer
vamos con el primero
a ver
el primero
hay que entender
una cosa bastante importante
y es que
vamos a hacer
vamos a hacer una cosa
imagínate
que en este post
normalmente
lo que harías
es poner un use effect
normalmente
si piensas en react
dirías
quiero hacer un fetching de datos
voy a poner aquí un use effect
y voy a hacer un fetch
voy a intentarlo
vale
y vas a ver el problema
que vamos a tener
justamente por el tema
de que ahora todo esto
es server side
si yo intento recuperar
aquí los posts
y le digo vale
pues este fetch
y hacemos aquí
un punto den
esto es lo típico
de todos los cursos
de react.js
de como hay que recuperar datos
y todo esto
voy a hacerlo hasta
lo voy a llevar hasta el final
o sea voy a hacer hasta
hasta esto de
vaya coñazo
cambia muchísimo
y demasiados archivos
con el mismo nombre
bueno
¿qué le vamos a hacer?
bueno
vamos a poner
el use state
voy a crear un estado
en react
que vamos a tener aquí
los posts
post
set post
use state
primero que está vacío
esto no va a funcionar
vale
pero esto como se haría
normalmente
hasta ahora
este es el post
esto lo vamos a quitar
vale
y vamos a poner aquí
que esto sea
section
ul
vamos a post map
bueno
lo que me pongo aquí esto
lo vamos a dejar
perfecto
mira muy bien
así me gusta
no tengo ganas de escribir esto
perfecto
¿vale?
esto como se haría normalmente
bueno este id
ay
es que esto lo he hecho en el page
la madre que me trajo
un momento
esto lo tenía que hacer aquí
no lo tenía que hacer en el otro
me equivoqué de archivo
en el post page
y esto lo tenemos que quitar aquí
y este lo vamos a dejar
como estaba antes
porque este lo haremos
de otra forma
vale
perfecto
vale
esto lo tenemos que hacer
a nivel de la ruta
dentro de post page
en este archivo
no dentro del id
esto es como normalmente
si sabes React
como harías el fetching de datos
en el cliente
¿vale?
en el cliente
eso sí
pero hay que tener en cuenta una cosa
¿no?
es que como hemos dicho
los componentes
de NextGS 13
dentro de la carpeta app
se ejecutan
en el servidor
por defecto
¿vale?
así que esto
no va a funcionar
y de hecho
se debería quejar muy fuerte
si vamos aquí
y volvemos a MyFirstApp
fíjate que ya
nos lo dice en toda la cara
nos dice
oye
estás importando un componente
que necesita
useState
y solo funciona
en un componente
de cliente
pero ninguno de sus padres
ha sido marcado
con un useClient
no te preocupes
que luego veremos eso
como un ejemplo
así que son componentes
del servidor
por defecto
y encima te dice
donde tienes el error
¿no?
te dice
ah, el useState
claro, alguien puede decir
ah, bueno, pues quito el useState
este
intento hacerlo de otra forma
y tal
no, tampoco va a funcionar
el problema que está pasando
es que
como tienes que hacer
el fetching de datos
cambia radicalmente
¿no?
o sea, hay que pensar
de otra forma
este componente
es un server component
es un React server component
y por lo tanto
el fetching de datos
está ocurriendo ya
en el servidor
este componente
no se va a renderizar
en el cliente
no se va a hidratar
en el cliente
sino que lo tienes
directamente en el servidor
así que
vamos a crear
un método
que sería
fetchPost
por ejemplo
¿vale?
y vamos a mover
este fetch
que habíamos puesto aquí
lo vamos a mover aquí
directamente
y aquí vamos a hacer
el return
¿vale?
¿qué pasa con todo esto?
pues que esto ya no lo necesitas
porque directamente
puedes hacer un post
await
y vamos a crear
un componente de RIA
que es asíncrono
y hacemos una wait
del fetchPost
quitamos el useEffect
y dejamos esto así
y guardamos los cambios
y vamos a ver
capachao
pues ya vemos
que ya tenemos aquí
todos nuestros posts
todos nuestros posts
de hecho
lo más interesante de esto
es que normalmente
imagínate
no tiene paginación
este artículo
¿no?
o sea
esta API
y me está mostrando 100
una cosa que podrías hacer
es decir
voy a hacer aquí
el slice
de 0 a 5
y tal
y que solo me muestre
y esto
pues funcionaría
perfectamente
y lo que estarías haciendo
en realidad
es que no estarías
devolviendo
información de más
no estaría
ejecutándose en el cliente
ese slice
una cosa que sí que ocurriría
con los componentes
de React normal
de hecho
si me dices
el HTML
que está devolviendo esto
verías
que solo está devolviendo
desde el servidor
los 5 primeros artículos
gracias a que estamos
haciendo esto
y esto
se está ejecutando
simple y llanamente
en el servidor
¿vale?
todo esto
está ocurriendo
en el servidor
así que esto sería
un primer
React Server Component
un componente
que en este caso
es una página
pero es un componente
que se está renderizando
en el servidor
lo más interesante
realmente que tienen
los React Server Components
es que
este componente
en realidad
alguien puede pensar
bueno claro
esto es un componente especial
porque es una página
pero
imaginad que estamos aquí
aquí tenemos el page
voy a crear aquí
por ejemplo
list of posts
punto jsx
y lo que voy a hacer
me voy a copiar todo esto
me voy a poner por aquí
y aquí vamos a hacer
un export default
y ya vamos a poner aquí
list of posts
vamos a quitar el paramos
este no sirve para nada
vamos a quitar el section
este porque tampoco
tiene mucho sentido aquí
y esto
lo vamos a poner acá
esto por aquí
por aquí
por aquí
creo que
me he colado uno
sí
vale porque este
no hace falta tampoco
creo que se podría devolver esto
si no
vamos a hacerlo así
porque ahora tengo
tengo dudas
y ante la duda
un fragment
vale
vale
no sé
que con el fragment
queda tan raro
pero bueno
yo creo que sí que se puede
devolver un array
voy a probarlo
qué mal
qué peor que puede pasar
que pete
tampoco me va a venir
no me va a venir conci
a decirme
hiciste que petase
no sé qué
vale
bueno
pues tenemos este componente
que se llama list of posts
ahora esta página
vamos a simplificarla
vamos a importar
el list of posts
aquí
y el list of posts
es lo que vamos a renderizar
justamente aquí
quitamos esto
quitamos esto
dejamos aquí el list of posts
y aquí
si volvemos a nuestra página
y refrescamos
podemos ver que está funcionando
perfectamente
para que veáis
que realmente funciona
porque ahora me sabe mal
si alguien no se lo cree
vamos a poner que esto
voy a poner un estilo así
un poco rápido
para que lo veáis
vale
pero ponemos esto así
y ya lo tenemos
o sea
esto es impresionante
en el sentido de que
lo que estamos haciendo
es simplemente
a nivel de componente
estamos haciendo
el fetching de datos
de
desde el servidor
vale
o sea
lo que estamos haciendo aquí
es que
en lugar
de tener
a nivel de página
tener que hacer
el fetching de datos
lo que estamos haciendo
es que
cada componente
cada componente
es capaz de hacer
fetching de datos
desde el servidor
vale
así lo podéis ver
más claro
porque si no hay gente
que puede pensar
ah no
es que a nivel de página
tengo que hacer
no
no es así
de hecho
vamos a ver
otro problema
que vamos a tener
imaginemos
imaginemos
que quiero
que el list of posts
no
pues quiero que tenga
aquí un botón
no vamos a ponerle
un botón
y que el botón
tenga un on click
y vamos a tener
un handle click
y aquí ponemos
me gusta
por ejemplo
me gusta
y yo que sé
vamos a poner
handle click
y esto
vamos a poner aquí
voy a poner un alert
alert
me gusta este post
ok
entonces
vamos a hacer esto
obviamente
esto es funcionalidad
que debería funcionar
en el cliente
que es lo que ocurre
si me vuelvo aquí
ojo
otra vez
tenemos este problema
pero bueno
basta ya
con este problema
es que me está avisando
oye
es que me estás pasando
un event handler
para el click
pero es que
se lo estás pasando
dentro
de un componente
que no es del cliente
¿por qué?
porque este componente
ya hemos visto
los componentes
de NextGS13
dentro de la carpeta app
son por defecto
siempre ejecutados
en el servidor
por lo tanto
si necesitamos
de alguna forma
crear componentes
que entregan interactividad
que necesiten estado
que funcionen con un hook
como
useState
useEffect
useReducer
si necesitas
acceder a la API
del navegador
todo eso
no lo puedes hacer
por defecto
en un componente
entonces la pregunta
del millón es
bueno
¿y cómo se hace?
bueno
vamos a crear
otro componente aquí
aunque
lo correcto
sería mover
estos componentes
por aquí dentro
y tal
pero bueno
vamos a ponerlo aquí
y para utilizar
también este sistema
de archivos
que nos da
Next13
y vamos a poner aquí
el like
like button
¿vale?
y aquí
export function
like button
y vamos a mover
esta funcionalidad
vamos a poner esto
y vamos a poner aquí
el like
like button
¿vale?
ya lo he importado
por arriba
perfecto
este hand click
me lo puedo quitar
de aquí
y aquí
pues vamos a poner
el return
y un botón
y me gusta
y vamos a poner aquí
un corazón
ay
no tengo
bueno
quería el corazón
bueno
pero bueno
vamos a dejar este
¿vale?
con el on click
obviamente
tened en cuenta
que ustedes aquí
pues pueden hacer
ah mira
perfecto
perfecto
mira
mejor
mejor
gracias
por esto
mejor
un ejemplo
más bonito
básicamente
lo que vamos a hacer
es que tenga estado
y así lo veremos
más claro
¿vale?
muy bien
y vamos a hacer
que se ponga
o no se ponga
dependiendo del estado
y todo esto
obviamente aquí
podríais llamar
a una fetching de datos
a un post
para que cambie
la base de datos
el estado
y todo esto
pero bueno
al menos veamos esto
y este like button
lo vamos a poner aquí
que aquí le podríamos pasar
por supuesto
la id
este sería el post id
y aquí
pues le recibiría la id
y podríamos hacer
lo que quisiéramos
con la id
y todo esto
ahora mirando
nuestro fichero
nos vuelve a dar
el mismo problema
nos dice
oye
es que esto
sigue siendo
un componente servidor
y tal
porque todos son
por defecto así
fijaos que además
aquí tenemos
la cascada
nos dice
desde abajo arriba
esta es la ruta
page
el componente
list of post
dentro del like button
cualquiera de estos
podríamos hacer
lo que sea
un componente
de cliente
pero obviamente
lo que vais a querer
y esto es súper importante
que lo tengáis muy en cuenta
es que
lo que vais a necesitar
siempre
es intentar
que sea el componente
más pequeño
el que sea
de cliente
porque así
lo que vais a conseguir
es que vuestro bundle
sea lo más pequeño posible
y solo las partes pequeñas
que necesiten interactividad
sean las que realmente
viajan al cliente
en el bundle
y son las que
tiene que necesitar
pues las dependencias
que tengan
o todo esto
¿vale?
o sea que esto es un cambio
de mentalidad
a nivel de React
directamente
ya no de Next
porque esto es una cosa
que va a llegar
a todos los frameworks
así que
ya nos ha dicho
que tenemos que convertir
que esto sea
un componente de cliente
¿cómo lo hacemos?
tenemos que poner aquí
un useClient
en la primera línea
tenemos que poner
un string
que le decimos
useClient
estamos indicándole
que este componente
likeButton
necesita utilizar
el cliente
y que por lo tanto
no va a ser
de servidor
sino que va a funcionar
en el cliente
¿vale?
así que ahora
sí que lo tenemos aquí
fijaos que aquí
tenemos nuestro botón
y ahora si le clico
pues funciona perfectamente
pero es que
este botón
que tenemos aquí
este botón
sí que se está
renderizando
tanto en servidor
como en cliente
en servidor
se está renderizando
si lo veis
pues con este HTML
¿no?
como sería normalmente
en servidor
con el estado inicial
en false
se está inicializando
y se muestra
y luego lo que está haciendo
en el cliente
es hidratarlo
si tienes dudas
de qué es la hidratación
qué es no sé qué
te voy a hacer un anuncio
y parece que es promoción
pero no
o sea es promoción
es que es un repositorio
totalmente gratis
tenemos aquí
un repositorio
con un montón de preguntas
de entrevistas típicas
de React
y una de ellas
es justamente
qué es la hidratación
¿vale?
si no sabes
qué es la hidratación
te lo voy a explicar
porque te lo voy a leer
pero la próxima vez
ya sabes que tienes aquí
una explicación buenísima
y dentro de poco
justamente estamos trabajando
en este
en esta web
que se llama
ah bueno
ahora no sé si funcionará
ah sí que funciona
reactjs.wiki
que justamente
vas a poder estar buscando
cualquiera de estas preguntas
en un buscador
que está hecho
con NextGS13
porque justamente
lo he utilizado
para probar un poquillo
y para toquetear
y que tienes
pues no sé
son casi 100 preguntas
todas con su explicación
con ejemplos
algunas con código
y que lo podrás utilizar
totalmente gratis
pues que lo sepas
y que si te interesa
pues que le des una estrellita
hombre
que estas cosas
siempre ayudan
para seguir
darle tal
la hidratación
es tirarle agua
al entrevistador
cuando te hace una pregunta
que no sabes
ya te digo
a ver
la hidratación
que suena mucho
a agua
y tiene todo
todo sentido
básicamente
¿qué pasa?
cuando en el servidor
desde el servidor
con frameworks
como NextGS
Remix
o lo que sea
cualquier servidor
cualquier framework
que tengamos de React
cuando hacemos
un server side rendering
cuando renderizamos
desde la parte del servidor
lo que estamos devolviendo
es un HTML estático
es como un string
sin vida
por eso se le llama
hidratación
porque como ha dicho Gonzi
es como echarle agüita
en lo que consiste
es que ese HTML
que es estático
lo dotamos de vida
en el cliente
le añadimos
la interactividad
ejecutamos
el ciclo de vida
por ejemplo
los efectos que tengamos
el use effect
el estado también
todo eso
y a ese proceso
se le llama hidratación
se le llama hidratación
porque desde el cliente
lo que hacemos
es reutilizar
todo ese HTML
sin vida
por ejemplo
si yo le doy aquí
al ver código fuente
lo vais a ver claramente
¿ves todo este HTML?
este HTML
nos lo está devolviendo
el servidor
pero ¿qué pasa?
que este HTML
es incapaz
de que le digamos
que cuando hago clic
en este botón
¿ves?
o sea no tiene ahí
un onclick
no sabe funcionar
por sí mismo
esto lo podríamos renderizar
en cualquier fichero
o sea en cualquier sitio
y funcionaría
esto funcionaría perfectamente
lo veríamos
de hecho
lo podéis ver más claro
si vais aquí
y desactiváis
uy
aquí
aquí
aquí
si desactiváis el JavaScript
inhabilitar JavaScript
si desactiváis JavaScript
podéis ver
que la página
se sigue viendo
pero tu botón
no funciona
porque se renderiza
pero no tiene interactividad
así que
lo que tenéis que hacer
justamente es
hidratarlo
por suerte
todos estos frameworks
lo están haciendo
por ustedes
no se tienen que preocupar
pero bueno
esto es súper importante
que sepan
qué es la hidratación
cómo funciona esto
para que justamente
entiendan
por qué es importante
HTML que se envía
por qué
se tienen que enviar
también muchas veces
no sé si
toda esta información
que hay por aquí
de props
y todo esto
hay un montón de información
aquí que a veces
se tienen que enviar
ves estos children
con el home
no sé qué
porque tienen que
de alguna forma
saber que el servidor
y cliente
tengan que convivir
de alguna forma
que cuando venga
lo del servidor
lo dote de vida
vale
pues ya tenemos aquí
lo del client
bueno
tengo que reiniciar esto
porque me parece que
vale
ahora sí
que funciona correctamente
vale
pues ya esto
sería como
el paso de poder
utilizar nuestro
React Server Components
ahora bien
una cosa que es bastante
importante
o diferente
en este React Server Component
que tenemos aquí
es que
hasta ahora
lo que hemos creado
aquí
sería una página
estática
si lo miras fríamente
¿no?
¿por qué?
porque cuando
hacemos el fetch post
pues lo que le estamos diciendo
es
haz un fetch
de este
de este
de este
de este endpoint
me devuelve los datos
y me lo pintas
entonces
si tú dejas el código
tal y como lo tienes
cuando tú hagas un build
vamos a hacer un
mpn run build
vamos a ver
qué es lo que ocurre
de hecho
mira
antes de hacer
mpn run build
vamos a hacer una cosa
para que lo veamos más claro
si yo pongo aquí
un console log
y vamos a poner
fetching post
¿vale?
y vamos a poner aquí
un gato
para que lo veamos más claro
todavía
el gatito así
¿vale?
y voy a hacer un mpn run build
¿vale?
un build básicamente
es que vamos a
como a crear
a empaquetar nuestra aplicación
para llevarla a producción
¿vale?
vamos a ver
lo que ocurre
con esto que hemos hecho
¿vale?
collecting page data
ojo
ojo
¿qué ha pasado aquí?
¿qué ha pasado aquí?
bueno
esto no sé por qué lo hace
porque ha hecho
como el fetching de datos
dos veces
no tengo ni idea
no sé si es por algo que
algo de react
alguna cosa que está en beta
o lo que sea
pero lo que sí que sabemos
es que al menos lo ha hecho una vez
al menos
lo ha hecho dos veces
pero debería haberlo hecho
solo una vez
la verdad
el tema es
que lo que ha hecho
cuando ha hecho el build
es que ha dicho
vale
voy a hacer el fetching de datos
y te voy a construir
una página estática
con los datos
que me estabas pidiendo aquí
o sea
hemos creado una página estática
y nos la ha generado estática
o sea
de hecho
este post que vemos aquí
a ver si lo podemos ver
no lo puedo hacer más pequeño
así
bueno
pues este post
que lo tenemos por aquí
nos lo dice aquí
dice
esto
lo que tiene este puntito
dice static
dice
automatically render
as static HTML
¿vale?
no utiliza initial props
o sea
nos ha creado una página estática
de este fetching post
pero claro
esto es exactamente
lo que queremos
depende
¿vale?
hay que tener en cuenta
que esto depende de muchas cosas
por ejemplo
si estos fuesen los posts
de nuestro blog
y lo que hacemos
es que
cada vez que hacemos
un despliegue
añadimos un nuevo artículo
pues seguramente
tiene sentido
que esto funcione así
porque de esta forma
pues ha creado
un archivo estático
que no va a tener que hacer
el fetching de datos
ni en el servidor
ni en el cliente
o sea
nos ha generado una HTML
directamente
de hecho
lo podríamos intentar buscar aquí
lo podríamos intentar buscar
por aquí
no sé si en chunks
pages
app
post
id
no
no
¿dónde está?
¿dónde está?
bueno creo que nos debería haber
creado una página
no sé
no la encontraré
pero
pero
pages
no
no la encontraré
chunks
app
ah
sí
la encontré
post
mira ¿veis?
este archivo
lo que nos ha creado
es este post.html
que es totalmente estático
que lo que ha hecho es
a nivel de compilación
cuando ha hecho
la build
se ha descargado los datos
y ha creado el HTML
y ya está
y se ha olvidado
ha dicho vale
pues ya está
hasta aquí hemos llegado
¿sabes?
esto es lo que hemos hecho
y ya
estos datos son estáticos
punto
vale
ahora bien
imagínate
que no te interesa eso
imagínate que estás trabajando
que este
esta API
pues es tu e-commerce
es un e-commerce
en el que cada vez
se van añadiendo
nuevos datos
o tienes un CMS
donde vas añadiendo
nuevos datos
nuevos posts
y por lo tanto
lo que quieres
es que esto no ocurra
una vez
de forma estática
ya está
sino que quieres
que vaya ocurriendo
constantemente
para ello
tienes que poner aquí
cache
e indicarle
no store
creo que es no store
bueno ahora lo vamos a ver
vale
lo que estamos diciendo es
oye
esto es algo
que es totalmente nativo
de la plataforma web
lo que estamos diciendo es
de alguna forma es
necesitamos que no guardes esto
vale
no tienes que guardar
en cache esto
así que
lo que le estamos diciendo
básicamente
es que queremos
que esto sea server site
y vamos a ver la diferencia
muy fácil
¿por qué?
porque si yo ahora
aquí hago un mpn run build
vamos a ver
que no deberíamos ver
este fetching post
ni veríamos el gatito
ni nada de esto
¿vale?
ah pues sí que lo ha hecho
sí que lo ha hecho
y no sé por qué lo ha hecho
no sé si es no store
o no cache
a ver vamos a probarlo otra vez
a ver si
o la he liado yo
porque he ido muy arriba
bueno aquí lo ha hecho una vez
ah no lo ha hecho dos veces
lo ha hecho dos veces
vamos a probarlo otra vez
que era no store
la verdad
creo que era no store
pero bueno
vamos a probar
a ver qué
vale
pues no
yo creo que era no store
si no lo puedo mirar
en la documentación
porque
igualmente
a ver
vamos a ver
si me está generando
porque igual está entrando
igualmente
pero sí que hace el server site
de hecho
no vale vale vale
ves que ahora ha cambiado
el iconito
antes era un círculo
que círculo significa
que es estático
y ahora
ves que pone una lambda
porque básicamente
sí que tiene server site rendering
no sé por qué entra
es raro
no debería
pero bueno ya está
el tema
ahora que tenemos esto
fijaos
que si yo voy aquí
a modo desarrollo
pues cada vez
bueno no sé por qué
me han petado
los estilos
no sé por qué
mis estilos
han desaparecido
pero
bueno pensad que también
que está en beta esto
vale
ahora cada vez que entro a la página
pues deberíamos ver
el fetching post
fetching post
fetching post
de hecho
la mejor forma de ver esto
debería ser con
npm run start
vale
deberíamos inicializar
hacer un start
inicializar esto
y ver realmente
que
que sólo
el servidor
es el que está haciendo
el fetching de datos
pero bueno
esto es sólo para que veáis
las formas
las diferentes formas
que hay de hacer
fetching de datos
ya hemos visto el estático
ya hemos visto también
el server site
vale
este sería el server site
luego tenemos otro
otro más
que sería
el incremental static generation
este
si tampoco me acuerdo
de memoria
pero para este
hay que utilizar el next
y aquí tendríamos
revalidate
y aquí creo que son
los segundos
bueno ponen number
no pone nada
pero creo que son los segundos
entonces esto
qué es lo que haría
esto lo que haría
básicamente es
que cada 10 segundos
si ha recibido una request
revalidaría
y haría un nuevo fetch
para regenerar
el archivo estático
normalmente
la mejor solución
a no ser que tenga muy claro
que tus datos
van a ser 100% estáticos
una de las mejores soluciones
es hacer esto
ya sea
no hace falta
que sean 10 segundos
puedes poner cada minuto
cada minuto
vas a estar recuperando
vas a hacer un fetching de datos
vas a regenerar
esta página
porque puede ser
que se han creado
nuevos posts
o lo que sea
pero bueno
ya puedes ver
que además
cómo ha cambiado
el hacer el fetching de datos
lo puedes hacer
a nivel de cada uno
de los componentes
esto lo puedes repetir
en cualquier nivel
de granularidad
y además
puedes estar mezclando
desde server site
incremental static
y todo esto
esto justamente
lo que permite
es que en lugar
de tener que esperar
todo el fetching de datos
que haríamos antes
en una página
ahora lo que hacemos
es tenerlo más granular
a nivel de componentes
de hecho
vamos a continuar con esto
y lo vamos a ir viendo
más en detalle
por ahora
lo voy a dejar así
yo creo que esto
hace que funcione
si no me equivoco
perfecto
aquí en el list of posts
lo que vamos a hacer
es que esto sea
un link
y vamos a poner
que nos lleva
a post id
no sé si esto
si creo que eso
sí que es necesario
ya ahora os explico esto
vale
voy a ver primero
si funciona
voy a importar
el componente link
link from next link
vale
vale
entro
vale
este es el post 1
venga
entonces
que como tenemos que hacer
esto es súper importante
a la hora de hacer
los enlaces
a las páginas
que son internas
de React
que tienen
como un segmento dinámico
lo que puedes poner
es un href
barra post
barra
aquí pondríamos
el segmento dinámico
y aquí le pondríamos
as
y aquí sí que tendríamos
que generar
directamente
como la ruta
vale
normalmente
yo creo que esto
funciona bien así
creo que esto funciona
si no me equivoco
o sea funciona perfectamente
no sé si es una cosa
que ahora ya no es necesaria
tampoco
pero al menos antes
esto era obligatorio
hacerlo así
directamente
no sé si tenemos
información privilegiada
que nos lo pueda decir
pero bueno
ahora ya tenemos
pues la ruta completa
ya podemos ir
a la página
aquí en el post
y tal
ahora vamos a
vamos a empezar aquí
a complicar bastante
las cosas
¿por qué?
porque lo que vamos a hacer
es por un lado
por un lado
vamos a hacer
que tanto
mira vamos a hacer
una cosa
que esto es súper interesante
como hemos hablado
ya de los layouts
vamos a hacer una cosa
vamos a hacer que post
también tenga
también tenga un layout
así que vamos a poner aquí
el layout
.jsx
y vamos a poner aquí
un export default
function
vamos a poner aquí
post layout
y aquí lo que podríamos hacer
es decir
este es el layout
de los posts
¿vale?
vamos a poner esto simplemente
¿vale?
no sé por qué eso pasa
vale
este es el layout
de los posts
¿vale?
¿por qué me
porque ahora dentro de post
me sale solo esto?
porque los layouts
siempre
siempre
siempre
como hay que tener en cuenta
que es un componente
que lo que hace es envolver
tenemos que utilizar
children
¿vale?
así que ponemos children
y aquí lo que estamos diciendo es
tienes que renderizar aquí
todo lo que estás envolviendo
¿vale?
pues ahora sí
este es el layout
de los posts
cuando entramos a un post
¿qué es lo que pasa?
que este es el layout
de los posts
justamente se queda
y lo más interesante
de este es el layout
de los posts
es que podríamos llegar
a tener incluso
en el layout
podríamos tener
algún tipo de estado
o lo que sea
e incluso mantenerlo
o sea
lo que podríamos tener aquí
en lugar de este
es el lado de los posts
imaginad
vamos a poner
vamos a poner aquí
un counter
¿vale?
sé que no es el mejor ejemplo
del mundo
pero es solo para que veáis
una de las cosas más interesantes
que tienen los layouts
vamos a utilizar
al use client
export function
counter
¿vale?
voy a dejar que me escriba
todo esto
voy a utilizar esto
porque quiero que veas
una de las cosas más interesantes
que tienen los layouts
y es que justamente
el layout
lo que hace
es mantener siempre
el estado
así que
de esta forma
y esto es muy útil
por ejemplo
para navegaciones
para search
para lo que sea
esto lo ponemos por aquí
¿vale?
bueno
imagínate que aquí en post
tenemos aquí este count
puede ser lo que sea
un buscador
imagínate un buscador
o sea
podría ser un buscador
entonces tú tienes aquí
increment ¿no?
y en este layout
yo estoy incrementando
y luego digo
bueno
quiero ir al artículo
pues le darías
y fíjate que el estado
en el que se encuentra
este componente
no ha cambiado
y sigue persistiendo
de hecho si vuelves a post
de nuevo
este estado
sigue persistiendo
pero si te vas a about
y vuelves a post
como se ha desmontado
ese layout
entonces ya
sí que se reinicia
vuelve a renderizarse
desde cero
pero lo interesante
es que siempre que ese layout
pues se mantenga
visible
en las rutas anidadas
¿no?
porque como tenemos
este layout
a nivel
de los post
¿no?
lo hemos puesto aquí
este layout
lo hemos puesto aquí
por lo tanto
la ruta anidada
de las ideas
sigue utilizando
este layout
por lo tanto
cuando yo entro
en un artículo
este componente
no se desmonta
y sigue teniendo
el mismo estado
esto es súper importante
porque por ejemplo
para navegaciones
breakcrums
para cualquier cosa
que se te pueda ocurrir
puede marcar la diferencia
el hecho de que
no tienes que lidiar más
con tener algún tipo
de especie
de estado global
porque simplemente
lo que haces
es mantener el componente
y lo que haces
es crear
las rutas anidadas
para seguir renderizando
¿vale?
así que
esto sería el tema
de las rutas anidadas
el estado
el use client
vamos a ver
si tienen algunas preguntas
y seguimos con ello
se parece al context
si al componente link
le agregas una prop soft
también lo mantiene
para breakcrums
es brutal
¿cómo dividirías
la carpeta components
cuando crece
y tengo componentes
que se comparten
y otros propios
de las páginas?
yo intentaría
intentaría
pues
poner
o sea
todos
con su propio nombre
y ya está
¿no?
estamos viendo
o sea
no es que no sé
es que depende de Lucas
es muy difícil así
como
¿cómo dividirías?
pero sin saber el proyecto
y tal
también puedes intentar
pues hacerlo por contextos
por ejemplo
y cosas así
adiós a la store
para los carritos
claro
el carrito puede estar
en un layout
que al final es compartido
en toda la página
y no cambiaría su estado
deja de estar en beta
cuando no se rompa todo
ya te digo
mantener los componentes
en memoria
¿no es un poco ineficiente?
si lo que quieres
es solo conservar
un estado
pues depende
¿no?
o sea
vas a
no estás
manteniendo el componente
en memoria
lo estás manteniendo
visualmente
o sea
no es que queramos
mantenerlo en memoria
es que lo queremos
mantener visualmente
si queremos que el componente
se siga viendo
es normal
¿no?
el layout era
use client
podemos hacer que el layout
sea use client
pero siempre que hemos dicho
a ver
lo interesante aquí
por ejemplo
alguien me dice
¿pero por qué no pones
el use client aquí?
la idea
del use client
es que lo intentéis utilizar
en
en
en el árbol de elementos
en la parte más pequeña
si nosotros miramos esto
¿tiene sentido que ponga
un use client aquí?
la verdad es que no
porque este componente
no tiene estado
no tiene efectos
no necesita interactividad
por lo tanto no
lo que tenemos que hacerlo
es justamente
en el componente
que sigue lo necesita
por muy poco que parezca
¿no?
porque al final dice
bueno pero esto es un dip
o sea esto no tiene
mucha historia
bueno pero da igual
al final es un cambio
de mentalidad
hay que intentar
evitar
utilizar el use client
siempre que se pueda
¿ok?
así que
importante
¿qué pasa con el
get static props
o el get server site props?
bueno pues Newell
eso lo hemos comentado
antes
justamente
lo que hemos dicho
ya os he comentado
como hacer el get server site props
pero os lo voy a dejar
en un comentario
para que lo veáis clarísimo
¿vale?
mira
list of posts
aquí teníamos esto
ahora tanto
get server site props
get static props
todo eso
hay que olvidarse
ya no sirve
¿vale?
pero si quisierais hacer
el get static props
sería
sería hacer
esto
de hecho
lo voy a dejar aquí
como comentado
para que lo veáis
¿vale?
sería hacer esto
este sería el get static props
este sería el get static props
¿vale?
lo comentamos
este sería el get server site props
que es muy parecido
esto es solo para la gente
que ya sabía Next12 ¿vale?
pero bueno
es un momento
que esto sería
cache
no store
esto lo comentamos también
bueno
voy a ponerlo en la misma línea
pues total
esto sería así
¿vale?
luego tendríamos
el incremental
incremental static regeneration
que sería
también
sería justo
el que hemos dejado
¿vale?
que sería así
esto
esto es lo que
lo que es
ya no tenemos
a nivel de página
ya no hacemos esto
lo hacemos
a nivel de componente
y esto yo lo he separado
en un
en un método
pero esto lo podríais dejar
aquí en medio
también
podríais llamar
a una base de datos
aquí directamente
a una
a lo que queráis
¿vale?
directamente
este fin de semana
empecé a aprender Next12
y veo que el 13
tiene algunos cambios importantes
tiene unos cambios importantes
pero al final
puedes seguir utilizando
todo lo de Next12
y va
esto todo lo que estáis viendo
está en beta
no va a cambiar mucho
seguro
pero bueno
hay que tenerlo en cuenta
meterás autenticación
no creo que hoy meta autenticación
porque es que autenticación
no tiene nada que ver con Next
o sea estamos viendo
las novedades de Next
no cosas que puedes hacer
porque al final
si no
me podría volver aquí loco
lo que es experimental
es el Appdir
bueno
lo que es experimental
no solo es el Appdir
sino que también está en beta
todo el tema
de React Server Components
no solo el tema
de los Nested Layouts
sino que también
los React Server Components
hola
¿Nextout no funciona
con 13
alguna alternativa
que funcione?
bueno
ahora mismo
es un poco
hay que tener en cuenta
que está un poco verde
yo creo que hay que esperar
no solo a Next South
sino a todo en general
así que yo creo que lo que hay que tener
es paciencia
porque no creo que sea mucha
no sé
o sea esto está bien
empezar a entenderlo
aprenderlo
pero hay que ir esperando
que todo vaya saliendo
los Server Components
pueden usar Client Components
pero no viceversa
claro
tiene sentido
por eso justamente
es buena idea
que intentéis utilizar
los Client Components
lo más lejos
del tronco
del árbol de elementos
¿vale?
eso lo dice Gonsi
mientras no te iré el error
no hace falta
entonces como
page.jsx
es el nombre específico
para generar la página
layout.jsx
envuelve automáticamente
el page
exacto
no solo el page
sino todas las rutas anidadas
¿eh?
se puede seguir usando
el hook
gracias
gracias Majo
¿se puede usar el hook
use swr?
sí que se puede
de hecho luego lo vamos a ver
¿vale?
¿cómo hacer una página
que no está dentro
del layout principal?
esa es una buena pregunta
la verdad es que no sé
si se puede
pero yo creo que no
al final lo que puedes hacer
es evitar
que en el layout principal
tengas cosas que no quieras
y ya está
pero creo que no se puede
sinceramente
sinceramente
sí se puede
vale
pues no tenía ni idea
la verdad
como no lo he hecho todavía
pues no tenía ni idea
no sabía que se podía
la verdad que no había intentado
vale
vamos a seguir
con el tema
a ver
tengo aquí
qué cosas quería enseñar
vale
entonces
vamos a ver
vamos a ver
vamos a crear
vamos a seguir con el tema
de esto es el post
vale
vamos a hacer una cosa
¿por qué?
porque tenemos aquí en el page
en este page
podríamos volver a hacer
para que veamos un poco
la potencia
que tiene todo esto
vamos a
vamos a hacer esto
vamos a poner
en el page
del componente este
o sea
esto es el post
esto sería ya el contenido
directamente ¿no?
así que aquí
ya le podríamos poner
id
vale
static props
vamos a dejarlo así
fetch post
vamos a poner
fetch
single post
vamos a poner esto
por aquí
y aquí
vamos a hacer
post
fetch single post
con la id
await
vamos a poner esto así
y aquí
vamos a poner
post title
de hecho esto
debería ser un article
y vamos a enseñar aquí
toda la información
del article
y lo que vamos a hacer
es tener otra ruta
ni nada más
donde vamos a poner
los comentarios
y entonces cuando tengamos
todo
tanto los comentarios
como el post
como todo esto
vamos a hacerlo
del loading
para que veamos
cómo se van a streamear
los datos
y cómo se puede hacer
el tema del loading
y creo que puede ser
interesante
porque vamos a poder
como falsear
con un timeout
cuánto tarda
cada uno de ellos
y así pues probamos
bien el tema
del loading
y todo esto
esto no sé
si era content
o body
creo que era body
vale
vamos a ver
si ya tenemos
la información
vale
id is not defined
vale
porque aquí
no le he puesto
la id
vamos a pasar así
y ahora sí
vale
ya tenemos aquí
la información
le voy a quitar
el layout este
porque al final
el layout
este del counter
era eso
para que lo vieseis
pero bueno
vamos a ponerle aquí
h small
estos
home
vamos a poner
post
vale
como un break ground
vale
vale
aquí tendríamos
como ya
el single page
pero podríamos ir más
y podríamos decirle
vale
pues aquí en el page
lo que quiero
es que tenga
un link
que sea
ver comentarios
por ejemplo
podríamos hacer
lo de ver comentarios
pero claro
aquí sí que
claro
si hacemos esto
de hecho
href
y vamos a poner aquí
post
barra
id
barra
comments
vale
vamos a cambiar esto así
y esto así
ver comentarios
vamos a importar el link
vamos a importar el link
link from next link
vale
ver comentarios
esto nos llevaría al comments
que todavía no lo tenemos
pero podríamos crear aquí
una carpeta
que sea
com
como le he puesto
comments
como le he puesto
comments
con dos ms
comments
tenemos el page
punto jsx
y vamos a copiarnos
todo esto
pero ahora
aquí en el post
vamos a ponerle aquí
comments
porque creo que esto
si no me equivoco mal
debería devolvernos los comentarios
vamos a mirarlo
si le pongo aquí uno
comments
vale
veis que me devuelve como
pseudo comentarios
algo así como comentarios
algo parecido a comentarios
fetch comments
fetch comments
fetch comments
vamos a quitar esto de aquí
y aquí en ver comentarios
esto lo quitamos
y iteramos los comentarios
comments
y vamos a enseñar
los comentarios
comments map
vale
y de hecho
aquí
que lástima
que lástima que no
no tiene imágenes
porque aquí con esto
podríamos utilizar el tema
de las imágenes
pero si no podemos generar
imágenes
vale
vale
y esto serían
vale
esto serían los comentarios
lo malo
es que como puedes ver
en el de los comentarios
yo a mí lo que me gustaría
no
es poder mantener
tanto
los comentarios
mientras se está viendo
también el post
o sea
me gustaría
que lo del post este
fuese
parte del layout
en realidad
así que
entiendo
y esto
sería interesante utilizarlo
que si hacemos aquí
lo del children
y pasamos aquí
un children
no sé si el layout
puede tener acceso a esto
pero esto sería
lo realmente
buenísimo
o sea
este page
no sé si se le puede llamar
directamente
layout
no sé si con el layout
directamente ya funciona
pero sí
ya lo tendríamos
de hecho
podríamos
mira
ya tendríamos aquí
vale
estamos en post
entramos a un post
vale
me ha dejado mal
ah
porque se está
reutilizado
o sea
podríamos reutilizarlo
tendríamos que reutilizarlo
o sea
o sea
tendríamos que poner el page
porque si no el page
no
es lo que os he dicho
que sin un page
no hay ruta
así que
tenemos que tener
el post page
y aquí simplemente
podríamos hacer un return null
entiendo
o sea
porque no queremos que
que devuelva nada
entonces
tendríamos los posts
la lista de posts
entramos a un post
le doy a ver comentarios
y fíjate que
esto se mantiene
y el ver comentarios
ha cambiado la ruta
y solo ha cargado
los comentarios
que teníamos debajo
o sea
ya tenemos post
este layout
este es el layout principal
este es el layout
que tendríamos del breakground
luego aquí tendríamos
el children de esta ruta
entramos
esto sería el contenido
del single post
y cuando le das a ver comentarios
está entrando en otra ruta
anidada
pero fíjate que
tanto el del root
el del nivel de post
el de todos los posts
el del single post
y aquí tendríamos
el de ver comentarios
y solo está cargando
los comentarios
y eso que está cargando
la ruta
y lo más interesante
es que cuando entres
directamente a esta ruta
vas a tener toda la información
directamente
o sea
la idea
la idea básicamente
es que pasemos
de
de
de ir pensando
en
en escalar
nuestra aplicación
como paso por paso
¿sabes?
como que vayamos teniendo
rutas anidadas
en las que vamos como
descubriendo un poquito
más de información
y que además
si por lo que sea
en algún momento
vamos aquí
y vamos directamente
a la ruta
en realidad vamos a tener
toda esta información
toda esta información
ahora
una cosa que
todavía no hemos visto
es el loading
así que vamos a ver el loading
imaginemos
vamos a hacer que
cada ruta
tarde un poco más
¿vale?
bueno yo he puesto
un return null aquí
porque he puesto esto
pero aquí podéis imaginar
que podéis poner
esto es un post
¿no?
y esto aparecería
por ahí en medio
y tal
pero bueno
lo que veáis
entonces
vamos a quitar
voy a poner return null
porque total
no creo que devuelva nada
lo que podemos hacer
es mirar
por ejemplo
en el
en el comments
vamos a poner que esto
este
lo quitamos
vamos a poner aquí
que este
font size
sea más pequeño
¿vale?
porque tiene sentido
hostia
¿por qué este font size
no funciona?
no sé si es porque
vale
voy a ponerle 10
y se lo voy a poner a todo
directamente
bueno le podría poner
h4 aquí
small
para que se note más
que es un
h4
h4
y le vamos a poner
un fondo
un poquito
ccc
esta sí
vale
common body
small
vale
joder
yo también
4-4
algo así
vale
más que nada
para que se nota
lo que es la parte
de los comentarios
porque si no
no se ve muy bien
y ahora
ahora sí
vale
ahora sí
mejor el tema
de los comentarios
vale
entonces
lo que
imaginad
que este
este fetching
tarda bastante
para hacer eso
una cosa que podríamos hacer
sería por ejemplo
una sync
esto no va aquí
aquí vale
vamos a hacer así
y vamos a hacer aquí
una wait
de
esto
vale
vamos a esperar
que esto
tarde 5 segundos
o 3 segundos
si guardamos los cambios
y refrescamos
vale
ves que está tardando 5 segundos
en esperar
no me ha devuelto nada
si yo
mira
voy a about
blank
y yo intento entrar directamente a esta ruta
tarda 5 segundos
en devolverme algo
lo cual
tiene sentido
porque los comentarios
están tardando 5 segundos
lo que podemos hacer
es
cargar
creo que
a nivel de aquí
creo que se puede poner un loading.jsx
y aquí poner
export default function
loading
return
y vamos a poner aquí
cargando comentarios
vale
y con esto
lo que acabamos de conseguir
es la granularidad
del streaming
del html
¿por qué?
porque
solo con este fichero
loading
lo que hemos dicho es
oye
esta parte de nuestra ruta
quiero
que
si tarda demasiado
hagas un fallback
y al menos
tú me devuelvas
todo el resto
me devuelvas todo el resto
y esta parte
esperes
y la suspendas
y
mientras
yo lo estoy cargando
me has devuelto
toda la información
todo el html
pero los comentarios
como están tardando demasiado
quiero que me muestres
esta información
yo he puesto aquí
cargando comentarios
pero aquí podríais haber puesto
unos playholders
donde se note
pues
se vea alguna cosita
y esto ha sido tan fácil
como obtener
un nuevo archivo
loading.jsx
el loading.jsx
es exactamente
lo mismo
que tendríamos
con el page
con el layout
y con el error
que veremos ahora
y es que
tenemos la posibilidad
de tener el page
para la ruta
el layout
para lo que va a envolver
a esa ruta
y las que
las que están idando
y luego tenemos
el loading.jsx
que va a ser un componente
que lo que nos va a permitir
es decir
bueno
si hacemos un fetching
de datos
y estos datos
están tardando demasiado
lo que vamos a hacer
es simplemente
streamear el html
que ya tenemos
y cuando tengamos
los datos
de los comentarios
los vamos a mostrar
y fíjate que esto
lo hemos hecho
sin ningún tipo de estado
y de una forma
totalmente declarativa
solo creando
un nuevo archivo
loading.jsx
y hemos tenido
un control granular
a nivel
de cada una
de las rutas
que estamos anidando
para que espere
estos datos
no me digáis
que esto no es espectacular
porque la verdad
que está bastante chulo
entonces
habría que tener
un loading
para cada componente
a ver
no hace falta
tener un loading
para cada componente
depende
por ejemplo
podríamos
si nosotros
lo ponemos
en el
list of posts
o sea
si lo ponemos aquí
loading.jsx
seguramente
no lo vamos a ver
porque es
lo suficientemente
rápido
cargando
lista
de posts
vale
y si nos vamos
a la lista de posts
cargando la lista de posts
bueno la verdad
es que me parece
que por muy rápido
que sea
lo muestra siempre
también hay que tener
en cuenta
que si hacemos
que sea
incremental static
regeneration
como es el caso
que hemos hecho aquí
esto
en producción
seguramente
no se verá
porque nunca
nunca lo hará
nunca lo va a suspender
porque siempre
lo va a tener
esto
lo vamos a ver
en modo desarrollo
ese cargando
rápidamente
lo vamos a ver
por eso
si no
la otra forma
de hacer esto
porque también
se puede hacer
de otra forma
es tener
utilizar el componente
suspense
para
a ver
a ver si
tengo aquí
la documentación
suspense
porque
que es lo que
se podía hacer
con suspense
se puede poner
el tiempo
me parece
a ver
si no queréis
utilizar el loading
por lo que sea
veis este loading
que yo he puesto
por aquí
lo voy a eliminar
y lo que podéis hacer
es
envolver
lo que carga
o sea
este list of post
que lo tenemos
aquí dentro de page
no en page
no
en este page
podríamos poner aquí
el suspense
vale
y aquí tenemos
fallback
ah no se le puede
poner el tiempo
pensaba que se le podía
poner el tiempo
cargando
post
podéis hacerlo así
creo que no hace
falta
o que no es
obligatorio
ah pues
ah si si
ves que pone ahí
cargando
cargando
ves
lo voy a poner
mayúscula
para que lo veáis
pero
es que casi no se ve
ahora
pero
se ve muy poquito
se ve muy poquito
pero
podéis utilizar este
suspense
si no queréis
utilizar el componente
al final podéis
suspender
todo lo que queráis
a nivel granular
o sea ya no solo
a nivel de rutas
sino también
a nivel de componente
como hemos visto
y lo podéis suspender
haciéndolo así
así que cualquier cosa
que podáis hacer
lo podéis hacer así
o lo podéis hacer
con el fichero
si queréis suspender
a nivel granular
de componente
lo hacéis así
envolviéndolo
vale
esto es una cosa
de React
lo que pasa es que
de alguna forma
Next y React
pues han sabido
como compenetrarse
muy bien
para llevar esto
pero también
lo podéis hacer
a nivel
como lo hemos visto
y lo mejor de todo
es que fijaos
que esto está súper chulo
que vas aquí
poder ver los
ves
le das a ver comentarios
y ya te pone
cargando comentarios
porque de forma automática
ya está cargando
el loading este
ya no te tienes
que preocupar
de tener un estado
de cuando termina
de cargar
entonces guardarlo
o sea
fijaos que no hemos
utilizado
ningún use effect
para toda la página
que hemos hecho
estamos haciendo
un montón de fetching
de datos
un montón
o sea
estamos utilizando
fetching de datos
para cada ruta
ni siquiera
ni siquiera hemos utilizado
no hemos utilizado
ningún use effect
y no hemos utilizado
tampoco ningún estado
para guardar
todos estos estados
de fetching de datos
o sea que
luego otra cosa
que podemos ver
es que
imaginad
que aquí
nos peta
los componentes
o sea
los comentarios
podemos tener aquí
el error
punto jsx
vamos a poner
export default
function
error
y vamos a poner
en return
vamos a poner
vale
a ver que me dice esto
vale
x error
al cargar
los comentarios
vale
ponemos aquí
una p
y aquí
creo
si no me equivoco
que podríamos hacer
un
throw
new error
error
al cargar
los comentarios
vale
vamos a
obviamente
esto soy yo
que lo estoy forzando
y vamos a ver aquí
no sé si es por el throw
o alguna otra cosa
que he hecho
no sé si he sido yo
o por el throw
no creo que sea
o sea
bueno
por el throw puede ser
porque si no
no
no petaría
function
que me pasa
hostia
o es por el return
que no le ha gustado
bueno
no sé
ahora que le ha
no sé
ah
error function
function
o sea
es que
como que no le gusta
mucho este error
function
bueno
pues vamos a ver
el tema de los errores
errors
error handling
vale
error.js
ah
fíjate
es que
como que tiene que ser
solo en
it can be used
to show
the error information
es que parece
como pone aquí
el use client
es como que parece
que tiene que ser
client components
tienen que ser
client components
así que ya sabemos
la razón
pero bueno
es raro
el error
en lugar de haber sido
me gustaba más
el error de antes
de que me decía
claramente
que tenía que ser un
claro
ahí estaba siendo
un poco raro
el error
pero me hubiera gustado más
vale
está esperando
ahora me hará el throw
vale
vale
sale esto porque está en modo
de desarrollo
vale
pero fíjate que me ha salido
bien aquí
ese pantallazo
ha sido porque está en modo
de desarrollo
pero como me debería haber salido
que es como ha salido
en realidad
vamos a poner aquí
como un background
red
color
color
white
vale
vamos a quitarle aquí
un poquito de
tiempo
vale
pero veis
error al cargar los comentarios
o sea
el tema
que no lo sabía
es que
los errores
el componente de error
tiene que ser un use client
vale
así que
pero ya lo tenemos
de esta forma
solo teniendo también un error
ya lo que hacemos
es
de
y si quisiera que el comentario
sea una ruta aparte
sin la info del post
pues lo quitamos del layout
no pasa nada
o sea al final es que depende
de lo que queráis hacer
se puede hacer
lo que pasa es que
yo lo he puesto en el layout
si no lo quieres
lo podrías quitar
yo lo he puesto
dentro del layout
ves
yo he puesto aquí en el layout
la información del post
que no quieras que sea parte
del layout
pues la quitas
que quieres que además
de alguna forma
puedes tener
la ruta fuera
que no esté anidada tampoco
puedes incluso
hay otra pregunta
que es bastante
esto es bastante interesante
por ejemplo
imaginemos
que quiero
un layout
quiero compartir
un layout
de dos rutas
que no están
que no están anidadas
por ejemplo
el post
y el about
quiero que tengan
el mismo layout
pero aquí veis
que el del post
lo tengo aquí
aquí tengo home
post
o yo que sé
esto porque he puesto
aquí como un
break ground
pero
este
esta
voy a poner
como un banner
el mejor canal
de twitch
de programación
vamos a poner esto
con mi cariño
a Gonzi
que Gonzi
también es un canal
buenísimo
pero vamos a poner esto
vale
imaginad
que este layout
este layout
que tengo por aquí
vale
lo tengo por aquí
ves
ese
el mejor canal
ese
esto
veis este
como este
este banner
que tenemos por aquí
imagina que ese banner
por beta saber qué motivo
queremos que
se
vamos a poner aquí
white
para que
hostia
no aquí no va
aquí no va
perdón
perdón
este
este background
lo quitamos aquí
lo ponemos aquí
vale
vale
imagina que este
este layout
queremos
compartirlo
no solo en post
sino también en about
pero el problema
es que estos dos layouts
no están anidados
no están
no comparten
lo que podemos hacer
es crear como lo que se le llama
un grupo
o grouping
o como le quieras llamar
vamos a llamarle
yo que sé
como le llamos
with banner
lo voy a llamar
por poner un nombre
no sé si se puede poner guión
y fijaos que lo he puesto como
entre paréntesis
entonces aquí movemos
el about
y movemos también
el post
y lo que va a pasar
con esta ruta
es que
o sea
estos paréntesis
como que los va a ignorar
de alguna forma
vale
o sea
no va
no los va a tener
como en cuenta
a ver si volvemos aquí
bueno ahora no sé
por qué se ha vuelto aquí
no puede resolver
no sé qué
comenzó error
se ha vuelto como tonto
porque lo he movido todo
vale
vale
pero esta es nuestra app
el about
el post
ahora lo que puedo hacer es
dentro de este with banner
midu ponlo con un marquee
con un marquee
con un marquee
a ver si
no sé si funcionará
imagino que sí
¿no?
ahí lo tienes
vale
pues
este layout
que teníamos a nivel de post
ves que es este
es nuestro banner
ahora lo podemos mover
aquí
y con esto
lo que hemos creado
es que
tanto el about
como el post
siguen siendo rutas
separadas
que no están dentro
de esta ruta
with banner
pero hemos creado
como un grupo
que se ignora
entonces
en post
tenemos aquí
el layout
y vamos al about
y ves
sigue teniendo el about
esto puede estar bien
porque hay
normalmente hay veces
que quieres agrupar
ciertas rutas
que aunque no quieres
que estén anidadas
sí que quieres que tengan
el mismo layout
por ejemplo
pues se me ocurre
cuando inicia sesión
¿no?
y quieres que la sesión
con el usuario arriba
pues esté siempre
pero a lo mejor
no quieres que ocurra
en todas las páginas
por ejemplo
Twitter ¿no?
que alguien decía
lo del root layout
aquí tenemos Twitter ¿no?
y en casi todas las páginas
las que vamos a poner aquí
por ejemplo
yo que sé
pues perfil
vale pues en perfil
sí que sigues teniendo
el layout
que tienes
el menú a la izquierda
pero a lo mejor
cuando te vas
a configuración
que es otra ruta
no quieres
que tengas ese mismo layout
entonces lo puedes hacer
de esta forma
¿vale?
entonces vamos a darle
vamos a mirar
más cositas
por ejemplo
vamos a utilizar
Turbo Pack
a ver qué tal
¿por qué?
se supone
que está en alfa
pero debería funcionar
así que vamos a probarlo
se supone
que en package.json
si le ponemos aquí
guión guión turbo
y hacemos
npm run dev
¿vale?
fijaos
que ha cambiado
un poco el output
dice Turbo Pack
en alfa
gracias por probar
NextGS 13
con Turbo Pack
como recordatorio
Turbo Pack
todavía está en alfa
y todavía no está preparado
para producción
apreciamos cualquier cosa
que tengas
alguna opción
no sé qué no sé cuánto
bueno vamos a ver
ya nos ha puesto
que la compilación
la verdad es que
se ha notado la diferencia
5 milisegundos
y si vamos a la home
bueno pues parece
que la home funciona
bueno los estilos
ahí se ha quedado
ahí se ha quedado
parecía que había funcionado
pero entonces
de repente
algo no le ha gustado
Fly Router State
is not iterable
bueno creo que ahí ya
ahí se ha quedado
ahí se ha quedado
la he intentado
la verdad es que
yo sí que lo he probado antes
y hay cosas que sí que funcionan
otras que no
o sea
me parece que está bastante verde
porque me falla muchísimo
muchísimo
pero bueno ahora podéis ver
que sí que está funcionando
aquí se ven un poco
todas las actualizaciones
podemos intentar
por ejemplo
no sé por qué los estilos
esto no nos ha pillado
por ejemplo
pero por ejemplo
podríamos ir aquí al post
el page
en el id
pay layout
por ejemplo
y vamos a tener aquí
vamos a poner cambiar
sobre el h3
guardamos
¿ves?
y bueno
ha tardado poco
pero tampoco
sinceramente
¿ves?
ahora lo he vuelto
al estado anterior
y no lo ha
no lo he vuelto
he tenido que refrescar
yo manualmente
está muy verde
o sea
si alguien quiere mi opinión
de
de como
ah está petando el audio
pues encima
es que estará petando
por el turbo pack este
que me está petando
el pc
el turbo pack
entonces
mi opinión
del turbo pack
sinceramente
es que
ahora mismo
está muy verde
muy verde
yo
todas las comparaciones
que ha hecho
a día de hoy
me parece un poco
demasiado
ojalá fuera tan crack
como va a estar haciendo
el turbo pack
no si
la verdad es que
turbo pack
tiene súper buena pinta
las cosas como son
creo que
el día de mañana
va a ser espectacular
pero a día de hoy
a día de hoy
creo que
todavía está demasiado verde
como para
hacer benchmarks
yo lo he intentado
en dos proyectos diferentes
y son proyectos
muy sencillos
y no me funcionan
o sea
bueno aquí lo habéis visto
me da algunos errores
quiero decir
está muy verde
está en alfa
yo ahora mismo
no creo que
que se puedan sacar
conclusiones
de si va rápido
si va lento
por ejemplo
hay cosas
aquí lo veis
algunas actualizaciones
6 segundos
no sé
está muy verde
vale
así que más allá de eso
yo creo que
está por
que lo probéis
que bueno
que gracia
pero que no
no esperéis
ahora mismo
ni que
dé un rendimiento
real
ni que
ni que realmente
lo podáis usar
la producción
ni que va a ir más rápido
porque es que
a mí personalmente
me crashea un montón
entonces
dentro de
no sé
que hay que esperar
a esperar
y ya veremos
el día de mañana
ahora
otra cosa
voy a probar
voy a usar
el modo normal
que al menos
no me crashea
y que espero
que me funcione
bien
tiene buena pinta
pero bueno
ya veremos
todavía
todavía
vale
puede convivir
page y siap
page y siap
sí que puede convivir
o sea
podríamos tener aquí
para la gente
que ya sabía
next12
teníamos la carpeta
pages
de hecho
la carpeta pages
a día de hoy
es necesaria
para tener
las apis
vale
si queréis
tener una api aquí
y queréis
escribir lo que sea
tener endpoints
necesitáis todavía
la carpeta pages
porque esto
que yo sepa
no lo han
no lo han puesto
ahora
también a nivel
de si nos olvidamos
de pages
o sea
de api
si aquí ponéis
lo que sea
punto jsx
export default function
page
vale
y aquí le ponéis
lo que sea
entonces
esto debería funcionar
a no ser que yo
he hecho algo
que no debería
pero lo que sea
vale
no sé por qué
no sé si por qué
me he quitado esto
vale
veis
funcionar funciona
obviamente
ignora los layouts
vale
tendrías que seguir
utilizando
toda la forma anterior
funcionar funciona
y esto funcionaría
a la vez
que funcionan
las rutas
que tenemos
que hemos hecho
perdón
esta no
esta
las que hemos hecho
vale
funcionan las dos
a la vez
lo que sí que hay que tener
en cuenta
es que si tenéis
una ruta
por ejemplo
si yo aquí pongo
la about
vale
le voy a llamar about
siempre va a tener
te va a indicar
que tienes un conflicto
ves
conflicted up
no sé qué
no sé cuánto
elimina el conflicto
para no sé
no sé cuánto
vale
pero
he visto que sigue funcionando
pero
lo que hace
es que toma relevancia
la de
la que tengas en app
vale
lo digo por si
por lo que sea
tenéis problemas
porque no veis alguna ruta
y estáis migrando
que sepáis que
la que está
en la carpeta app
aunque te ponga aquí un error
a mí
mi sensación es que todo
sigue funcionando
solo que
tienes que tener en cuenta
que va a aparecerte
la ruta que tengas
dentro de la carpeta app
ok
vale
ahora que ya tenemos esto
y ya os he contado
esto de pages
vamos a ver dos componentes
nuevos que tienen
que están bastante interesantes
que pasa con app.js
y document.js
que ya no tienen sentido
vale
ya no tienen sentido
no tienen sentido
ya el get static props
ya os lo he explicado antes
Santias
o sea que le puedes echar
un vistazo para atrás
lo de
que pasa con app.js
y document.js
ya no tienen sentido
porque
ahora lo que utilizarías
serías el layout
o sea aquí ya tienes
tanto el document
como el app
que sinceramente
me parece como mejor opción
incluso que lo que tenía antes
el get
ya aquí
claro no tiene sentido
porque podéis utilizar
directamente el get
aquí lo tenéis
por ejemplo
este title
my first app
bueno voy a poner un gato
para que lo veáis
pero vamos
que esto funciona
o sea lo veis
lo tenemos aquí
con el title directamente
ya no tiene sentido
utilizar el get
y
ni document
ni app
ni
o sea ahora
layout
directamente
ok
recomiendas actualizar
mi versión de next 13
o me mantengo la 12
a ver
lo que yo os diría
es que
es que
podéis actualizar
pero que no utilicéis
nada de esto
no utilicéis nada de esto
porque
está en beta
todo esto todavía está muy verde
lo podéis utilizar
para practicar
para probar
para reíros
pero no para
para producción
mis sensaciones
que hay cosas
que todavía
sí que lo que es renderizar
los react server components
creo que funciona
bastante bien
pero
mis sensaciones
que
todavía hay ciertas cosas
que no están del todo
bien
así que
luego
qué más
qué más
ah sí
los dos componentes
hay dos componentes
que
que creo que
veamos
uno
imaginad
que queremos cargar
una fuente
pues
ahora hay un nuevo componente
lo tenemos por aquí
que es next font
y next image
vale
pues vamos a ver el de las fuentes
por ejemplo
primero
este nuevo componente
es el que vamos a utilizar
para cargar las fuentes
y vais a ver que se cargan
súper fácil
pero también
mi sensación
es que también está en beta
no sé si está en beta
o sea que realmente
lo pone en algún sitio
pero
yo al menos
he tenido algunos problemillas
con ella
con la
con esta utilidad
en otro
en otro proyecto
y no me ha funcionado
del todo bien
ay mierda
que es que
tengo que utilizar
pnpm
que es el que he utilizado antes
vale
vale
entonces
vamos a
utilizarlo
está muy bien
cómo funciona
por ejemplo
voy a utilizar aquí
y vamos a traernos
no interno
space
bueno voy a intentar
importar primero
el next
font
barra
google
no lo he encontrado
next font
barra google
vale
se supone que aquí
lo que haces es importar
next
barra font
barra google
porque se supone
que vas a poder tener
el día de mañana
como otros
ves
tengo google y local
y el local
pues no sé
no sé qué hay
no hay mucha cosa
no sé si es que el día de mañana
van a añadir otros vendors
diferentes a los de google
pero lo que es interesante
es que aquí
ya tienes
todas las fuentes de google
todas las fuentes de google fonts
las tienes aquí
ya no te tienes que preocupar
de ir a la página
pegarlas
sino que realmente las tienes aquí
las buscas ya directamente
por ejemplo
vamos a poner la de space grotesque
que es bastante grotesca
bastante chula
y ahora para cargarla
tienes
y esto sí que puede crear
un poco de chirriar
pero haces aquí
voy a poner font
porque ya sabemos a cuál me refiero
y aquí creo que
no sé si es new
no
es directamente space grotesque
y aquí lo ejecutaríamos
¿qué le diríamos?
le diríamos
cuáles son los tamaños
que queremos
lo que es un poco raro aquí
es que
al menos
a ver si lo he visto yo mal antes
pero mi sensación
es que
en las fuentes
o sea
tienes que cargar
cada tamaño
de forma separada
o sea
no puedes decirle aquí
en las fuentes
de hecho
a ver si lo dice el tipo
ves
ah va
ahí sí que pone
que puede ser un array
vale pues
ya está
porque yo antes
he intentado utilizar un array
y no me estaba dejando
me decía como
no entiendo esto
y yo vale
ok
bueno
y luego lo que sí que te dicen
es que tienes que añadir
el subset
vale
porque si no
se trae todas las cargas
bueno lo puedo dejar
igualmente así
lo puedo dejar así
y ahora lo vemos
ahora el font este
lo que haríamos aquí
en el class name
tendríamos el font
punto
style
o no
el punto class name
perdón
y con esto
tendríamos ya nuestras fuentes
tanto la de 400
como la de 700
y ya la podríamos utilizar
donde queramos
ahora
de primeras
no la vamos a ver
no la vais a ver
en ningún sitio
ah mira
no está
no está cargado
vale
me dice que
que tengo que reiniciar esto
ok
vale veis
ah
pero veis
es que dice
no entiendo la de 400
esto es lo que me ha pasado
lo mismo
aunque he puesto un array
que he puesto
como dos opciones
400
ah no
creo que es porque
tienen que ser strings
me parece que es por eso
entonces entendería
ahora lo entiendo
vale
pues ya la tenemos
ves
ya tenemos ahí la fuente
ya la he puesto
por todos los sitios
obviamente una cosa
que podéis hacer esto
en lugar de ponerla
en todas las
en toda la página
como he hecho yo
directamente
para que me salga
directamente
lo podéis hacer a nivel
de cada una de ellas
o sea
esto lo podéis separar
por ejemplo
podemos poner aquí
font
punto
js
esto lo separáis
lo separáis
aquí
este layout
vamos a poner esto
por aquí
esto lo separáis
lo exportáis
vale
bueno
es que si no
se queja
vamos a poner esto así
vale
y esto
pues lo importáis
importar
font
from
esto si que está aquí
font punto js
y ya
ya está
entonces esto
lo podrías importar
allá donde queráis
solo en un título
en concreto
o en títulos en concretos
en h1
h2
o lo que sea
pero aquí podéis ver
que ahora si que lo está cargando
todo automáticamente
lo bueno de esto
pues que se descarga
esta fuente
que la deja en local
que en temas de rendimiento
va
funciona muchísimo mejor
y que no te tienes que preocupar
ya de cómo
dónde cargar el link
en el head
en el no sé qué
sino que simplemente
lo haces en un sitio
aquí tienes el font
tendrías todas las fuentes
cuanto menos mejor
que temas de rendimiento
aunque esto sea mejor
en temas de cómo lo optimiza
también es verdad
que tienes que tener cuidado
de no cargar todas las fuentes
que hagan falta
de hecho
es raro
ah veis
aquí está el warning
que os comentaba
veis
dice
la fuente grotesque
no tiene subsets
especifica un subset
vale
pues aquí le puedes poner
en el subset
y que le podemos poner
que es solo latín
tiene sentido
porque si no se va a traer
toda la parte de la fuente
también de Rusia
bueno
con Rusia
para el ruso
el ucraniano
y todas estas cosas
no sé si debería haber dicho eso
ahora me arrepiento
la gente
lo que sea
el tema es
cualquier
o japanés
o chino
es que son las cosas
que se me han ocurrido
mi duda
está claro
si se sube a youtube
¿por qué me preguntáis esto?
sí
cirílico
es que no me salía el nombre
gracias
artífice
eso cirílico
ya me habéis entendido
me habéis entendido
los símbolos estos
de cirílico
a la fuente le puedes poner
una variable
insertar esa variable
en html
y usar esa variable
en archivo css
le puedes
ah también
cierto
es verdad
que no os lo he comentado
pero en el tema
de las fuentes
aquí le podéis indicar
hay un montón de opciones
y una de las opciones
es que además
de cómo lo cargáis
le podéis decir
el nombre de la variable
y aquí podéis ponerle
por ejemplo
guión guión
font grotesque
y esta variable
ahora
ya la podéis utilizar
por ejemplo
en vuestro css
imaginad que no lo queréis utilizar
como lo hemos utilizado nosotros
de exportar
y meter manualmente
los class names
lo que podéis hacer
es utilizar ahora
esta variable
podríais ahí
mira lo voy a quitar
para que lo veáis
por ejemplo
voy a poner que el h1
el font family
sea el var grotesque
grotesque
y sans serif
vale
por decir algo
pues si quitamos
esto de aquí
imaginad que decir
no
solo creo que los h1
no sé si he puesto
algún h1
pero con esto
lo que tendríamos
vale
ya lo tenéis
veis que esta
es diferente a esta
pues
no es diferente
es que esto no es un h1
me he engañado a mi mismo
ah si
si que es un h1
pues igual
es que no lo he puesto bien
a ver
un grotesque
he puesto bien
el grotesque
grotesque
si que lo he puesto bien
pero no la está cargando
o sea
si que está utilizando
bueno esto
claro que lo está utilizando bien
pero no me está poniendo
ah
es que
no le tenía que haber quitado esto
me parece
porque
ves
hay que poner esto
de punto variable
se me había olvidado
en lugar de poner aquí
el punto class name
hay que poner el punto variable
porque así es que
inyecta la variable
a nivel del body
esto lo podéis inyectar
al nivel que queráis
pero bueno
en este caso tiene sentido
o en el html
o lo que sea
y claro es que ya decía yo
porque no la variable está
ahora si que podéis ver
que el h1
pues está con la fuente
y lo demás
no está con la fuente
hay diferentes formas de hacerlo
la verdad es que está bastante
bien pensado
me gusta bastante
este nuevo componente
creo que también está en beta
porque yo he tenido
algunos errores
al menos en el otro proyecto
un poco raros
como por ejemplo
que la fuente a veces
no me cargaba
aunque aquí por ejemplo
ahora me está cargando bien
no sé si es un tema
de mi otro proyecto
pero bueno
bastante bien
así que ese es
uno de los componentes
y faltaría
el otro componente
que el otro componente
es el nuevo componente image
que tengo que decir
tiene muchísima
mejor pinta
que la anterior
no sé si es este
creo que sí
ves porque
no sé si es este
yo creo
es que porque han puesto
ves este next image
porque han puesto
que un componente
sea con next image
pero el de las fuentes
es con arroba
un poco polémico
polémico
pero bueno
creo
vamos a fiarnos
de que sí que es este
apnpm install
next image
a ver
yo quiero ver esto
no me puedo creer
que no sea así
pues no
que es raro
la verdad
es raro
me imagino que es por un tema
de retrocompatibilidad
pero es verdad que
es un poco extraño
que unos tengan arroba
otros no
y encima son componentes
que vienen a ser
un poco lo mismo
ajá
¿qué ha pasado aquí?
ay
es que
es que no hace falta
instalarlo
porque ya viene
es que por eso
no se puede hacer así
es que ya viene
por defecto
por eso
por eso no es raro
es que ya viene
es que
es que yo también
es que yo también
vale
ahora ya sé por qué viene
porque está dentro
del paquete de next
ya decía yo
digo que raro
porque no viene
y porque no vendrá
el de fuente
porque estará en beta
y por eso
cuando esté
claro
cuando saquen de beta
ya lo tendrán dentro de next
bueno al menos ahora
hemos entendido
toda la explicación
de por qué lo tienen así
vale
vamos por ejemplo
a los comentarios
y si no me equivoco
un avatar
por ejemplo
no sé si un avatar
image
a ver si esto funciona
un avatar
image
email
vamos a
vamos a probar
a ver si podemos sacar
estos
estos random avatares
a ver si funciona
si no funciona
pues nada
lo habremos intentado
vale
y aquí vamos a poner
comment.email
creo que
creo que es
vale
una de las cosas
vale
alt
vamos a poner aquí
comment.em
primero vamos a ver
que esto realmente
ves
ya me está diciendo
ya me está diciendo
utiliza el next image
hombre
deja de utilizar esto
vale vale
voy voy
ya está
déjame
déjame un momento
déjame un momento
quiero ver si funciona
vale
creo que hemos dejado
el throw
vamos a arreglar esto
del throw
que hemos puesto antes
aquí
quitamos esto
pero bueno
con eso hemos visto
lo de los errores
vamos a poner esto
para acá
cargando comentarios
vamos a quitarle también esto
para que sea más rápido
vale
vale
veo que me pone
las mismas
random
avatar
service
a ver
para avatar
dice beer
ostras
dice beer
esto que es
ojo
me gusta este proyecto
ojo
esto está chulísimo
esto está chulísimo
o sea que aquí
tú puedes poner
lo que sea
uy uy uy
me ha gustado este proyecto
nunca te ha gustado
o sea
haces una búsqueda
y en un momento
encuentras algo ahí
súper chulo
me gusta
vale
pues vamos a poner
este
aquí
esto para acá
esto para acá
y esto
no sé si hace falta
hacerlo así
vale
pues vamos a ver
si esto ha cargado
vale
ya tenemos ahí nuestros
pedazos de avatares
enormes pixelados
pero me encanta
me encanta
vale
ya nos dice que utilicemos
el image
utiliza el image
no sé qué
bueno yo utilizo el image
así que importamos
el image
de
next image
.js
bueno
que no es necesario
este
y este image
lo cambiamos
por el que había antes
guardamos los cambios
vale
ahora aquí
viene mi duda
¿por qué?
aunque quiero utilizar
el nuevo
veo que sigo utilizando
el viejo
porque el nuevo
si no me equivoco
el nuevo
si no le puedo preguntar
a
Gonzi
¿cómo se utiliza el nuevo?
new image component
¿cómo se utiliza el nuevo?
ah
new future
la mi duda
igual que el viejo
no
igual que el viejo
no puede ser
porque
el nuevo
el nuevo
no te pide
no te pide esto
image
creo que no te pide
el width
creo
creo
puede ser
ay mira
increíble
que funciona
lo de los errores
aquí
para
a nivel de esto
si te lo pide
ah
vale
vale
pues nada
pensaba que
que lo habían
que eso lo habían
solucionado
pues nada
vale
pues
invalid source
vale
hostname
nextconfig
esto es un tema
de seguridad
básicamente
images
le tenemos que decir
que
el
underimages
hostname
como ha puesto aquí
domains
a ver
vamos a poner una coma
hostname
domains
nos ha engañado
este
vale
ahora
vamos a ver
otra vez
nextimages
hostname
hostname
pues lo he puesto
¿no?
no
si
sin gustarle
no está
en images
vale
vamos a ver
un momento
la documentación
defining
tu
protección
application
optimization
with the
remote patterns
remote patterns
vale
se llama
el remote patterns
ah
joder
no veas
pero esto es nuevo
¿no?
esto es nuevo
este remote patterns
a ver
se supone
que el de domains
yo entiendo
que debería
funcionar
también
y está
sudando
totalmente
de mí
hostname
is not
confirmed
underimages
a ver
bueno
no sé
si
a ver
entiendo
que
ah
espérate
que igual
reiniciando
ya está
¿puede ser?
sí
vale
solo tenía que
reiniciar
es que pensaba
que esto
de reiniciar
lo habían hecho
automáticamente
pero bueno
como podéis ver
también han añadido
ahora que
no
sí que funciona
domains
funciona
lo que pasa
es que no
reiniciaba
automáticamente
pero
entiendo que
lo han deprecado
que ahora la idea
no es utilizar
domains
que es utilizar
el otro
bueno
pues ahora
tenemos esto
que es lo más
interesante
porque así
a simple vista
no parece
que tenga
mucho cambio
pero
ojo
ojo
lo que ha
mejorado
lo que ha
mejorado
el html
que
está creando
ahora
nuestro
nuestro
componente
image
sin
no sé
si lo sabéis
si os acordáis
de cómo era
antes
pero antes
teníamos aquí
un span
composition
absolute
que se ponía
encima
del otro
de hacía unas cosas
muy raras
el otro componente
y este nuevo
componente
por suerte
ahora es un simple
image
que tienes un
source set
con diferentes
medidas
para que lo tengas
bien optimizado
en este caso
es un svg
que tampoco
entiendo
por qué lo hace
pero bueno
porque al final
es todo igual
me imagino
que es por una cosa
pero le pone
lazy load
le pone
decoding
async
pues nada
eso va a que
tomas en cuenta
que solo es utilizarlo
funciona exactamente igual
yo pensaba que el width
no sé por qué
pensaba que ahora
no hacía falta
que eso lo habían
lo habían arreglado
como para que fuese automático
ya veo que no
pero bueno
tiene sentido
tampoco pasa nada
pero al menos
el html resultante
si tienes un proyecto
con next 12
le puedes echar un vistazo
y vas a ver
la pedazo de diferencia
del html
que tiene antes
cuál es el proyecto
que tenemos con next
adbngs
puede ser
yo creo que tenemos
el adbngs
el adbngs
y puede ser
que esto sea una imagen
no
es que tenemos
todo es svgs
todo es svgs
soy lo que no hay
todo es svgs
puede ser que en sponsors
tenga alguna imagen
puede ser que esto sea una imagen
sí
pero son imágenes
en las que no utilizo
no utilizo
el componente de image
no utilizo el componente de image
porque
te rompían layout
cada 2x3
era una cosa loca
pero por suerte este
como podéis ver
tiene bastante mejor pinta
se puede estilar fácilmente
lo cual antes no era tan fácil
y ya está
así que
buenísimo
pues eso
yo creo que son todas las cosas
lo hemos visto todo
en next 13
hemos visto
los routing
el layout
los server components
el server first
hemos visto el streaming
también
hemos visto
lo de las fuentes
las imágenes
y con esto
sinceramente
se puede crear ya una aplicación
o sea con todo lo que hemos visto
ya podéis crear una aplicación
vale la pena el componente antiguo
no
directamente
miludir las personas que utilicen
el object fit
para evitar el tamaño fijo
de las imágenes
personas que utilicen
el object fit
para evitar el tamaño fijo
de las imágenes
básicamente porque se rompe
se rompen las imágenes
allowed las imágenes
vamos a ver
adelante
vamos a ver
ahí
vamos a ver
let's
vamos a ver
vamos a ver
vamos a ver
vamos a ver
vamos a ver
vamos a ver