¿Por qué Nextjs sobre React?
HTML-код
- Опубликовано: 26 дек 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
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
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!!
Este enfoque señalando los puntos fuertes de Nextjs de forma tan directa me ha encantado.
Excelente video :)
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!
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
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.
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
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!!!
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.
Se ve que te facilita la vida , que es al final lo que necesita el developer
Excelente video, diste un muy buen contexto de lo que es Nextjs, muchas gracias !!!
Excelente Fazt! A Full más contenido de Next será muy bienvenido !!!
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 explicación, claro y al punto. 👍 ese es el tipo de videos que se necesita al comprar dos frameworks!
Ya hasta da miedo la velocidad con la que sacas videos Xd ere un crack
The timing for when it went out was perfect. Like it was planned
You are amazing, I just switch to soft softs and I am loving everytNice tutorialng about it. It much easier then my last program.
Super interesante!!! Me dio ganas de aprender React para poder ir luego por Nextjs
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.
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
Creo en FAZT todopoderoso que me fortalece, muchas gracias FAZT
Usted es un crack mi pana, muchas gracias por los videos que andas subiendo ultimamente esta muy pro!
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 ?
El video que necesitaba. Muchas gracias. Sigue subiendo contenido avanzado me ayuda mucho.
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
muy buen video! (me esperaba menos la verdad y la verdad que lo he comprendido muy bien y con todos los detalles :D )
Excelente, estoy trabajando con Next y me gusta mucho, recomendado totalmente
Siempre que necesito algo aparece un video tuyo recién subido con la solución 🌷
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
Muy buenooo. Queremos más con next js.
Mu gustó mucho Next.js no lo conocía, soy nuevo en React.
Gracias por compartir conocimiento Fazt
Qué magistral explicación... Muchas gracias Fazt
Gracias Fazt. Eres un crack! 🚀💪
Tremendo, gracias por el video! me animo a aprenderlo y empezar un proyecto en Next
Clarisimo como siempre, muchas gracias!
Thank you so much for all these tutorials bro. So much valuable knowledge
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
buen video, espero mas sobre NEXT JS un tutorial completo pero rapido seria genial :D, gracias FAST
Muy bien explicado, se lo pasare a mi hermanito 👍😎
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
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 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
Muy bien explicado, grcias!
muy buen overview, gracias!
El mejor canal de programación
Excelente video, muchas gracias
Fantástico video... De verdad, fantástico... Gracias.
Buen video, muchas gracias por compartirnos tan buen material
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
En lugar de usar nodejs para backend se puede usar django rest framework?
Bro te amo un monton eres un super crack!!
TNice tutorials should be the first video that pops up when you're new to making soft
Buenas Noches... Una pregunta... con nextjs se puede ejecutar librerias de nodejs como wabot del lado del navegador ?
Gracias por compartir conocimiento.
Genial ya va siendo hora de aprender Next.js
Esto es increible!
Cuál es el beneficio de hacer fetch en el backend? En lugar de hacerlo en el frontend 🤔
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
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:
ruclips.net/video/SiUM8vYeuu0/видео.html
Y este es otro con postgreSQL:
ruclips.net/video/fle43mKDLSI/видео.html
de TypeORM no he creado ejemplo aun, pero lo anoto para elaborar algo muy pronto.
Maestro de maestros.
Qué maravilla, Fazt tienes un curso de next me parece de hace uno o dos años, crees que nos pueda servir ¡? saludos capo
Extraño esos años donde todos amaban los estadares y no habian 40.000 formas de hacer lo mismo.
siiiii
Excelente Material Crack!!!
Buen video!!
Podrías hacer un ejemplo con nextjs como front y backend en go?
Thank you, it works perfect!
Porfa un proyecto con NextJS, ReactJs, NodeJS, Mongo /MySQL ! seria la hostia.
Hace buen rato ya he publicado uno de MySQL: ruclips.net/video/7vBSeFjJCww/видео.html
pero voy a crear un nuevo proyecto pronto :)
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
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??
Una consulta fazt, en cuanto a precios vercel es muy pero muy caro y otros servicios como cloudflare workers no es compatible con next js, donde recomiendas desplegar proyectos de next de TAL manera que tenga un balance entre compatibilidad y precio?
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
Que buen video
Hola. Estoy aprendiendo a programar y uso github y git. Para hacer la conexion desde tu pc a github...Es mejor hacer la union git con github por ssh, token, oauth app? ¿ Cuál es más seguro para tu pc?
¿si se hace por ssh es necesario hacer honeypot en ese puerto 22 (y al ssh ponerlo en otro obviamente)? Miedo que se metan por puerto abierto
O que hakeen githib y tengan mi llave publica y se metan a mi pc...
Me da miedo eso
¿El puerto ssh se puede abrir solo cuando se va a usar y cerrarlo cuando lo deje de usar?
Interesante y cual sería la comparación con vite y si se puede usar vite y nextjs o ya no es necesario, también para su deploy sin que sea en vercel
En vite solo hay un plugin para SSR que seria este:
vite-plugin-ssr.com/
No se puede usar vite y nextjs, proque Next es un framework encima de React, de hecho tiene reemplazos para modulso de react, incluso tiene un modulo para compilar basado en rust que seria este:
swc.rs/
Y por supuesto puedes desplegarlo en cualquier nube, solo necesitas saber que caracteristicas estas usando por ejemplo:
si generas solo archivos estaticos puedes desplegarlo en Hostings compartidos, github pages, netlify, firebase, etc
si usas SSR si necesitas Nodejs, por lo que necesitas de una nube como Heroku, Vercel, o tu propio VPS de AWS, GCP o digitalocean
y si usas solo react, sin SSR, lo puedes desplegar de la misma forma que react
Is it the last build? Can't find live version :(
Hola! Lo que no estendí de las sever side props es, si por ejemplo el endpoint cambia los datos después de que hice el build a mi me quedaría información desactualizada?
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
Tengo una duda en las rutas como puedo manejar los nombres si quiero cambiar de idioma?
Gracias por el video!! qué OS estás usando??
Este es Linux, específicamente la distro Xubuntu
Qué terminal usas y que tema de vs code?
Tienes planeado hacer un proyecto de React/NextJs+ NodeJS + RabbitMQ?
Tambien quiero empezar a aprenderlo con GraphQL, que me imagino es muy facil con Apollo, solo que aun no he profundizado demasiado en lo del backend directamente en Next, se puede integrar un Apollo Server Express en NextJS? o como? eso es seguro? tengo muchas dudas de eso, pero bueno cuando llegue a esa parte ya las estare resolviendo, saludos Fazt
No entendi esa parte del despliegue, lo sube al git de vercel o al github propio?
Un tuto completo de backend y frontend con nextjs🙏
ya se puede hacer microfrontends en next?
I thought it was a hoax, but everything works!
I love NextJS 🔥🔥
Cómo se puede hacer para que no podamos acceder a la parte del API desde el navegador? es decir, que nuestro front pueda acceder a esas llamadas, pero que nosotros no podamos simplemente pegarle al api desde cualquier parte
Thank you for sharing this tutorial
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?
Hay algún modo de que en la navegación algunas de las rutas se hagan privadas?
Tus videos son excelentes. Hay canal de Discord de la de comunidad?
Hola Manuel, Gracias. Claro, te dejo el enlace del discord:
discord.gg/JpnY3YqzCN
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
que sistema linux estas usando y que tema?