¿Por qué Nextjs sobre React?
Вставка
- Опубліковано 5 вер 2024
- Si desarrollas aplicaciones en React, es posible que hayas escuchado de Nextjs, un framework Web que esta basado en React. En este video te mostraré las diferencias practicas y porque muchas veces cuando tengo que desarrollar aplicaciones web tanto Frontend como Backend escojo este framework sobre React. Nextjs posee un enrutador, la forma de crear APIs (REST APIs y GraphQL APis), optimizacion de Scripts e Images, multiples formas de renderizado (SSR, ISR, SSG, Client Side Rendering) y la facilidad de despliegue usando Vercel con un simple comando.
Paginas mostradas en este video:
nextjs.org/doc...
react-location...
reactrouter.com/
vercel.com/
github.com/jam...
Tutorial de React Router 6:
• React Router Dom V6 - ...
🎥 Videos Recomendados:
Github Pages npm ➜ • Github Pages | Sitios ...
Mongodb Visual Studio Code ➜ • Mongodb para Visual St...
Mongoose ➜ • Mongoose | Introduccci...
Curso de Nodejs ➜ • Nodejs Curso Desde Cer...
Thunder Client ➜ • Thunder Client - Postm...
Variables de Entorno en Nodejs ➜ • Variables de Entorno e...
Curso de Git ➜ • Git y Github | Curso P...
Rest client VSCode ➜ • Rest Client | Extensio...
Mongodb Atlas ➜ • MongoDB Atlas, NoSQL e...
👨💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ bit.ly/3ijsVNW
SiteGround ➞ bit.ly/31u9ZEk
DigitalOcean ➞ m.do.co/c/8ef2...
Expo ➞ bit.ly/2WpYKtx
Cloudinary ➞ bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9
Más información en:
fazt.dev
Este tutorial es una actualización de un ejemplo antiguo:
• React 16, Aplicación d...
#nextjs #reactjs #vercel
Lo que más me agrada es que estas siendo cada vez más constante y me alegra y nutre ver tus videos, saludos Fazt 🌱
Tambien estoy renovando mis videos viejos, y apuntando todas las ideas de los comentarios :)
Saludos Tiuq
completamente de acuerdo!
@@FaztCode hay algo que reemplace el uso de los useEffects y los useState?
@@domandoelmercado8195 en el caso de useState tienes useContext y librerias como Redux o Signals de Preact
Estaría genial un proyecto CRUD usando react/nextjs + nodejs + Mongodb como un blog o portafolio autoadministrable y ver como seria el proceso desde nextjs (front-end y back-end en uno mismo). saludos Fazt y gracias por tus geniales videos!!
48.000 visualizaciones y 257 comentarios, es evidente que también en el área de IT existen "caranchos" que silenciosamente se alimentan de mentores que comparten generosamente no sólo sus conocimentos sino también su tiempo. Esta es la causa por la que después muchos se quejan que los Sr o lideres son celosos de la información que manejan o que simplemente no ayudan a los Jrs. Yo soy aprendiz pero en la vida hay que ser agradecidos de gente como vos, así sea con un comentario que no cuesta nada. Un abrazo desde Argentina
Excelente video :)
Este enfoque señalando los puntos fuertes de Nextjs de forma tan directa me ha encantado.
Increíble tutorial! Me ha quedado bastante más claro con tu tutorial que leyendo la documentación. Sinceramente no encuentro razones por las que no usar Next.js para todos mis proyectos de React de ahora en adelante. Además, la principal desventaja que tenía React para mí era que no indexaba en Google al ser una aplicación cliente, con esto se soluciona todo. Muchas gracias por el Tutorial, te llevas un sub :D
Explicas bien, vas al tema, nada de rodeos. Gracias por compartir su conocimiento.
Se necesitan más videos como estos que motiven a estudiar otras cosas!
ESTA BRUTAL! Eso de tener el Back-End y Front-End en uno mismo esta super genial! :O
Con PHP y cualquier framework como laravel también lo tienes
XD si laravel con Vue es del putas mas inertia es una locura
@@w3b0nauta solo que mezclas tecnologías como php, javascript, blade
@@w3b0nauta o django y python
Me estás diciendo que es como si yo mezclara springboot con angular en un solo lugar? Qué locura ha de ser encontrar un bug
Llevo un par de años con React y nunca había revisado Next y me ha encantado. Entre esto y una cuenta de Mongo, tienes un sistema entero, solo tocaría comprar un dominio y puedes tener toda una aplicación funcional trabajando si el alcance es pequeño super barato o directamente gratis. Excelente alternativa para el típico cpanel con php/laravel y mysql.
Que excelente...He leído y leído.. pero este tuto cubre todo para estar claro... detalles como que la propiedad layout de la etiqueta Image ya está deprecada... imagino que en otras también veremos cuando actualizas este Tuto... Gracias!!!
Se ve que te facilita la vida , que es al final lo que necesita el developer
Está buenazo el Next.js para fullstack. Buen vídeo. A ver si también haces un review de Medusa JS, que, por lo que leí, lo hicieron a partir de Next.js.
no te recomiendo, estarás creando un monolito.
@@alexlodeon7143 next no es monolito ?
Ya hasta da miedo la velocidad con la que sacas videos Xd ere un crack
THANK YOU!!! TNice tutorials is such an amazing tutorial. I just got soft soft today and was playing around on it but had no clue how to really use it.
Justamente he empezado a trabajar con Next, y es una excelente herramienta. Excelente comparación y explicación
Chido justo lo que necesitaba para crear las páginas de Casino para mis clientes con Billetero y Caja + los Desarrollos de NFTs y sus páginas que me han solicitado. No creí que Nextjs fuera tan bueno, vine utilizando Rect por todo este tiempo y ahora que me prendiste la lamparita cambiaré mi Estrategia de Negocio. S2.
The timing for when it went out was perfect. Like it was planned
Excelente explicación, claro y al punto. 👍 ese es el tipo de videos que se necesita al comprar dos frameworks!
te eché de menos en la JSConf que se hizo en Chile. Grande Fazt, sigue creciendo y muchas gracias por compartir todo tu conocimiento
Excelente video, diste un muy buen contexto de lo que es Nextjs, muchas gracias !!!
Super interesante!!! Me dio ganas de aprender React para poder ir luego por Nextjs
Excelente Fazt! A Full más contenido de Next será muy bienvenido !!!
Woow que buena revisión general... Ya tengo una idea clara de lo puede llegar hacer... No tenía ni idea lo de que cambia la imagen y la hace menos pesada
Excelente video, estaria muy bien si pudieras explicar como hacer un deploy de next en un servidor propio sin usar vercel, saludos
El proceso es el mismo que con express
voy a tratar de publicar varios ejemplos de despliegue, porque veo que muchos tienen la mismas dudas :)
@@FaztCode sí, por favor xD
Cada dia me gusta mas Next, empiezo ha mejorar por fin de la espalda y le estoy metiendo de todo para que quede un super portafolio con todo lo que he aprendido contigo estos meses y en otros sitios. Aunque la calidad de explicar paso a paso de una forma chamanica solo la tienes tú :I Cuando trabaje de esto y pueda visitarte te sacaré el tema con mucho cariño jeje :) parezen mundos apartados pero tu humildad, tu pasión de explicar y compartir para el bien de todos es lamaistico ;) me encantó al final me perdi un poco porque queria venir a darte las gracias, grácias! y ahora me lo acabo de grabar a fuego :)
Queremos saber mucho más de entender next.js y aprovechar sus posiblidades. El otro dia te pregunté de incluir react en next, y supongo que estaba pensando en un trabajo enlazarlo con el que aprendí contigo de la api de pelicula para poner un ejemplo de csr, entre otros ejemplos de tiendas echas con ssg, ssr , isr, algo de maching learning, estoy practicando three, algo de web3.0 , dapps i apps con react native, algo de electron o tauri si sacas algo más xulo, creo que puede quedar bien, le paso framer motion que estoy aproendiendo, más lo que se me olvide de todo lo que nos enseñaste y poco que vi porai. También pensaba en partir del portafolios de django y mezclarlo con next, y strapi con firebase, etc. a ver si puedes ir guiandonos cada vez a más. el video fue precioso y estoy a medias del nuevo de practica react. Quiero acabar cosas de maching learnig con tensor flow y demás que tambíen estoy aprendiendo para ponerlo al portafolios pero cuando sale algo tuyo no puedo evitar hacer break de todo y ponerme a lo tuyo, y con los apuntes etc tardo mucho, a veces diez veces lo que dura un video cuando es de los hards. pero los disfruto, como los lights que los puedo ver del tirón y también es un gustaso, los de más teoria y menos coding
me avisarás si haces un twithch!? me hace ilusion verte en riguroso directo :D
Excelente entrada a Nextjs. Muchas gracias por tanto conocimiento Fazt.
You are amazing, I just switch to soft softs and I am loving everytNice tutorialng about it. It much easier then my last program.
Siempre que necesito algo aparece un video tuyo recién subido con la solución 🌷
Exelente video 👌👌, yo apenas estoy empezando a aprenderlo y me doy cuenta que al menos lo basico no es nada dificil, estaria muy bueno un video de conceptos avanzados para aprender de NextJS, aun no he llegado a eso asi que estaria exelente jaja
Creo en FAZT todopoderoso que me fortalece, muchas gracias FAZT
Muy buenooo. Queremos más con next js.
Extraño esos años donde todos amaban los estadares y no habian 40.000 formas de hacer lo mismo.
siiiii
Muy buena introducción. Entonces con next puedo crear app de front y back juntas y desplegarlas en vercel? solo tendria que tener la BD en algun lado y nada mas?
Así es. Le has atinado
Pero el backend se hace con node.js no? O solo Next.js para ambos front y back
Incluso si implementas SQL lite podrías tener tu base de datos allí mismo… Aunque claro, sólo se recomienda para desarrollos básicos
@@NuwaHWeil si nodejs obviando algunas cosas y sin tener que configurar nada
@@NuwaHWeil Claro, es como si react y node hubieran hecho la fución de dragon ball y en vez de salir gogeta salió nextjs xD
El video que necesitaba. Muchas gracias. Sigue subiendo contenido avanzado me ayuda mucho.
Mu gustó mucho Next.js no lo conocía, soy nuevo en React.
Gracias por compartir conocimiento Fazt
Tremendo, gracias por el video! me animo a aprenderlo y empezar un proyecto en Next
Excelente video, ojala hagas unos similar de astro que entiendo es la respuesta de Netlify a Next de vercel con conceptos como la hidratación parcial.
Ya está planeado el de Astro, probablemente sea publicado la semana entrante
Excelente, estoy trabajando con Next y me gusta mucho, recomendado totalmente
Me gusta mucho Express, pero últimamente prefiero utilizar más Next que React/Express debido al SEO, además del router de Next es excelente. Para complementar si necesito algo de client-side data fetching me las apaño con SWR. Excelente video Fazt, como siempre pura calidad.
Yo intenté hacer algo con react/express ssr pero al final me marcaba un error de que el document no está definido, al parecer en el lado del cliente intentaba acceder al document que no estaba definido, o no existía. Algo del servidor provocaba , creo. Y viendo esto, me recomendaban next js ¿Tuviste algún problema al hacer ssr en React?
@@eduardohernandezsoto785 ninguno en NextJS todas sus características son ventajas (excepto los Middlewares que son un dolor de cabeza) fuera de eso si te recomiendo que aprendas NextJS ya que es el paso natural después de React
Estaría bien implementar autenticación con JWT, usando nextjs se vuelve algo complicado por el SSR
Justo estoy preparando un ejemplo, hay varias formas de autenticación de hecho
buen video, espero mas sobre NEXT JS un tutorial completo pero rapido seria genial :D, gracias FAST
Usted es un crack mi pana, muchas gracias por los videos que andas subiendo ultimamente esta muy pro!
Qué magistral explicación... Muchas gracias Fazt
TNice tutorials should be the first video that pops up when you're new to making soft
Muy bien explicado, se lo pasare a mi hermanito 👍😎
Clarisimo como siempre, muchas gracias!
Me gusta mucho este framework, solo me molesta que cuando desarrollas y debes usar SSR por motivos de lógica, a veces se siente un poco el tiempo de renderizado del servidor, luego que haces build desaparece y se me pasa, se agradece que con el tiempo ya sea un FW con madurez para tomarlo en serio para nuestros proyectos.
Si se nota bastante ese aspecto en desarrollo, pasa lo mismo con SSG en desarrollo
Porfa un proyecto con NextJS, ReactJs, NodeJS, Mongo /MySQL ! seria la hostia.
Hace buen rato ya he publicado uno de MySQL: ua-cam.com/video/7vBSeFjJCww/v-deo.html
pero voy a crear un nuevo proyecto pronto :)
Thank you so much for all these tutorials bro. So much valuable knowledge
muy buen video! (me esperaba menos la verdad y la verdad que lo he comprendido muy bien y con todos los detalles :D )
muy buen overview, gracias!
Excelente Material Crack!!!
Muy bien explicado, grcias!
Esto es increible!
Fantástico video... De verdad, fantástico... Gracias.
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
Buen video, muchas gracias por compartirnos tan buen material
The Odin Project reference!
Excelente video, muchas gracias
Bro te amo un monton eres un super crack!!
Un tuto completo de backend y frontend con nextjs🙏
Gracias Fazt. Eres un crack! 🚀💪
nextjs es comodo pero es de mantequilla, cuando llegas a proyectos que tienen muchos comportamientos, componentes y necesitan una reactividad buena se muere miserablemente por precisamente abstraer demasiado, he estado en varios proyectos en donde se empieza con nextjs y en el mediano termino se termina migrando a react puro. para formularios y cosas sencillas nextjs es tu herramienta, si es una app compleja ni la mires
En que te basas para llegar a ésa conclusión? Explicaciones concisas por favor
@@giancarlo3974 dos cosas especificas que siempre molestan mucho en nextjs, los contextos y los use effect, como nexjs tiene el server-side y los hooks en el navegador cuando vas a hacer interacciones complejas entre varios componentes donde los mismos se construyen o modifican en tiempo de ejecucion muchas veces hay situaciones en las que se disparan de manera aleatoria causando condiciones de carrera (por ejemplo un componente puede estar re-renderizandose respondiendo a un cambio de datos del contexto o del manejador de estados y ese re-renderizado llama al hook del serverside de manera no explicita y no solicitada borrando los datos que estaban lanzando el renderizado, teniendo muchos comportamientos inesperados. este caso en particular lo detecte luego de que mi jefe y dos compañeros por dos dias no sabian porque no funcionaba la creacion de unos componentes dinamicos que creaban a su vez otros componentes no necesariamente hijos, y luego de dos horas de depuración les probe que era una condicion de carrera entre el useeffect general y los useeffect de los componentes dinamicos y para eso hice un servidor back de depuracion que me mostraba los tracebacks de los useeffect donde demostre el orden de lanzado y la no-completitud de las tareas y como se corrompian los estados de los contextos y del manejador de estados, luego de eso un compañero sugirio pasarnos a react porque no encontramos manera de arreglarlo y el TL tomo la decision de dejar de usar nextjs), cosas que no tiene react solo u otras librerias como vue.js donde deterministicamente puedes saber el flujo de la ejecución, y los contextos en nextjs son caoticos y como no estes trabajando con una estructura sencilla son inutiles y te toca ir directamente al manejador de estados, lo que hace que las supuestas ventajas sean solo ciertas para casos especificos donde tienes un arbol de componentes muy estatico y muy jerarquizado, sobre todo cosas tipo formulario donde en efecto nextjs te ahorra tiempo, pero cuando necesitas algo más dinamico hay mucho lio entre las ejecuciones de los hooks de los diferentes componentes y se hace peor con el server side render
@@giancarlo3974 otro punto que no me gusto para proyectos complejos de nextjs es que oculta errores del tiempo de ejecución tanto para las pruebas unitarias como las de integración por lo que es muy facil que esos comportamientos salgan a producción, para depurar cosas de esas he tenido que hacer herramientas externas en backend porque nextjs es muy opaco sobre todo en la ejecución de los hooks del server-side render (cosas que obviamente no se pueden loguear a console.log del navegador y tienes logs de navegador y de servidor inconexos). para mi el mayor error de nextjs es que no tiene reglas claras de ejecución que uno pueda configurar explicitamente, que de ponerse quitaría la comodidad que brinda este framework respecto a otros como vue donde las reglas de ejecución de los hooks si son completamente explicitas. quizas la mayoria de personas nunca tendrá estos problemas con nextjs porque van a hacer cosas sencillas, pero al menos queda la advertencia de que con cosas muy complejas se puede romper muy feo el framework y vas a tener que mudarte a otra cosa
Next.js para el routing y react para el client services
@@henkauser podrías dar ejemplos de proyectos complejos donde suceda eso?
Buen video!!
Podrías hacer un ejemplo con nextjs como front y backend en go?
Genial ya va siendo hora de aprender Next.js
En lugar de usar nodejs para backend se puede usar django rest framework?
Thank you for sharing this tutorial
Thank you, it works perfect!
El mejor canal de programación
A partir de ahora, React ya quita a 'create-react-app' y oficialmente en su nueva documentacion nos dicen que la mejor manera de hacerlo es con NextJS, una oportunidad mas para unir dos tecnologias!
Gracias, me parece muy buen video y me dan ganas de hacer unas pruebas, anteriormente intente entrar en el mundo de React.js pero me fatigo todos los ajustes que necesita y me atrajo mas Angular, ahora tengo conocimientos con Angular, con Vue.js y si aprendo Next puedo completar la trinidad del Front JS
pd: se que esta Svelte y otros 20 lib mas pero no son tan demandados, edemas ya conozco node.js
Gracias por tanto conocimiento fazt
I thought it was a hoax, but everything works!
Gracias por compartir conocimiento.
Me agrada la forma que explicas y se entiende, lo unico que me queda como mala espina es porque ahora han cargado el frontend asi ? es necesario ? si todo esto se puede hacer en un buen backend con javascript vanilla :(, es como complicar mas el frontend
Cuál es el beneficio de hacer fetch en el backend? En lugar de hacerlo en el frontend 🤔
Hace poco use Nextjs como una framework frontend más, solo teniendo en cuenta el ssr, la idea de manejar todo en una misma app, es muy restrictivo y te obliga a usar js para backend lo cual personalmente no me gusta. Por demás Nextjs es grandioso
Lo de Javascript en el backend es porque Nodejs hace el SSR, asi que tambien ofrecen la posiblidad de crear la API. Pero sin ningún problema también se puede usar solo como framework frontend simplemente e igual ofrece SSR, SSG, ISR, y Client Side rendering.
Maestro de maestros.
Buenas Noches... Una pregunta... con nextjs se puede ejecutar librerias de nodejs como wabot del lado del navegador ?
hace pocas semanas me pidieron terminar un proyecto (estaba al 10%), me dijeron que era react y al entrar era nextjs y basicamente tuve hacer un curso intensivo y en su mayoria ensayo y error XD, mas aun cuando soy mas de angular
una duda necesito consumir imagenes por ftp y con react me da errores de webpack investigue que al parecer es imposible conectar directamente. saben si con next esto cambia y es posible
Tendras algún video explicando como crecería o cuál sería el patrón a seguir para que la estructura del código y carpetas siga ordenada??
Excelente review. Cuál sería la forma correcta de implementar un orm cómo Mongoose o typeorm en next ?
Hace ya meses atras he creado un ejemplo con mongoose, te lo dejo por aqui:
ua-cam.com/video/SiUM8vYeuu0/v-deo.html
Y este es otro con postgreSQL:
ua-cam.com/video/fle43mKDLSI/v-deo.html
de TypeORM no he creado ejemplo aun, pero lo anoto para elaborar algo muy pronto.
Hola Fazt
Si puedes publicar un tutorial de
-Color (como usas el color en tus proyectos Diseño UX)
Gracias
I tried and it is installed thank u very much anda
Tengo una duda en las rutas como puedo manejar los nombres si quiero cambiar de idioma?
No entendi esa parte del despliegue, lo sube al git de vercel o al github propio?
a long ti and that's where I learned to write s and learned soft theory. I wanted to get into electronic soft so good but it's almost
Gracias por el video!! qué OS estás usando??
Este es Linux, específicamente la distro Xubuntu
Oye fazt, una pregunta.. estas en mac o es algun tipo de tema? me gusta mucho como se ve
Ese es Linux, la distro se llama Xubuntu :)
Gracias Fazt
Este tipo me tiene hackeado, cada vez que tengo una duda de algo, saca el video perfecto o el short perfecto, un duro, pero cada vez ehhh, sin broma
I am just wondering why you are being so generous with your knowledge?
Tienes planeado hacer un proyecto de React/NextJs+ NodeJS + RabbitMQ?
Esta bueno el next
Mmm, déjame ver si entendí
Si se quiere una página (Sólo Front-End) web sin Back-End, se escoge React
Y si se quiere una aplicación web con Front-End y Back-End, se escoje Next js
¿?
Digamos que ya tengo tareas creadas, le doy click a una tarea y se carga la información respectiva en el formulario, pero resulta que ahora no quiero editarla sino que voy a crear una nueva, doy click en el botón que está en el navbar, pero el formulario sigue lleno con la información de la tarea que estaba viendo, cómo hacer para que el formulario quede vacío en ese caso?
Qué maravilla, Fazt tienes un curso de next me parece de hace uno o dos años, crees que nos pueda servir ¡? saludos capo
fazt porfavorcito un tutorial de estooo, eres un crack