Next.js 14: Master Server Actions, React Server Components, and More 💻
Vložit
- čas přidán 8. 08. 2024
- Learn Next.JS 14: From URL synchronization to data manipulation and database interaction, this journey will immerse you in the intricacies of modern web development. Uncover optimization strategies, security practices, and engage with the community.
Transform your understanding of web development now! 🚀💻
▶ Don't miss more live sessions at: / midudev
00:00:00 - Introduction
00:02:11 - Explaining what we've done
00:09:21 - Let's get our hands moving
00:10:25 - Working with Invoices Page
00:12:31 - State in the URL: Information worth millions
00:14:24 - Server-Side Rendering and Initial Load
00:15:05 - Capturing user input
00:16:05 - Creating a URL to sync with input and URL
00:16:49 - How to use SearchParams?
00:20:04 - Updating the URL
00:21:08 - Testing input and URL synchronization
00:21:59 - Syncing the initial state
00:23:43 - Displaying information
00:24:38 - Showing results based on our search
00:27:47 - Community questions
00:28:51 - Explanation of what we did
00:31:42 - Is the Key a good practice?
00:32:05 - searchParams on the server and client
00:32:34 - Implementing a Debounce
00:37:52 - Pagination reset
00:38:36 - Creating Pagination
00:40:45 - Getting the current page
00:42:22 - Generating URLs
00:43:04 - Bringing pagination to life
00:45:50 - Code explanation
00:46:33 - What are Server Actions and what do they do?
00:49:19 - Example of a Server Action
00:50:44 - Create Invoices Page
00:52:09 - File for all actions
00:52:42 - 'Use Server'
00:53:37 - Creating/Integrating the 'action'
00:56:51 - Validations
00:58:52 - Chapter 33
01:00:22 - Creating the Date (format and explanation)
01:02:19 - Calling the database and implementing information
01:04:34 - Integrating SQL (injection?)
01:07:01 - Avoiding cache and redirecting with Next.js
01:12:15 - Comments from the Miducommunity - Věda a technologie
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
Gracias majo!!! :)
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!!!!
lo vi en la tv sin pc i no me acorde de comentar... QUE PEDAZO DE CLASE ESPECTACULAR COMO LA ANTERIOR!
Estaba haciendo un buscador y me estaba costando hacerlo , ahora ya puedo terminarlo , muchas gracias midu
Excelente explicación, muy ordenado y honesto a la hora de valorar las distintas posibilidades
Lo combine con firestore y increible
Que bien explicas todo, haces parecer que es fácil. Gracias por todo el contenido midu
Excelente explicación, muchas gracias por tu esfuerzo compartiendo contenido de calidad!
Estoy iniciando a aprender Nextjs. Y en este curso he aprendido los conceptos fundamentales. Gracias Midu.
Te amo miduuuu, en vez de ver netflix te miro a vos. Crack!!
Buenisimo Midu, gracias. Espero tengas planes de terminar el tutorial de la documentación.
Que locura Miduuuu! Gemini me acaba de redireccionar al video al hacer una pregunta sobre next 14! Que crack que sos
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
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!!
A ti crack!!!
Muchas gracias por todo lo que haces midu
Excelente video, Gracias por compartir, saludos
tremenda papeada la de al final
te amo midu ♥
por ti le echo ganas a mi chamba y siempre uso buenas practicas
Excelente tutorial
Muy bien explicado
Gracias por este video!!!
Genio midu. Desde Arg!!
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.
Lo estaba esperandoooo
me suscribo! muy bueno
Gracias Midu , super entrete el video!
Muchas gracias!
Gracias Midu! excelente tutorial
Gracias a ti!
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.
Dónde puedo ver la siguiente clase que menciona midu? (Autenticación) Muy buena clase por cierto!
Gracias midu
Necesito la siguiente parte cuanto antes lol
muy bueno
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!
Gracias crack!😀
Gracias a ti! Vaya mega aporte! Te lo agradezco un montón amigo!!!!! 🔥
Top video! Solo una cosita, no sirve el skeleto en producción pero si en localhost
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
Muy buenos
Nms apenas aprendi next 13
Maldita seaaaaa
😂
De casualidad el método get de 'searchParams' no devuelve undefined en el primer renderizado ya que al montarse el componente aún las queries del router pueden no estar disponibles?
Buenas, me encantó el curso. Consulta el esqueleto del componente es responsive?
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
ta barbaro! se sabe si continuo con el el tutorial? o si planea hacerlo?
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 !
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?
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
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.
Gracias por compartir esto!! El código está en github?
love
Grande Midu muchas gracias por el video. Me quede pendiente de ver como maneja los errores del Zod >:/,
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)
}
}
Excelente, muchas gracias. 🤙 ¿Podría hacer un tutorial de NEXT JS 14 con Apollo Client?
Cuando viste que midu suba un video de apollo?
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 !
Primero ❤
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
Midu yo podría en los server components hacer el uso de un orm para hacer las operaciones? X ejemplo prisma orm ?
puedes subir el codigo a git en tu repositorio. muchas gracias.
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)
Alguien sabe si Midu subió lo de Next Auth ?
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 ???
Buenas gente, alguien sabe cual es el video siguiente a este? gracias de antemano y saludos!
No es mejor usar datos de la cahe en vez de un loading cada vez?
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.
Estoy viendo un proyecto que usa import "server-only" cuál es la diferencia entre "use server"? saludos
Como se llama la extension del package.json para minimizar los demas archivos?
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);
}
alguien sabe que extension usa midu para los console.log ver en el mismo archivo?? es muy util
Console NInja
y cuando la otra clase?
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?
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.
Esta es la segunda parte?
Mmm creo que si la api para obtener todas las paginaciones demora más de lo esperado estaría retrasando toda la pagina no?
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 😅
midu que recomiendas con next , redux o redux toolkit
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
@@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
y en ese caso de que sea muy grande que otras cosas se podrian optar
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 😭😭😭😭
Si utilizamos el estado en la url, estamos rerenderizando toda la pagina, es eso optimo?
El tema es que no re renderizamos toda la página. Lo explicamos en el primer vídeo del curso.
Helllooo
como certifico que aprendí next14 con midudev? lo quiero subir a mi cv 🤣
hola midu!!! va a seguir esto?!
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)
Los Server Actions pasan la info por POST en el body.
Me hubiera gustado ver como maneja los errores del Zod :(
necesitamos un curso de angular específicamente angular 17 POR FAVOR #midulive
Deberían hacerte ministro de programación che
Grande midu, en español nadie explica mejor que él 🫡
Fazt tambien enseña muy bien la verdad
Ey esa frase me suena a otro canal jaja
hey Midu como se llama la extension que usas para el console log en VSCode?
Console ninja
hey muchas gracias@@frandiazcenteno
Y la autentificación en la siguiente clase ? 😩
¿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.
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.
@@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.
@@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"
@@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.
@@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.
y donde esta el codigo fuente??, algun link de github?? xd
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.