Next.js 14: Master Server Actions, React Server Components, and More 💻

[@Alejandro_Pirez94]

No puedo explicar cuantas cosas de Midudev me han servido a lo largo de los años para pasar al siguiente nivel de programación, gracias por la humildad y la capacidad de ayudar sin experar nada a cambio. Haces la diferencia en el mundo,. Saludos desde Cuba. T:.A:.F

[@midulive]

Gracias majo!!! :)

[@mzzegarra]

Gracias crack!😀

[@midulive]

Gracias a ti! Vaya mega aporte! Te lo agradezco un montón amigo!!!!! 🔥

[@albertoprieto522]

Lo combine con firestore y increible

[@codesthenos]

22:33 Da igual usar query como en ejemplo de vercel o usar search, funciona exactamente igual, query no es un magic string, es solo el nombre que le damos nosotros a ese searchParam. Midu, ni te imaginas cuanto me has aportado, me he animado a hacer el curso de Vercel por mi cuenta, y luego ver tu video, y es brutal todo lo que estoy aprendiendo, pero de no ser por las cientos de horas que llevo con tu guia, no me habria atrevido a encarar el curso solo, y desde luego, no habria podido hacerlo solo y entenderlo tan bien como lo estoy haciendo, todo gracias a mi esfuerzo y constancia, y GRACIAS A TI, ni te imaginas cuanto he aprendido y estoy aprendiendo contigo Gracias midu

[@SonGoku-pc7jl]

lo vi en la tv sin pc i no me acorde de comentar... QUE PEDAZO DE CLASE ESPECTACULAR COMO LA ANTERIOR!

[@MANULKful]

Midu, estoy siguiendo el learn de Next y la verdad es que estos videos son fantásticos. Me han ayudado a comprender Next, como algunos temas de API nativos que tenia oxidado y me he puesto a refrescarlo. Vamos el super del desarrollo que entras por una cosita y sales con un carro entero!!. 😄. De verdad muchas gracias y muchos exitos midu!!

[@midulive]

A ti crack!!!

[@tomas6909]

Te amo miduuuu, en vez de ver netflix te miro a vos. Crack!!

[@cordoobez]

Grande Midu!!!! Todos los días veo tu contenido, no solo que me mantengo al día con avances y chismes, sino que también aprendo mucho... Vivan los server actions!!!!

[@ricardohernandezmendez4207]

Estoy iniciando a aprender Nextjs. Y en este curso he aprendido los conceptos fundamentales. Gracias Midu.

[@elverdavid_dev]

Estaba haciendo un buscador y me estaba costando hacerlo , ahora ya puedo terminarlo , muchas gracias midu

[@jorgevillafraz2656]

Buenisimo Midu, gracias. Espero tengas planes de terminar el tutorial de la documentación.

[@luis_forerop]

Que locura Miduuuu! Gemini me acaba de redireccionar al video al hacer una pregunta sobre next 14! Que crack que sos

[@alejqndrocarranzaruiz4306]

tremenda papeada la de al final te amo midu ♥ por ti le echo ganas a mi chamba y siempre uso buenas practicas

[@leonardopaz2525]

Excellent este video y tus opiniones de si esta tecnologia es buena , si aplica o no para cada problema como lo dices al final sobre los server actions y server components

[@carloscarballo170]

Excelente explicación, muy ordenado y honesto a la hora de valorar las distintas posibilidades

[@jorgericaldi6438]

para los que no entienden lo de la key del Suspence es porque en la magia de next, lo lleva a client y lo "monta una vez" como todo componente que usualmente creas, si usas un useEffect con dependecia vacia "[]" esto solo se ejecuta una vez o como en classes usabas ComponentDidMount. Para poder ejecutar nuevamente estos "lyfecycles" un truco es cambiar la key dinamicamente tal como lo hace midu. no se recomienda nunca hacer esto porque haces que se renderice por completo todo el componente, lo gracioso es que "en este caso" es lo que deseamos.

[@PiiiPheCarrasco]

Gracias Midu! excelente tutorial

[@midulive]

Gracias a ti!

[@gabrielgomez7290]

Crack! Gracias Midu! 😃

[@midulive]

Gracias a ti!

[@GabrielPozo]

Excelente explicación, muchas gracias por tu esfuerzo compartiendo contenido de calidad!

[@parsevaltheorem]

En la empresa donde trabajo tenemos varios proveedores con sus servicios, en la parte de desarrollo consusmimos sus APIs, honestamente, la mayoría deja mucho que desear en cuanto a seguridad, en este punto los Server Actions nos han salvado! c: y ha sido regla en la empresa desde entonces.

[@yavallejo]

Excelente video, Gracias por compartir, saludos

[@facebook5423]

Que bien explicas todo, haces parecer que es fácil. Gracias por todo el contenido midu

[@hellblade-kaos]

Muchas gracias por todo lo que haces midu

[@Deus-lo-Vuilt]

Gracias Midu , super entrete el video!

[@midulive]

Muchas gracias!

[@sergiobc00]

Dónde puedo ver la siguiente clase que menciona midu? (Autenticación) Muy buena clase por cierto!

[@FernandoRiveraGomez-u7b]

Gracias por este video!!!

[@matiasandrada6989]

Genio midu. Desde Arg!!

[@miikuru002]

Grande midu, en español nadie explica mejor que él 🫡

[@andresTorrecilla14]

Fazt tambien enseña muy bien la verdad

[@michaelnuneztorres5788]

Ey esa frase me suena a otro canal jaja

[@ItamCrdns840]

Excelente tutorial Muy bien explicado

[@xurxomf]

Necesito la siguiente parte cuanto antes lol

[@lorenzovignolo8011]

Midu, como siempre, increíble. He hecho el tutorial y luego vi tus videos y la verdad es la mejor forma de aprender. Tengo una duda. Que sucede con librerías de componentes con MUI ?. No serían compatible con los server components, no? ojalá lo veas, por que es una grand duda. Mil gracias!

[@rubenn6160]

Nms apenas aprendi next 13 Maldita seaaaaa

[@victoror5860]

😂

[@Luis_Orlando01]

gracias por la aclaración de los server actions y sus ventajas y desventajas, asi como dejar claro, que son una opción no una obligación

[@rguere]

muy bueno

[@manutube8080]

Top video! Solo una cosita, no sirve el skeleto en producción pero si en localhost

[@luislavayen9495]

me suscribo! muy bueno

[@capodigitalcomunidad]

Lo estaba esperandoooo

[@serlismaldonado]

Crear prototipos con server actions es una pasada, precisamente porque no tienes que montar una API. ¡Claro, eso supone que te limitas a tener todo empaquetado dentro de la aplicación sin poder comunicarte hacia fuera con la API; Pero vamos!, puedes hacer algo muy rápido, seguro y escalable. Como dice el MIDU, si necesitas una API, simplemente créala.

[@marianobanchio9338]

Gracias por compartir esto!! El código está en github?

[@Edwinil]

Grande Midu muchas gracias por el video. Me quede pendiente de ver como maneja los errores del Zod >:/,

[@Edwinil]

Al final esto se consigue convirtiendo el formulario en un "use client" y en el server action que al existir el error lo devuelva, algo asi const validation = createSchemaInvoice.safeParse(rawData); if (!validation.success) { return validation.error.issues; } Y en el formumalio ya se maneja como se quiera por ejemplo const [errors, setErrors] = useState([]) const formValidationAction = async (formData: FormData) => { const actionResult = await createInvoice(formData); if (actionResult) { setErrors(actionResult) } }

[@magguer]

hola Midu! Podrias hacer un tuto explicando como usar Zustand o useContext en Next14 para poder compartir estrados entre los server y client components? Gracias, es muy útil tu trabajo !

[@kegovc]

Alguien sabe si Midu subió lo de Next Auth ?

[@nikolaydiazromero4466]

Me parece que los server action ya si los juntas con arquitectura MVC tienen muchisima potencia con prisma te puedes hacer un controlador validando los datos con zod que midu tiene un tuto genial 😉😉 y en el fichero de actions ya injectas lo que te llegue en el form y al final tienes algo como una 'API' y lo usas en todos los formularios que quieras.

[@jacquelinerodrigues2654]

ta barbaro! se sabe si continuo con el el tutorial? o si planea hacerlo?

[@albertoprieto522]

Muy buenos

[@lucascubile7141]

Midu hay algo que no entiendo. Si yo desarrollo una API externa con express /django o lo que sea. Todo lo de la query funcionaría igual no? solo que el fetching se haría al endpoint de la API y de la API a la db no? Me cuesta enternder un poco el hecho de que Next se conecte directo a la DB. Estoy muy acostumbrado a separar front y back. Es normal trabajar con backends separados cuando se usa next o es mas comun conectarse derecho a la DB como vos? (pasa q no entiendo si lo estas haciendo mas para no levantar un servidor al pepe y gastar tiempo en eso o realmente es standard realizarlo asi)

[@jsr6941]

Entonces si ya existe una api para trabajar con la base de datos cual sería la mejor forma de implementarlo, llamar a la api para crear el registro dentro del serve actions o hacerlo como antes desde el componente cliente del formulario?

[@CarlosGutierrez-gx1vr]

Hola que usas para tener esos console logs directo en el VSCode ?, esta fabuloso, Felicidades por el curso en verdad hacer ver fácil todo !

[@lean_diaz]

alguien sabe que extension usa midu para los console.log ver en el mismo archivo?? es muy util

[@brainwareargentina]

Console NInja

[@eduardmarrugo2129]

Holaaaa Alguno sabe como se llama la app que usa para hacer mediciones y zoom con el mouse?

[@servarcon6687]

Gracias midu

[@ylayalysalas3155]

SOS Midu gracias por este video me ayudo mucho. Ahora tengo un problema con el estado, como puedo inicializar el estado del Store con la data del Localstorage, estoy utilizando Redux/toolkit

[@carlosterrazas8913]

puedes subir el codigo a git en tu repositorio. muchas gracias.

[@JavierRemixTV]

Donde esta la parte final que no la encuentro

[@samuelbocanegradelgado9020]

Excelente, muchas gracias. 🤙 ¿Podría hacer un tutorial de NEXT JS 14 con Apollo Client?

[@dvsys751]

Cuando viste que midu suba un video de apollo?

[@JuanPabloGallegoJaramillo]

help por que se reinica el componente cuando envio la data , nunca llega el console.log? export async function createMemberTeam(formData: FormData) { 'use server'; console.log('createMemberTeam', formData); }

[@JavierRemixTV]

Buenas a todos donde encuetro la ultima parte de este curso?

[@gustavovasquez5263]

tengo una consulta, despues de realizar el proceso de autenticacion segun la guia, retorna un objeto con los datos del usuario, hay alguna forma de recuperar ese objeto desde cualquier parte de la aplicacion con las configuraciones de next-auth?

[@cristianmoreno5486]

Midu yo podría en los server components hacer el uso de un orm para hacer las operaciones? X ejemplo prisma orm ?

[@yovany-dev]

Primero ❤

[@oliverbarreto1838]

Igual de bueno que el mega curso de fullstackopen … va a continuar la serie hasta el final con login, autenticación, etc ??? O simplemente me he perdido y no llego a encontrar el link a los vídeos siguientes ???

[@husdadymena842]

Midu, podrías hacer un video sobre integrar plaiceholder con Nextjs 14, realmente estoy teniendo problemas para usar dicha librería con Next... He seguido la doc pero sólo tiene ejemplos con Nextjs 13, por lo que tengo problemas con esta versión de Next asi que agradeceria tu ayuda

[@ZETECdev]

oye, a ver si alguien me dice, se puede hacer de alguna manera que no se actualice la url hasta que se le de a enter? creo que seria lo mas logico

[@terras06233]

Excelente video! Alguien tiene el codigo del ejemplo por ahi?

[@sebastianmidolo3869]

No es mejor usar datos de la cahe en vez de un loading cada vez?

[@axlsantos6519]

Como se llama la extension del package.json para minimizar los demas archivos?

[@HumbertoColmenares]

Estoy viendo un proyecto que usa import "server-only" cuál es la diferencia entre "use server"? saludos

[@macoacero]

AYUDAAAAAAA!!!!!! Estoy intentanto usar Next 14 pero no me renderiza los cambios por ejemplo un fetch ni siquiera un console.log (en windows 11 ni en WSL) No sé que puede ser 😭😭😭😭

[@EmmanuelFajardo-js8ec]

midu que recomiendas con next , redux o redux toolkit

[@DaPaBe1999]

Más que recomendación, usa lo que realmente necesites para tu proyecto segun el "scope", que tan grande sea tu app, si necesitas un estado global y necesitas conectar y mantener estados toolkit es lo mejor incluso por la doc oficial, si necesitas comparaciones: El context de react para un estado mas cerrado, toolkit para una app mediana, zustand para apps chicas/medianas. Si es muuy grande con muchos estados que tengas que mantener seria mejor optar por otras cosas

[@EmmanuelFajardo-js8ec]

@@DaPaBe1999 muchas gracia spor tu respuesta pero no lo pienso tanto para un proyecto mio si no para conseguir trabajo, pues el context de react si ya lo manejo solo que aun no tengo tan claro cual aprender para apps medianas y grandes para conseguir trabajo

[@EmmanuelFajardo-js8ec]

y en ese caso de que sea muy grande que otras cosas se podrian optar

[@lebaf8661]

Podrías hacer un video usando getserversideprops leyendo una API, y luego podrías usar server actions 😅, no consigo pensar como transformar el codigo. Saludos.

[@johnsequera1342]

Hay siguiente parte?

[@alpaca5548]

Mmm creo que si la api para obtener todas las paginaciones demora más de lo esperado estaría retrasando toda la pagina no?

[@aljaleo]

Deberían hacerte ministro de programación che

[@alexander-adp]

necesitamos un curso de angular específicamente angular 17 POR FAVOR #midulive

[@tomascoglia]

Buenas gente, alguien sabe cual es el video siguiente a este? gracias de antemano y saludos!

[@qbixmex]

Midu en todos tus videos siempre te levantas para acomodarte, supongo por qué te resbalas en tu asiento de piel. Por qué no usas un cojín o cinturón de seguridad 😅

[@alexgonzalese]

Midu que opinas sobre el rendimiento de Next

[@Herongozo54]

hey Midu como se llama la extension que usas para el console log en VSCode?

[@Frandc93]

Console ninja

[@Herongozo54]

hey muchas gracias@@Frandc93

[@AteneoClub]

Server actions deja mucha informacion a los hackers ya que la data se pasa por URL, el cual se rastrea en toda la red y los Apaches o IIS (deben ir por body)

[@midulive]

Los Server Actions pasan la info por POST en el body.

[@diegogrande478]

En caso de consumir una API de terceros, creéis que lo recomendable es realizar las peticiones desde una server action o desde el cliente?? por ejemplo, en una paginación de una tabla donde queremos la información actualizada y la info. se consume de un servidor de terceros, no sería más eficiente realizar las peticiones directamente desde el cliente en lugar de hacerlas desde una server action y a continuación pasarle la info al browser del cliente?

[@MrCone9]

Si las haces desde el servidor tienes dos cosas clave. 1. tú controlsa el hardware, sabes si tiene potencia y velocidad para realizar la petición. 2. Al usuario le llega ya información del tirón, no tiene que cargar(mejora la experiencia de usuario), por otro lado y desde mi punto de vista tiene una cosa mala... el coste que tu servidor sea el que realice las peticiones.

[@yonathanpenuela8530]

y cuando la otra clase?

[@juanferrer5885]

Si utilizamos el estado en la url, estamos rerenderizando toda la pagina, es eso optimo?

[@midulive]

El tema es que no re renderizamos toda la página. Lo explicamos en el primer vídeo del curso.

[@hannielgutierrez9139]

Cómo han trabajado los roles en sus sistemas ? Todos los tutos que he visto solo hacen referencia a un rol definido hardcorde como admin pero ninguno es dinámico que puedas guardar en la base de datos

[@franchinna]

hola midu!!! va a seguir esto?!

[@AlfredoLopez-mc8ds]

love

[@Smileeee_23]

Esta es la segunda parte?

[@MrMartinMDQ]

Buenas, me encantó el curso. Consulta el esqueleto del componente es responsive?

[@albertoprieto522]

Me hubiera gustado ver como maneja los errores del Zod :(

[@nihil_um]

¿Alguien sabe si Midudev tiene algún video donde explique como cachear una búsqueda ya realizada y evitar hacer peticiones repetidas de búsqueda en el servidor?. O si alguien sabe de algún otro tutorial que haya por ahí, también me valdría.

[@gabrielm4979]

En la documentación del tutorial, en los primeros capítulos se explica y se indica que hay que colocar antes de cada función fetch un noStore(); Esto para que no cachee la información, porque básicamente no interesa, no tiene sentido cachearla si es un proyecto tan dinámico y con datos volátiles como un dashboard. Pero si por algun motivo quisieras hacer lo contrario, supongo que quitando ese método (porque repito, se puso a propósito) estaría resuelto.

[@nihil_um]

@@gabrielm4979A qué te refieres con "la documentación del tutorial"?. Dónde encuentro eso?. Por si no me expliqué bien en mi anterior pregunta. Lo que quiero es que no haga una petición nueva al servidor si el usuario hace la misma búsqueda.

[@nihil_um]

​@@gabrielm4979 Lo que yo necesito es cachear la función de búsqueda de manera que no vuelva a hacer la misma búsqueda si ya se hizo previamente. No sé a qué te refieres con eso de "en la documentación del tutorial"

[@gabrielm4979]

@@nihil_um me refiero a que este proyecto del video está basado en el tutorial de la documentación oficial de next js. Si te fijas al principio del video dice que hay un vídeo antes, dónde iba con pijama blanco. Este es la continuación de ese vídeo. Para entender de lo que hablo tienes que ver primero aquel vídeo. Midu está haciendo este proyecto basado en un tutorial de NextJs de su documentación oficial.

[@nihil_um]

@@gabrielm4979 Ah, vale, sí. Ahora te entiendo. Sí, vi también el otro vídeo. Pues nada, tendré que echarle un vistazo a eso. Gracias.

[@ericklozano1581]

Y la autentificación en la siguiente clase ? 😩

[@hawkapparel]

y donde esta el codigo fuente??, algun link de github?? xd

[@OswaldoTovar32]

Helllooo

[@Json-antonius]

oh papu

[@nico-nsm]

Los Server Actions se siguen prestando para estar en capas de modelos (lo uso así con Prisma) pero puede descompaginar proyectos, lo veo como que Vercel quiso hacer eso para el que programa de entre casa digamos, que aprende React se frustra ve eso y dice wow más simple... Pero no lo veo provechoso para proyectos grandes o con un buen tiempo de existencia, le da facilidad pero le quita versatilidad.