Ya hay directo, ojo, ya hay directo.
Vamos a ver dónde está el directo.
Ojo, ya nos está poniendo la hora.
Vamos a poner que esté en calidad mega, ultra buena, ¿vale?
Nex y Sconf.
Vale, vamos a ver lo que van a traer, lo que nos van a anunciar,
que es justamente lo que ya hemos dicho, el Turbo Pack.
Ya están pasando 5 Turbo Pack, para que toda la gente lo sepa,
es la alternativa de Webpack, ¿vale?
Lo que pasa es que está escrito con Rast.
¿Qué es Turbo Pack?
Nex Compiler Turbo Charge, ojo.
Desde Nex y S13 hemos estado trabajando en mejorar el rendimiento
del desarrollo local, tanto en las páginas como en el App Router.
Hemos estado reescribiendo Nex Dev y otras partes de Nex y S,
y ahora estamos utilizando un compilador basado en Rast.
5.000 test de integración ya están pasando con Turbo Pack,
o sea que Vercell ahora funciona un 50% más rápido,
95% más rápido el Far Refresh.
Este benchmark es lo que te desesperaría,
es una aplicación bastante grande.
90% de los test de Nex Dev ya están pasando con Nex Dev Turbo.
Obviamente todavía, todavía no está en beta, o sea, sigue en beta.
Turbo Pack, por lo que veo, sigue en beta.
Turbo Pack fue el lanzamiento del año pasado, fijaos, ¿eh?
O sea, es que este yo creo que fue el problema, tío.
El problema es que el año pasado sacaron cosas muy alfa,
pero muy, muy, muy, muy, muy alfa, muy alfa.
Yo creo que eso fue uno de los problemas, ¿eh?
A ver, ¿qué más?
Vale, mira, han hecho una página web,
Arwit Turbo Jet, y hasta que no pase,
hasta que no estén todas estas cositas en azul,
no lo van a lanzar de forma estable, ¿vale?
Luego tenemos formularios y mutaciones.
En Nex Dev 9 introducimos App Routes, ¿no?
Bueno, las App Routes, ¿vale?
Y ahora te dicen que puedes utilizar en un submit.
Bueno, y esto es lo que lo hacíamos antes.
Y ahora en Next.js 14 quieren simplificar la experiencia de desarrollo
haciendo mutaciones.
Y os digo una cosa, los server actions también se la han copiado de Remix.
¿Sabes? Las cosas como son.
O sea, Remix, sinceramente, ha ayudado un montón a llevar adelante Next.js.
Y en Remix en su día también se copió cosas de, o sea, ¿sabes?
O sea, se han retroalimentado.
No, en Next.js 9 lo que llegaron son las rutas de APIs,
es lo que dice aquí, que podías crear una API, ¿vale?
¿Vale? ¿Qué son los server actions?
Los server actions básicamente es que vosotros tenéis un formulario,
podéis poner action y aquí le pasáis una función.
Y entonces esta función que tenemos aquí,
esta función que tenemos aquí, fíjate,
y a mí es una cosa que no me gusta,
hay que poner use server.
¿Por qué?
Porque esta función en lugar de descargarse al cliente
se va a ejecutar directamente en el servidor.
Entonces, esta función se ejecuta en el servidor
y ya no tienes que hacer ningún tipo de cosa rara,
de hacer un fetch en el cliente y tal,
sino que directamente esto funciona en el servidor.
Lo chulo es que además puedes acceder al form data
con toda la información que tienes en el formulario, ¿no?
Está bastante interesante,
pero a mí, la verdad, este use server,
a mí personalmente no entiendo
por qué no lo pueden hacer automáticamente.
Me extraña, me extraña,
y de hecho lo van a hacer.
Estoy seguro, seguro,
que esto lo van a poder quitar eventualmente.
Porque es que no tiene sentido.
No tiene sentido esto.
Podrían detectar que la función se ejecuta aquí
y detectar que esto lo puedan quitar y ya está.
Bueno, server actions,
si se siente similar, no sé qué,
pues esto va a estar inestable, ¿vale?
Los server actions están integrados
de forma profunda en todo el modelo de app router.
Ahora puedes revalidar el caché,
revalidar tags,
también redireccionar a otra ruta,
a cookies,
actualizar de forma optimista la UI,
utilizar, mostrar errores en el servidor
utilizando el form state
y hacer un loading en el cliente
con el use form status, ¿vale?
A ver, ¿cuánto nos queda en esta?
Pausa, no, vale.
A ver, esto lo tengo al momento, ¿no?
Vale, muy bien.
¿Qué más tenemos por aquí?
Partial pre-rendering.
¡Ojo, ojo, ojo!
Partial pre-rendering.
¿Qué es esto?
Partial pre-rendering,
una optimización de contenido dinámico
para que se sienta como una,
como si fuese totalmente estático
que estamos trabajando en NextGS.
Partial pre-rendering se construye
en una década de investigación y desarrollo
en server-send rendering,
static generation e incremental static revalidation.
Vale, ¿cuál es la idea?
Entiendo que la idea,
vale, suspense,
suspense, no sé qué.
Con partial pre-rendering activado,
las páginas generan una,
como un cuerpo estático
basado en donde tengas el suspense.
O sea, lo que va a hacer
es que este shopping cart
va a generar una página estática.
¿Vale?
Entonces, los fallbacks
entonces son reemplazados
por el contenido dinámico.
¿Vale?
Como leer, no sé qué.
Ah, vale.
Pero entonces esto es un poco rollo.
O sea, vale, está bien,
pero no es lo que esperaba.
No es lo que esperaba.
O sea, lo que va a pasar es que
entiendo que este fallback
se va a pre-renderizar.
¿Vale?
O sea, lo que va a hacer es
pre-renderizar el fallback directamente
y en el cliente automáticamente
cuando pueda va a renderizar esto.
A ver, está interesante
porque vamos a mostrarle algo
al usuario cuanto antes, ¿no?
Porque le vamos a mostrar
el esqueleto de la car,
pero es como un poco raro, ¿no?
O sea, es más,
es como cargar antes el playholder,
digamos, ¿no?
Es como cargar antes el playholder.
Es lo que estamos viendo.
¿Vale?
Cuando tú hagas la petición,
¿ves?
Vamos a cargar ahí el esqueleto,
que es el fallback, ¿vale?
Directamente.
Y como lee las cookies para el usuario,
tal, tal, tal,
el componente se streameará.
¿Por qué es interesante esto?
¿Cómo va a funcionar?
El tema es que esto va a ser con streaming.
Que el tema de streaming
va a ser una de las cosas más importantes
de eso ya había,
no había de esto,
no había de esto.
Sino que esto sería como hacer un suspense,
pero en la parte del servidor.
Lo que va a ocurrir es que
tú inmediatamente vas a ver el fallback
y se va a hacer un streaming
de cada parte
de forma totalmente en paralelo.
O sea,
primero puede ser que veas el shopping cart,
luego las recomendaciones
y va a ser totalmente
en paralelo.
No es que vas a tener que esperar
a que se cargue todo.
A ver,
tiene sentido
porque muchas veces
vas a querer mostrar
cuanto antes la información
y entonces el esqueleto
va a ser estático totalmente.
O sea,
se va a cargar directamente,
súper rápido.
A ese aumento de la complejidad
no lo veo con recompensa.
Bueno,
en este caso,
en este caso no se le va,
no se aumenta la complejidad.
O sea,
esto es exactamente lo mismo,
como puedes ver.
Simplemente lo que pasa
es que esto va a ser
automáticamente activado.
Dice,
bueno,
esto llegará pronto,
o sea,
que ni siquiera lo van a activar.
O sea,
esto es como para que lo veas.
Y bueno,
quedan tres minutos,
quedan tres minutos
para que empiece Gichermo
a hablar y a contarnos su vida.
Vale,
NextGestLearn,
vale,
otros cambios.
Ahora la versión mínima de Note
es la 18.7.
Se ha quitado soporte
a NextFont
en favor a NextFont.
ImageResponse,
vale,
vale.
Bueno,
un montón de gente
ha contribuido en esta.
Una pasada.
Y han sacado una nueva versión
de NextLearn,
¿vale?
El curso para aprender...
Oh,
qué bonita la página,
Dios mío.
Qué bonita,
¿eh?
Qué bonita.
Start building with Next,
go from beginner,
no sé qué.
Hostia,
qué chula,
tío.
Muy chulo el nuevo curso,
¿eh?
Que se han sacado.
Muy chulo.
Mira,
esto es lo que vamos a construir.
¿Queréis que le hagamos...
¿Queréis que hagamos el curso en directo?
Igual podemos hacer el curso en directo,
si queréis.
Podemos hacer el curso en directo.
Y así,
pues,
lo hacemos en español,
porque está todo en inglés.
Y lo hacemos,
lo grabamos,
y ya tenemos curso en Next14.
No hay webs,
claro que hay webs.
TSS styling...
TSS styling...
Vale,
pues lo vamos a hacer,
lo vamos a hacer en directo.
Bueno,
amigos,
dos minutos,
dos minutos,
¿cuándo?
La semana que viene empezamos,
la semana que viene empezamos,
va.
Ahora,
bueno,
la semana que viene...
Bueno,
mira el hueco,
pero si no,
la semana que viene.
Amigos,
arranca la NextGSConf,
vamos a escuchar al bueno de Guillermo,
ya sabemos las novedades,
pero vamos a ver las explicaciones.
La verdad es que las novedades,
veo que,
si os fijáis,
respecto al año pasado,
tiene como un sentido más de estabilidad,
más de intentar ir a por algo más,
no sé,
no abrir más peleas,
más,
yo qué sé,
más temas,
y cerrar los que ya tienen abiertos,
lo cual me gusta bastante,
porque justamente ahora lo que necesitamos,
es que NextGS vuelva a la senda de la estabilidad,
de funcionalidades,
sobre todo de cara a la comunidad,
¿no?
Porque como hemos visto ya,
que tenemos a Kenzie Dodds,
¿no?
Que está enfadado,
pero mucha gente en la comunidad,
y lo puedo entender,
tiene esta sensación de,
ostras,
¿qué está pasando de que esto es tan beta,
esto no está estable,
puedo utilizar,
no lo puedo utilizar el app router,
no sé qué,
pues yo creo que en NextGS 14,
la idea va a ser más bien,
el hecho de,
de hacer que todo se cierre,
¿no?
Cerrar el círculo de muchas cositas,
lo cual me gusta,
¿eh?
Se calentó el midu,
no se vaya a cargar el curso de CSS a cambio,
no,
no,
no,
no,
no,
el curso de CSS lo hacemos seguro,
y continúa,
¿eh?
Continúa sin problemas.
Bueno,
pues queda un minuto,
ya empieza,
pero a mí no me sale,
¿por qué me sale a mí?
¿Por qué me sale a mí?
Pero,
ah,
aún no,
te han baneado,
¿os imagináis que me han baneado?
Hostia,
pues mira,
oye,
reíros,
pero no me carga ahora,
no,
pero todavía no sale,
sí,
ya hasta terminó,
sí,
hombre,
que no sale,
no me engañéis,
velocidad de reproducción 2X,
vamos a pillar a Guillermo,
Guillermo,
no,
hombre,
todavía,
¿a alguien lo ha empezado ya?
Ah,
sí,
qué mentiroso,
qué malos sois,
no,
pero no ha empezado,
empieza con retraso entonces,
¿no?
Keynote,
media hora de Keynote,
bueno,
está a punto de empezar,
no sé si habéis visto el nuevo diseño,
está bastante chulo,
what will you ship?
Bueno,
pues además,
a ver si me acuerdo,
arriba,
arriba,
abajo,
abajo,
izquierda,
izquierda,
izquierda,
ta,
ta,
ta,
esto,
no sé si sabéis que hay unas teclas que podéis tocar para activar una nueva forma de,
por ejemplo,
es arriba,
arriba,
abajo,
abajo,
izquierda,
derecha,
izquierda,
derecha,
B,
A,
es el código Konami,
código Konami,
y entonces os sale estas herramientas aquí y podéis rotar la imagen,
¿veis?
Podéis rotar el gradiente,
ajustar el triángulo para que salga de una forma u otra,
podéis cambiar un poco el shader,
podéis perder ahí los colorcillos o ponerlo en blanco y negro.
Bueno,
es un detallazo,
pero está chulo y eso con el Konami Code,
bastante chulo Konami Code.
Guillermo leyó el artículo anterior y se pasó a remix,
vámonos.
¿Os imagináis que ha sido eso?
¿Os imagináis que ha dicho?
Ostras,
no,
me he dado cuenta que no es lo que quería hacer en mi vida.
Bueno,
vamos a ver el diseño,
ya que estamos.
¿El diseño os gusta o qué?
A mí me encanta,
tío.
Las teclas son arriba,
arriba.
Gille está esperando tu llamada con el permiso.
Venga,
vamos a llamar,
vamos a llamar.
Ey,
Guillermo,
¿cómo estás?
Sí,
oye,
que estamos aquí,
mira,
son las 7 y 8 aquí en el Prat,
estamos,
pues justamente,
1870 personas esperando.
Sí,
sí,
sí,
sí,
sí,
sí,
hemos leído el artículo de remix,
pero nada,
dale,
dale,
que no,
que no gusta a Nex,
joder,
que sí,
sí,
hay un par en el chat,
pero son tontos perdidos,
no,
no,
no,
no,
no,
así lo dicen porque yo qué sé,
a lo mejor no les quería a sus padres cuando eran pequeños,
que sí,
que no te preocupes,
que no os va a gustar cualquier cosa que digas,
sí,
sí,
que en inglés lo vamos a entender,
yo traduzco,
sí,
vale,
o sea que ya sales,
¿sí?
¿Estás preparado entonces?
¿Estás nervioso?
No,
estés nervioso,
hombre,
¿cómo estás nervioso?
Si viniste a la Midu Conf y había más gente,
hombre,
si ahí qué hay en San Francisco,
o sea,
debe haber 100 personas,
200,
joder,
en la Midu Conf había 12.000 personas viéndote,
tío,
bueno,
que sí,
que lo vamos a ver,
que sí,
venga,
dale,
venga,
dale,
Guille,
vamos,
TQM,
pues eso,
que ya está,
no se le oye porque no tengo cerca del micro,
pero nada,
que ya está,
que ya está,
que dice que se está preparando,
que estaba calentando la voz,
y ya está,
que me ha dicho que ya salía,
y aquí está,
así que,
mira,
si se ve el público,
se ve el público,
amigos,
se ve el público,
se ve el público,
venga,
ya sale Guillermo,
ya sale Guillermo,
se escucha en mono,
se escucha en mono,
¡ojo Guillermo!
¡Vamos,
Guille!
Buenos días.
Joder,
qué fuerte está.
¿Qué ha pasado?
¿Qué ha pasado?
¿Qué está pasando?
¡Guille!
¡Vuelve!
¿Solo me ha pasado a mí?
¿Os ha pasado a vosotros a mí?
¡Ojo!
¿Qué está pasando?
Ahora.
Y el canal de Midudev.
Y el canal de Midudev.
Gracias Guillermo por...
Gracias Guillermo.
Hostia,
hace siete años
empezó con NextGS,
¿eh?
Qué chula la camiseta esta,
¿no?
Yo creo esa.
850.000 desarrolladores activos
que están utilizando NextGS.
¡Bravo!
Me encanta la presentación a lo Apple,
¿eh?
Está fuerte,
Guillermo,
tío,
la hostia.
Nada,
un placer Guillermo,
lo hacemos con cariño.
que estamos en ahora mismo.
San Francisco.
O incluso 24 full Miami FC stadiums
para ver a la G.O.A.
Messi,
no Cristiano.
Play.
¡Holó!
Hostia,
muy bien Guillermo ahí
con Messi,
no Cristiano.
Muy bien,
¿eh?
Notion.
¿Qué pasa,
tío?
¿Qué pasa con...?
Yo creo que no soy yo,
¿eh?
Porque,
joder,
no tengo ningún problema
en Internet.
O sea,
me da la sensación.
Pero soy yo
o ha sido...
Que soy yo,
que no me lo creo,
que no me lo creo.
Si es que no está pillando...
No me lo creo,
que soy yo.
Que no,
que no.
Si es que no hay más.
Si no hay más aquí.
No hay más de directo,
tío.
¿Ves?
A mí también me está pasando.
Yo creo que una de dos
o hay algún problema
con el directo en YouTube,
a mí me va más adelantado.
Pero es que no hay más directo.
Yo creo que hay algún problema
con YouTube.
¿Ves?
No hay más directo.
Madre mía.
Se cortó.
A Teo también se le cayó.
O sea,
yo creo...
O que tiene algún problema.
No eres tú,
nos pasó a todos.
O sea,
o son ellos...
Ahora.
A Teo se le cayó también.
Ah.
Ojo.
No se puede...
No se puede...
No se puede votar nada.
No se puede votar nada.
Yo creo,
yo creo,
yo creo que
o es YouTube,
que si es YouTube
no lo haría nunca más.
A mí no me ha pasado.
Debe ser por la región,
entonces.
Debe ser por la región.
Claro.
Si fuese...
Si fuese...
The Live Vlogs.
This is fantastic.
Dice lo que esperaba la gente.
Next year es 14.
Pero a mí no me sale para votar.
¿A vosotros no sale para votar?
It's getting really close.
All right.
I'll do all of them at one.
Yo no puedo votar nada.
Tampoco funciona esto de votar,
¿eh?
Esto de votar tampoco funciona.
Nada.
Está caído.
Mira el responsive.
Ah, claro,
que puede ser
que sea en modo móvil.
A lo mejor.
Me voy Midu.
Vuelvo cuando sea
a la Remix Conf.
Tópica.
All right.
Let's just go with Next.js 14.
Seems like the clear winner so far.
Bueno,
ahora sí que parece
que está votando más gente.
App router.
The foundation of Next.js 14
is of course the app router
and it has three main pillars.
Number one,
we built this app router
on the basis of flexibility
for the developer.
Right.
We want to give you
all these APIs like layout,
and the new metadata API.
Of course,
app router had to be powerful.
The most powerful thing
is the potential
is the data-fetched system
with caching
and invalidation built-in.
And last but not least,
we're all here
and we're fast.
So, of course,
app router is faster.
And the key thing here
is the new foundation
built on streaming,
menos JavaScript
and web fundamentals.
So, most importantly,
one of the key tenets
of the app router
is that you can adopt it
incrementally
alongside the pages router.
A ver,
que dicen que aquí va
y que además
tiene captions.
Y así tenéis subtítulos.
I'm happy to announce
Next.js 14.
¡Ojo!
And guess what?
Next.js 14
comes with
no new APIs.
¡Bravo!
¡Bravo!
¿Veis lo que os decía
que se sabía
que iban a ser
mucho más estables?
No new APIs.
We have a surprise
that will help you
Sabía.
Forget about some APIs
that you didn't ever want to learn.
So, we'll see
towards the end of the presentation.
A ver.
So, over the past year
we've completely
overhauled
documentations.
We've completely
overhauled
all our documentation.
Of course,
a framework wouldn't be great
without
incredible documentation.
So,
we have a new
API reference docs.
We updated the design
of the Next.js documentation.
Shout out to
the design.js 14.js.
Muy bonita
la nueva,
nuevo diseño.
And we improve
the search.
So, of course,
you want to go to
nextjs.org
slash docs
and find things quickly.
But
more feedback
about
education
todo el feedback
que le está cayendo ahí.
It turns out
por favor,
ayuda, Rauch.
Tengo que pagar la renta.
¿Qué es esto?
¿Qué es esto?
¿Qué es eso?
Vale.
El nuevo curso
que hemos visto antes
que vamos a empezar a hacer
la semana que viene
¿vale?
Para aprender
a Router
y Next.js 14.
Ojo,
PostgreSQL y todo.
O sea,
vamos a hacer base de datos.
Qué chulo,
tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Tío.
Millones, joder, millones de developers.
Ojo.
Como que la gente lo que más le gusta es que sea opinionado, que con cero configuración ya
tendrá un montón de cosas.
Tío.
Y una de mis ex
Aquí está hablando de, está haciendo como la historia de Next.js, ¿no?
Como empezaron con los GetServerSideProps, con el BigPageRouter.
Y aquí los React Server Components.
Yo creo que va a hablar del partial pre-rendering, ¿no?
Y, por supuesto, como un framework que construye encima de React,
nuestro deber fue expulsar estas APIs a ti y ayudarte a explorarlas y experimentar con ellas.
Para hacerlo, necesitamos hacer tres cosas.
Número uno, construimos un new router que intenta establecerse encima de estas fundaciones de React.
Número dos, creamos un nuevo sistema de fetching de datos que está integrado en ese router.
Y maneja cosas como, no solo el fetching de datos, sino también el caching y la invalidación.
Y, por último, la arquitectura del streaming.
La arquitectura que está construida en el streaming.
Para que puedas fetchar datos y hacerlo disponible a los usuarios sin bloquear experiencias.
Siempre pone ejemplo este de SQL, que es el que no le gusta a nadie, ¿sabes?
Porque parece que mezcla demasiado ahí.
Que no se puede hacer una inyección de SQL ahí, que sepáis que no.
Estos son los Server Actions.
Que ahora ya van a ser estables en NextGS14, ¿vale?
Estaban en beta.
Server Actions.
Estables.
¡Uh!
¡Bravo!
A mí me encanta que ese estilo de Apple, la gente ahí aplaudiendo, ¿eh?
La verdad es que a mí me gusta, lo que no me gusta es el use server, ese...
Claro, el antes de lo que teníamos a la izquierda, todo lo que teníamos que hacer, y es el ahora.
Esto es lo que a mí me echa un poco para atrás, pero bueno, ya veis, que queda mucho más fácil.
No te hay que hacer el fetch y todo esto.
No me gusta el use server porque hay que poner aquí una cadena de texto arbitraria, es lo que no me gusta.
A mí lo que me gusta, Guillermo, ¡ay, papi!
Es estable en NextGS, ¿no?
En NextGS.
Aquí, una mejora de tiempo.
Cien, cien, cien, cien, todos cien.
Cien, cien, cien, cien, todos cien.
Cien, cien, cien, cien, todos cien.
Es decir que los clientes están más felices, transaccionan más, y, por supuesto, Jennifer Fisher, wherever you are, you're happier.
Jennifer estará ganando más dinero seguro.
¡Bien!
Cien, cien, cien, cien, todos cien.
Entonces, todo esto no hubiera sido posible sin los increíbles individuos en la team React Core,
Mira, Andrew Clarke, está por aquí.
Hostia, pero aquí falta gente, mira.
Dan Abramov, está aquí.
Este equipo de React.
¡Ojo!
Un aplauso al equipo de React, porque dentro de poco van a estar a inverser todos.
Second, the companies that basically worked with us along the way in betting on React components.
So, many of you are here today, I want to give a shout out to Clerk, Superbase, Shopify, Payload, Sanity, Octa, and so many other companies that are collaborating on bringing their data into React Server components.
¡Bravo!
La gente ahí ha dicho, ¿y a mí qué me importa esto?
A mí qué me importan estos.
Ha habido un silencio de a ver si aplaude a la gente y no aplaudió ellos.
Data ecosystem.
Habéis visto que han puesto Shopify, ¿eh?
Shopify es la empresa que tiene Remix.
O sea, curioso, ¿eh?
Third.
El equipo Aurora.
El equipo Aurora, para que no lo sepáis, es el equipo de Chrome que trabaja con los frameworks y bibliotecas para mejorar el rendimiento.
¿Ves? Para hacer toda la web mejor.
Entonces trabaja con Next.js, por ejemplo, para mejorar el rendimiento del framework.
Y, thank you for your contributions, not just to this release, but over the years in the course of Next.js.
Our individuals in our community, I'm incredibly indebted to you all.
So, of course, this slide is not comprehensive.
There's so many folks.
But I really want to give a shout out to all the educators, our community members who answer questions, take time out of their day,
the helpful friends who give us feedback.
It's been, yeah, let's give it up for our community.
It's been, it's been incredible.
Thank you all.
So, last but not least, I want to give a shout out to the visionaries, the risk takers, the ones who dared to go deeper.
You know who I'm talking about.
PHP, they had it right all along.
More server, simpler programming model, the OG serverless.
You deserve your accolades.
Ojo.
Ojo.
Mierda, joder.
Dios.
But jokes aside, folks outside of the JavaScript ecosystem have also been giving us incredible feedback about how to leverage more of the stack.
Maybe go back to some of the fundamentals of the web.
Fíjate, para que la gente pille el chiste, eh.
Mucha gente está comparando NextGS con PHP.
Y entonces, por eso están diciendo eso, eh.
Están diciendo como, gracias a toda la gente.
Let's talk about performance.
Ojo, rendimiento.
Cara, ahora va a hablar de PHP, que es cuatro veces más rápido que ya va a ser.
Mira, es Turbo Pack y SWC.
We always wanted to abstract away all of the complexity to get to a great developer experience.
The core idea of Next is that just run one command, you don't have to worry about assembling and configuring all of the tools.
And since we last spoke, we made incredible strides in improving the compiler infrastructure.
Bueno, esto es lo que ha estado mejorando de tiempos.
La verdad es que la última versión se ha notado bastante más lenta.
Ha habido bastantes quejas.
Así que espero que hayan trabajado en esto porque lo necesitan, eh.
Aquí vienen más demos trucadas.
Pues hacerlo más rápido todavía.
Que han estado preguntando a usuarios en qué tenemos que trabajar, ¿en performance o no a feature?
Performance.
Qué bueno.
La verdad es que está bien que al menos se lo están tomando todo con bastante humor, eh.
Que están utilizando esto.
Esto es verdad, eh.
Ojo.
Esto es verdad, eh.
Ojo.
Ojo.
Ojo.
Ojo.
Ojo.
Ojo.
Ojo.
Ojo.
Ojo.
Ojo.
Ojo.
Se van a enfocar mucho en rendimiento, esta gente se ha picado y van a hacer que sea rápido, ya veréis.
Bueno, eso es lo que necesitamos.
Eso queremos, eso queremos.
Eso queremos.
Eso queremos.
Eso queremos.
Eso queremos.
Eso queremos.
Eso queremos.
Eso queremos.
Eso queremos.
So how do we do this?
How do we give you all of this?
What's our, how do we track our progress?
How do we measure that we're on track?
This, I regret to announce, is not my GitHub contribution chart.
It's actually suffered quite a bit in the last couple of years.
This is how we're tracking the reliability of our Rust based compiling.
Están hablando de Turbo Pack.
So this represents running the entire test suite of Next.js
that we've accumulated over 10 years of every bug fix, every reproduction, every race condition.
Keep track of it at areweturboyet.com.
Ya no le quedan mucho todavía.
Van por el 90%.
Pero el 10% es el que más va a costar, obviamente.
Pero esto, ojo, esto no es tan estable todavía.
Pensad que esto llegará, pero todavía no está en estable.
Lo podéis probar ya con guión guión Turbo, pero...
Es que cuando Next.js se pueda quitar webpack de encima...
Cuando Next.js se pueda quitar webpack de encima va a ser una salvajada.
Ahí es donde realmente vamos a ver Next.js a saco.
Supongo que será el año que viene, pero va a ser interesante.
Ahí sí que vamos a ver.
Turbo.
Ahora lo vamos a probar.
Ahora lo vamos a probar.
Ahora lo vamos a probar.
Ojo, simplificando Next.js.
Claro, van a tener que quitar APIs.
Es que...
Todos quieren que quitar fast web sites, dynamic web sites,
y todos queremos simplicidad cuando se trata del modelo.
Entonces, antes de hablar sobre cómo podemos deliver a esta simplicidad,
y, como prometo, con no nuevas APIs,
voy a hablar de cómo puedo medir una web rápida rápida.
Número uno, quiero ver una rápida inicial visual.
Entonces, esto es abrir mi teléfono, voy a una página,
y quiero verla instantáneamente.
Aunque no puede ser completo,
porque hay partes de ese sitio que son dinámicos
y personalizadas, solo para mí.
Entonces, yo también me preocupo
sobre la rápida, rápida, rápida, rápida, todo rápido, fast, fast, fast.
Ojo, y la experiencia de desarrollo.
Bien.
Bueno, va a hablar ahora de lo de partial pre-rendering.
Espero que esto está en beta también.
Claro, lo que pasa es que funciona automático.
Por eso dicen nuevas APIs,
porque esto lo va a hacer automáticamente por ti sin que te des cuenta.
Claro.
Qué bien habla inglés, Guillermo, eh, tío.
O sea, tiene un inglés que dan ganas de lamerlo.
Claro, el problema que suele pasar aquí
es que tienes que esperar a todos los datos
para poder devolver algo.
Ahora, esto es lo tradicional.
Esto es lo que hacen la mayoría de las páginas web.
El inglés, el inglés.
No la inglés, el inglés.
Ya.
Dx era algo de la silencia.
Hmm, Max.
Yes.
Y itó.
Y itó.
y cartón.
Y itó 뭐 y campaña de properties
que lo definimos,
que era para ciego solo.
�es.
Habla túballos,
y Expletives,
hay algo que lo ves que tenemos ahora.
La defensa fine de la bugs de la ley
La f rerunca
del resto deágpia
que algunas páginas dan 40.
Tamp uncomfortable
y una char·lanta.
Ahora,
es que esto va a estar chulo porque vas a poder mostrar algo inmediatamente y no es esto,
es lo que viene, esto sería lo de después. Esto es antes de lo que va a presentar.
Claro, porque esto lo está haciendo en el cliente, esto todavía no es, lo siguiente va a ser todos
corazones. Esto es ahora, esto es ahora, no el futuro, esto es ahora. Ya mejoró un poco.
Todos contentos.
Exacto, esto es lo que va a corregir.
Corregir.
Not fully satisfying on every dimension. The initial visual could have been as fast as static,
for example. The dynamic visual could therefore have happened faster, especially when you're
juggling your compute being far away from your data in waterfalls. And the DX, well, don't
get me started on the DX, because now I have to figure out runtimes, figure out regions,
figure out what packages work, what packages don't work. So if I do all of this, the situation
was good, but again, we're in the quest to simplify Next.js.
Los tres corazones, lo que buscamos. A ver cómo lo van a conseguir. Partial pre-rendering.
Bueno, bueno, bueno. Partial pre-rendering. Ojo. Esto va a estar en beta, ¿eh? O sea,
esto va a estar en preview. O sea, no es estable, ¿eh?
So what happens is this. When you build your Next.js project, we will extract a static shell
for each entry point of your application. Lo que pones en suspense, en el fallback,
lo va a hacer como una foto. Lo va a dejar estático.
Claro. Claro. Lo podría mostrar de forma estática esa parte.
Claro. Esta parte y esta parte de aquí son dinámicas, pero ya está mostrando el playholder desde el servidor.
Y en cuanto tenga la información, desde el servidor le streamea la respuesta. No en el cliente, sino desde el servidor.
Claro.
¿Veis? Está streameando directamente la respuesta el mismo servidor.
Entonces, ya el fetching de datos lo haces desde el servidor, no desde el cliente.
Es un win, win, win.
Win, win, win.
Sobre todo Berzel. Qué gana, qué gana.
So, having accomplished this, and again, this technology is in preview,
you're going to be able to test it really soon.
You're going to be able to ship this dream of what we call dynamic at the speed of static.
Me encanta esa frase, eh.
Me encanta esa frase, eh.
So, let's recap what we covered today during the keynote.
Vale.
Desarrollo, Turbo Pack, todavía sigue en beta, vale.
Yo creo que a principios del año que viene tenemos Turbo, eh.
El nuevo curso de Next.js.
Y enseña esta base de datos en el curso, eh.
Lo hace.
Es gratis, eh.
Las dos cosas son gratis.
Server actions ya están en estable.
Ya las podemos utilizar.
Y parser prerendering.
Pero parser prerendering está en preview, eh.
No lo ha dicho, pero no está estable.
O sea, es la idea que la están mostrando ahora.
Puedes upgrade a Next.js 14, hoy, o head to Next.js.org, slash 14,
to learn about all these great improvements.
¿Sí lo dijo? Pues no me enteré, ¿no?
Dijo que está en preview.
Vale, pero como no ha puesto ahí, que está en preview.
Y, por supuesto, aún no estamos terminados.
Ojo.
Ojo.
Ojo.
Lo próximo.
Ya ves, eso va a ser increíble, hacer despliegues con Turbo Pack.
Va a ser la leche.
Observabilidad.
Observabilidad es, pues, ver datos de carga de servidores, tiempos que tardan las requests,
este tipo de cosas, eh.
Ahora, vamos a entrar en el resto de Next.js Conf.
Ustedes van a escuchar de nuestra comunidad.
Ustedes van a escuchar de nuestros partners de tecnología.
Ustedes van a visitar sus puestos aquí en NSF.
Ustedes van a escuchar sobre todo el suceso de nuestros clientes.
Así que muchas gracias y disfruten la conferencia.
Aplausos.
Aplausos.
Aplausos.
Aplausos.
Aplausos.
Ustedes bueno, bueno, bueno, Guisermo habló para la Next.js Conf con un poquito de retraso.
Pero, bueno, ya ahí tenemos todas las novedades de Next 14.
Y la verdad, muy buena pinta las cosas como son. Creo que han hecho bien. Ya os dije, os dije, os dije, se van a basar mucho en darle estabilidad a todas las cosas. Van a parar un poquito máquinas y van a ver cómo pueden hacer las cosas rápidas, estables. Ya no lo podíamos oler, o sea, es que es normal, es normal. Y creo que han hecho bien. Ha sido una buena estrategia, es lo que la gente estaba pidiendo.
Oye, basta ya de más cambios, más historias, hacer las cosas que sean estables, que funcionen bien y todo esto. ¿Para Shaper Rendering es como las islas de Astro o es algo diferente? Es algo diferente. ¿Por qué? Astro, o sea, Astro todo sigue igual, que ya veo aquí un montón de preguntas. ¿Qué va a pasar con Astro ahora? Es totalmente diferente.
Lo que tendríamos con Astro, lo que hacen las islas de Astro Build. Astro lo que hace es similar, ¿vale? Es similar en el sentido de que sí, que mete una cosa estática.
Y luego lo que hace es que sea interactivo en el cliente, pero lo que está haciendo Next.js es algo diferente e incluso más potente.
Diferente porque no es el mismo componente, sino que sería el fallback, o sea, el shell, el placeholder que tú quieres poner en ese componente que tenga que hacer un fetching de datos,
de forma que al usuario tú le puedas enseñar directamente el placeholder, mientras el servidor, no desde el cliente, el servidor, está recuperando la información,
el fetching de datos para ese componente. Imagínate una caja de comentarios, ¿vale? Imagínate una caja de comentarios.
Lo que va a hacer Next.js es enseñarle al usuario la caja de comentarios con los playholders estos o los esqueletons, con lo que queráis, le va a enseñar,
a ver si, loading, esqueleton, loading, esto. Va a enseñarle esto, ¿vale? Le va a enseñar esto, que hace ese efecto de que está cargando.
Mientras el servidor está cargando los comentarios de verdad y haciendo un streaming de datos, va a cambiar este esqueleto por los comentarios.
Y tú dirás, bueno, pero eso se podía hacer. Podías conseguir lo mismo, pero de formas mucho más complicadas, porque normalmente lo que tenías que hacer es,
una vez en el cliente, en el useEffect, entonces hacías el fetching de datos para cambiar la información con un estado y tal.
Aquí lo que lo va a hacer es totalmente automático. O sea, lo que vamos a ver es que va a cambiar eso automáticamente desde el servidor.
O sea, que vas a tener que hacer el código solo en el servidor, lo cual me parece increíble. Me parece tremendo, increíble, la verdad.
Bueno, Next.js 14, aquí lo tenemos. Vamos a ver cómo es el nuevo click y todo esto. Vamos a updev. Vamos a probar la versión 14.
MPX, mira, 14.0.0. Probando Next.14, ¿vale? ¿Te gustaría utilizar TypeScript? Venga, va.
Con Slim, con Tailwind, con el Source, ¿vale? Vemos que esto no ha cambiado nada, que sigue exactamente igual. O sea, más o menos lo mismo.
Y vamos a probarlo primero. Ya que están hablando mucho de Turbo, que han mejorado Turbo y todo esto, lo vamos a probar.
A ver si realmente han mejorado los tiempos, ¿vale? A ver si ahí le ha dado... Antes se hacía en el cliente, ahora se hará en el servidor.
Eso es igual a menos ya va a salir del lado del cliente y a su vez aumentará la velocidad. Efectivamente, efectivamente. Ahí está.
Ahí está. O sea, va a ser una cosa interesante. Probando Next.js 14 y vamos a probar ya de una... ¿Cómo es? Next.dep.
Bueno, claro, Next.dep no puede ser. NPX Next.dep Turbo. Turbo. Mira, Turbo. ¡Hostia! La verdad es que sí que se ha notado más rápido, ¿eh? A ver.
Bueno, claro. Mira, la mitad, ¿no? O sea, aquí ha tardado pues Next y aquí Reading 2 segundos.
Fijaos que ha cambiado... ¡Ay! Estoy... Perdón, que es que no estoy acostumbrado... ¡Hostia! No estoy acostumbrado a estar en esta parte de la pantalla y no...
Gracias. Vale, gracias por avisarme, ¿eh? Que no... Vale. Venga, pues lo vamos a ver otra vez.
Mirad. NPX Next.dep. Esto sería la versión totalmente normal, ¿vale? Y tarda 2,6 segundos.
Y tendríamos aquí la página que fíjate que incluso después cuando entras también tiene que compilar cosas y tarda un poquito, ¿eh?
Pues ahora tendríamos... Bueno, ahora no, ya lo teníamos, pero se supone que ahora es un poquito más estable.
Fijaos la diferencia, ¿eh? La diferencia... 590 milisegundos y cuando entramos también se ve más rápido.
O sea, que básicamente diríamos como mínimo la mitad, ¿no? La mitad de tiempo fácilmente.
No está mal, ¿eh? No está mal. También se supone que deberíamos ver la diferencia incluso si ejecutamos aquí cosicas y aquí le ponemos...
Vamos a quitar esto por aquí, esto por acá, esto por aquí, esto por aquí, ¿vale? Tenemos esto por aquí.
Si aquí le quitamos cosas, deberíamos ver que también en modo desarrollo aquí está mejorando el tiempo bastante.
Si ponemos aquí... Hola. Bueno, no, no está mal, ¿no? No está mal. A ver... Hola, mundo. H1.
Bueno, bueno. O sea, está bastante bien, ¿eh?
Es verdad, es verdad lo que dice Lighto Lagami. Dice el Hello World siempre funciona perfecto.
Es verdad, ¿eh? Estaría bien. Lo malo es que cuando tienes un proyecto que ya es más grande, como por ejemplo, aprende...
No sé si aprende JavaScript. Lo tengo... No sé si lo tengo... Yo creo que es Next.js.
Y este es más grande. Sí, es un Next.js. Si este, que lo tenemos Next, lo tengo con la versión K13.
Lo tengo con la versión K13. Si lo actualizamos a la 14, sería interesante ver si realmente mejoraría, empezarían los problemas o qué.
Mira, aquí estoy utilizando la 13.14. Lo malo es que creo que... Sí, aquí estoy utilizando todavía el PageRouter.
Ah, no. Estoy utilizando el AppRouter. Ostras, pensaba que estaba utilizando el PageRouter.
Pues mira, igual intento actualizarlo a ver cómo funciona.
¿Qué más tenemos? Aparte de esto, también tenemos los Server Actions, ¿no?
Esto de las mutaciones y tal, que lo hemos visto aquí.
O sea, aquí, por ejemplo, vamos a poner este FormAction. Lo podríamos poner... Claro, lo tendríamos que poner aquí.
Y, por ejemplo, vamos a poner components form.jsx. Bueno, txx, que si no, se nos queja, ¿no?
Y vamos a poner todo esto. En realidad no va a ser esto. Esto tendría que ser un form.
Y aquí, pues claro, aquí podemos hacer que sea wait, pero bueno. Vamos a poner console.log.
Esto funciona. FormData. Y podríamos hacer un get del name para ver si realmente funciona esto correctamente.
Y aquí vamos a ponerle el formulario. Form... Este de aquí, ¿vale?
Y con esto deberíamos ver nuestro formulario. Bueno, se ve un poco raro porque me lo ha puesto arriba.
Esto es por culpa del flex. A ver ahora. Bueno, ahí lo tenemos, ¿no?
Se supone que aquí, pues podríamos poner lo que sea, ¿no? Hostia, que funciona regulín esto, ¿eh?
A ver. O sea, que se ve de color... Vamos a poner class name text black para verlo. Vale.
Y al darle submit, no hace nada. Al darle submit no hace nada, pero... Vamos a ver si aquí aparece.
Sí. Ah. This MF only did the plane. Ostras. ¿Habéis visto?
Desde failure to find server action 0 no sé qué, no sé cuánto. A ver. A ver.
¿Qué está pasando? Anda. Ah, no. Ahora sí que lo está haciendo.
¿Veis que está devolviendo esto aquí? O sea, esta función se está ejecutando en el servidor.
Con el userver este, lo que estamos haciendo aquí es que este formulario se está...
Se está haciendo el submit. O sea, cuando le das aquí a submit, se está haciendo el submit.
Fíjate que puedes hacer aquí miguel. Le damos al enter y aquí en el servidor ya tengo miguel.
De forma que tú aquí ya estarías en el servidor y podrías hacer una llamada, una base de datos, una API o lo que sea.
¿Vale? Lo que sea. Está bastante interesante. Lo veremos en el curso. ¿Vale?
¿Y qué más? Bueno, esto son cosas que tendríamos que hacer.
Claro, una vez que tenemos esto, tanto para hacer si está cargando o no está cargando, por ejemplo,
aquí podríamos hacer un use form status. Entiendo que sería así.
No sé esto. ¿Qué nos daría? Creo que esto debería dar action data method.
No sé si esto. Pending, ¿no? Debería hacer un pending.
Y aquí pending. Entonces enviando y si no null.
Si aquí hacemos un delay, hacemos set timeout, algo así.
Bueno, vamos a hacer el delay aquí.
Delay. ¿Vale? Ahí está.
Para esperar unos cuantos milisegundos y hacíamos aquí, vamos a esperar, por ejemplo,
await, await, delay de dos segundos. ¿Vale?
Y aquí, yo qué sé. No sé si habría que devolver algo, ¿sabes?
No sé. Ese pending, cómo detecta que realmente estamos esperando que termine.
No sé si es que se tiene que resolver.
¿Espera que se resuelva el create? Me imagino que sí.
Sí, porque pone bolean. ¿Veis que pone aquí bolean?
O sea, que entiendo que esperará ahí.
Entonces, aquí ahora lo que estamos haciendo es como simular algo que espera dos segundos.
Dos segundos. Imagínate que es una actualización, una base de datos.
Y ahora aquí, anda, pues no ha funcionado.
¿Puede ser que esto es porque tenga que ser un client?
¿Sabes? Que solo puede estar en el cliente. Pues no.
Parsing en más script, value, no sé qué, no sé cuánto.
No. No, no, no.
Pero use host transition status is not a function.
O sea, algo hay aquí que no le termina de gustar.
Bueno, no pasa nada porque todavía no...
O sea, es la primera vez que lo estamos viendo.
Normal. Igual se nos ha ocupado.
¿Veis? Form with loading error states.
Esto es lo que queremos.
Y aquí, vamos a ver, add form, use form status.
¿Ves? Es justamente esto.
Use form status. Es justo lo que he hecho.
Pero esto lo he puesto aquí en el submit button.
Y esto tiene un use client.
Claro, no sé si es que esto solo funciona en el use client,
pero tendríamos que separar por una parte lo que es la parte esta que hemos hecho aquí de lo otro.
¿O qué?
Pero bueno, aquí es donde están las cositas estas.
Porque este use...
O a lo mejor es un error que nos hemos encontrado ahora, ¿no?
Que podría ser también, ¿eh?
Podría ser un poco también, ¿no?
Vale.
Bueno, lo miraremos.
No os preocupéis que haremos con el curso.
Lo vamos a ver clarísimo, ¿eh?
Y ya está.
Pero igual se les ha colado.
O sea, no me extrañaría que se les haya podido colado.
Bueno, y esto, al final, tenemos lo del pre-rendering.
Pero el pre-rendering, fijaos que aquí no pone...
¿Ves que pone coming soon?
Dice, partial pre-rendering is under active development.
Will be sharing more updates in a upcoming minor release.
Entonces, es que no se puede ni siquiera se puede probar.
No se puede probar.
Sí, sí.
Es que lo del use client yo creo que debería ser use client.
Pero fíjate que al poner el use client, entonces me peta por todos los lados.
Me dice que parsing in manuscript source code failed.
Y, ¿ves?
Entonces, no sé si el problema está aquí.
Y es por el use server este.
¿Sabes?
¿Ves que poneis nota al auto defining line use server annotation server actions in client components.
Entonces, es que no debería mezclar, ¿sabes?
Este no debería tener el use client.
Pero aquí pone use host transition status.
Y esto es lo raro.
Entonces, lo que puede ser es que esto lo tengamos que sacar en otro sitio.
O sea, separarlo.
Pero, bueno, lo miraremos.
No os preocupéis.
Lo separaremos bien porque no se puede tener en el mismo archivo la parte del client con lo que no sé del client.
Y ya está.
O sea que lo...
A ver, lo puedo separar un momento, va.
Lo puedo separar un momento.
Form loading, por decir algo.
¿Vale?
Y esto le ponemos aquí.
El use client.
Export const.
Mira.
Form loading.
Para que lo veamos porque si no...
Si no, va a parecer que no lo hacemos porque...
Esto lo ponemos por aquí.
¿Vale?
Esto lo agregamos.
Y...
Etatatata.
¿Vale?
Este pending lo que vamos a hacer es utilizar el form loading.
Lo sacamos aquí.
Esto lo quitamos de aquí.
Y aquí actualizamos esto.
Y esto no hace falta.
Esto no hace falta.
¿Vale?
Ahora sí.
Ahora sí.
Ahora sí.
Ahora sí.
¿Vale?
Y ya está.
Entonces...
Esto es...
Falta el use experimental.
No, no.
En este caso no.
A ver.
El tema es...
Sí que es verdad que...
Esto es lo malo de los Realser Component.
¿No?
Use server.
Use client.
Y tienes que estar...
Pero a ver.
Esto no ha cambiado.
Esto es lo normal.
¿No?
Y ahora sí ponemos esto.
¿Ves?
Enviando.
Y cuando pasen dos segundos, desaparece.
¿Por qué?
Porque lo que estamos haciendo es...
Aquí, en el servidor, esperamos dos segundos y luego terminamos.
O sea, esto va a ser muy interesante.
Esto lo veremos en el curso y lo vais a entender súper bien.
Pero el tema es que ahora vas a ser capaz de ver si el formulario se está enviando en el servidor y en el cliente mostrar que se está haciendo algo.
O sea, está brutal en el sentido...
O sea, lo que está bien es el hecho de poder hacer cosas en el servidor y detectar en el cliente que todavía no ha terminado lo del servidor.
O sea, está bastante chulo.
¿Veis?
Aquí, esto lo tenemos en el servidor esperando dos segundos.
Y en el cliente, utilizando solo el hook use form status, sabemos si está todavía en pending.
Y ya veis, tenemos aquí el enviando y por lo tanto sabemos si eso está funcionando.
Esto es propio de Next.
Lo que pasa es que ves que lo ha sacado React DOM.
No es propio de Next.
Esto es de React.
Y va a estar...
Cualquier persona, o sea, cualquier framework lo podrá utilizar.
¿Por qué?
Porque esto son...
Las server actions son parte de React.
O sea, es bastante interesante porque esto va a ser parte de React.
Y esto es lo que quiere decir es que React está dejando de ser la biblioteca aquella que solo se preocupaba de la UI para convertirse en algo más.
No sé si ya podríamos empezar a hablar de que se ha convertido en un framework.
Pero sí que está claro que muchas de sus funcionalidades las vais a tener que utilizar a través de un framework.
Y está bien porque al menos ahora cuando lo importemos, como podéis ver, lo estamos importando de React DOM.
O sea, que queda bastante más claro.
No sé si aquí ellos lo importan también de React DOM o de dónde lo importan.
A ver.
Sí.
A ver, React, React, a ver...
Bueno, claro, es que no sale el use form status de donde lo están sacando aquí.
Pero bueno, que sí, que podéis ver que es de React DOM.
¿Ok?
¿Eso solo funciona en form o en un onclick puede funcionar?
Esto solo funciona en los formularios, en las actions, no en los onclicks.
¿Vale?
Solo funciona utilizando la action de un formulario.
Vamos a hacer este curso desde cero, todos juntos.
Son 14 capítulos y vamos a ver cuándo empezamos.
Vamos a ver cuándo empezamos.
Eventos.
Tenemos lunes, JavaScript.
Martes, especial Halloween.
Miércoles, curso de CSS.
Pues el jueves, ¿no?
Hacemos el jueves.
¿Vale?
Pues el jueves.
Venga, vamos a hacer el jueves.
Curso.
Curso de NextGS.
14 desde cero.
¿Vale?
Y así veremos todas las cosas nuevas.
Empezaremos el 2 de noviembre de 6 a 8.
Tu, tu, tu, tu.
6 a 8.
Curso de NextGS.
14 desde cero.
Para aprender app router, server actions y mucho más.
Y ya está.
Vamos a dejar a Feral que ponga una imagen bonica.
La que Feral me diga.
Puedes poner la que quieras.
Midu, ¿por qué lo hiciste?
¿Por qué lo hice?
¿Por qué hice el qué?
¿Hice el qué?
Los hooks también, ¿no?
Y Feral, tú pones la imagen.
Muchas gracias.
Bueno, amigos.
Espero y deseo que os haya gustado ver la NextGS.conf conmigo.
Me lo he pasado súper bien.
Ha estado súper genial.
Conocimientos previos.
Hombre, yo creo que vais a necesitar saber un poco de React.
Porque no vamos a hacer React desde cero.
Aquí tenéis el contenido que vamos a hacer.
Vamos a crear una aplicación de NextGS desde cero.
Vamos a estilarla.
Vamos a optimizar fuentes e imágenes.
Crearemos layouts y páginas.
Navegaremos entre páginas.
Vamos a utilizar una base de datos.
Una base de datos de PostgreSQL.
Vamos a hacer fetching de datos.
Vamos a entender qué es el renderizado estático, el dinámico.
Vamos a entender, para mejorar la experiencia de carga de nuestra aplicación,
vamos a ver cómo es hacer el loading.
¿Qué es esto del partial pre-rendering?
Vamos a ver si somos capaces de utilizarlo.
Si es que lo han activado para ese entonces.
Vamos a añadir búsqueda y paginación.
Cómo mutar la data con los server actions.
Cómo manejar errores.
Cómo mejorar la accesibilidad.
Añadir autenticación.
Y añadir metadatos.
Todo eso lo vamos a hacer en el curso de NextGS14.