Next.js 14: Master Server Actions, React Server Components, and More 💻
Вставка
- Опубліковано 24 лип 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 - Наука та технологія
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!!!!
Estaba haciendo un buscador y me estaba costando hacerlo , ahora ya puedo terminarlo , muchas gracias midu
Lo combine con firestore y increible
lo vi en la tv sin pc i no me acorde de comentar... QUE PEDAZO DE CLASE ESPECTACULAR COMO LA ANTERIOR!
Excelente explicación, muy ordenado y honesto a la hora de valorar las distintas posibilidades
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.
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
Te amo miduuuu, en vez de ver netflix te miro a vos. Crack!!
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
Excelente tutorial
Muy bien explicado
Excelente video, Gracias por compartir, saludos
Que locura Miduuuu! Gemini me acaba de redireccionar al video al hacer una pregunta sobre next 14! Que crack que sos
Buenisimo Midu, gracias. Espero tengas planes de terminar el tutorial de la documentación.
Gracias por este video!!!
tremenda papeada la de al final
te amo midu ♥
por ti le echo ganas a mi chamba y siempre uso buenas practicas
Gracias crack!😀
Gracias a ti! Vaya mega aporte! Te lo agradezco un montón amigo!!!!! 🔥
Genio midu. Desde Arg!!
Gracias Midu! excelente tutorial
Gracias a ti!
Lo estaba esperandoooo
Gracias Midu , super entrete el video!
Muchas gracias!
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.
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.
me suscribo! muy bueno
Dónde puedo ver la siguiente clase que menciona midu? (Autenticación) Muy buena clase por cierto!
Nms apenas aprendi next 13
Maldita seaaaaa
😂
Gracias midu
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?
muy bueno
Necesito la siguiente parte cuanto antes lol
Muy buenos
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!
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?
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
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.
Top video! Solo una cosita, no sirve el skeleto en producción pero si en localhost
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
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
puedes subir el codigo a git en tu repositorio. muchas gracias.
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 !
Gracias por compartir esto!! El código está en github?
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)
}
}
Alguien sabe si Midu subió lo de Next Auth ?
love
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 !
ta barbaro! se sabe si continuo con el el tutorial? o si planea hacerlo?
Midu yo podría en los server components hacer el uso de un orm para hacer las operaciones? X ejemplo prisma orm ?
Excelente, muchas gracias. 🤙 ¿Podría hacer un tutorial de NEXT JS 14 con Apollo Client?
Cuando viste que midu suba un video de apollo?
alguien sabe que extension usa midu para los console.log ver en el mismo archivo?? es muy util
Console NInja
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);
}
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
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)
Como se llama la extension del package.json para minimizar los demas archivos?
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
y cuando la otra clase?
Estoy viendo un proyecto que usa import "server-only" cuál es la diferencia entre "use server"? saludos
Primero ❤
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.
Buenas gente, alguien sabe cual es el video siguiente a este? gracias de antemano y saludos!
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 😭😭😭😭
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 ???
No es mejor usar datos de la cahe en vez de un loading cada vez?
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 😅
Mmm creo que si la api para obtener todas las paginaciones demora más de lo esperado estaría retrasando toda la pagina no?
Helllooo
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.
hey Midu como se llama la extension que usas para el console log en VSCode?
Console ninja
hey muchas gracias@@frandiazcenteno
Esta es la segunda parte?
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.
hola midu!!! va a seguir esto?!
Deberían hacerte ministro de programación che
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
como certifico que aprendí next14 con midudev? lo quiero subir a mi cv 🤣
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 :(
Y la autentificación en la siguiente clase ? 😩
necesitamos un curso de angular específicamente angular 17 POR FAVOR #midulive
y donde esta el codigo fuente??, algun link de github?? xd
¿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.
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.