Fazt muchas gracias eres el mejor, soy abogado y contigo aprendí a programar, gracias a ti ya hice sistemas administrativos, paginas de internet, tiendas en línea y PWAs, de verdad muchas gracias.
Acabo de seguir el ejemplo, está excelente. Lo único que hay que cambiar al día de hoy es cuando se ejecutan los es incorporar legacyBehavior dentro de la etiqueta Link, es decir queda
Mis respetos señor, hace 4 años que veo tus videos y ahora acabo de conseguir mi primer trabajo 100% remoto. Y como yu hay muchos otros colegas que tienen una mejor calidad de vida gracias a ti. Me encanaría poder contarte toda la historia, saludos desde México. ¡Éxito!
Me hiciste muy feliz @Fazt Code. me funciona perfectamente la base de datos. Era un tema, que yo personalmente, tenía muchas dudas, pero con tus explicaciones he podido resolver mis dudas. Muchas gracias. You 're the best.
Muchas gracias Fazt! justo en mi trabajo estaba buscando alternativas a sweetalert para mostrar mensajes en react que no sean tan intrusivos. No conocia react-toastify
Estoy usando como base este proyecto para usar una pequeña base de datos que tengoen mysql pero surgió un problema cuando obtengo los datos de campos como "contenido" de mi base de datos viene con todas la etiquetas html imagino que lo esta tomando todo como string, alguna idea para investigar. gracias
Por otro lado, para la aplicación del SSR usando el getServerSideProps para crear el query del context lo puedo hacer de forma dinámica... no sé si soy claro... yo necesito que el usuario haga el log in, y con las credenciales obtenidas, traiga del server una información específica... de antemano gracias!
hola Fazt, excelente muchas gracias por tu video, pero tengo una inquietud: cuando ingreso un carater tipo texto al input precio, no me sale ningun error y me guarda en la base de datos un 0. hize una prueba de cambiando el nombre d la tabla de base de datos y si me arroja el error normal, o ingresando el dato de tipo texto directamente desde mysql tambien me muestra el error, ya verifique y el campo PRICE ESTA EN DECIMAL..... te gradecieria mucho una respuesta... Gracias
Fazt por que cuando llamo por consola la variable data donde estan los campos de la base de datos y su respectivo valor, hay un campo que está entre comillas ('') como si fuera un string, ejemplo : 'description': 'some product', pero solo es un campo, alguna solucion? no puedo ver el problema :c
@@FaztCode gracias Fazt por lo que haces para nosotros. Justo debo sacar datos de una base en SQL con Nextjs y me viene genial una actualizacion, gracias nuevamente.
Fazt, con la actualización de next, el useRouter pasa a ser pasa a ser parte del next/navigation y como tal devuelve undefined al pedir el router.query. Claro que actualmente también se puede user el useRouter de next/router, pero me gustaria saber como se puede jalar el query con el nuevo navigation
planeo renovar este tutorial pronto, pero creo que te puedes dar una idea con un ejemplo que publique hace poco, donde uso la carpeta app y next/navigation: video: ruclips.net/video/Ac9J_yyQqOI/видео.html codigo: github.com/fazt/nextjs-context-crud
Hola Fazt! gracias por tu videos, son geniales.. Necesito integrar un Kanban Board a una pagina web que desarrolle (gracias a ti) con python y flask. Como me recomiendas que lo pueda hacer? Gracias de antemano
Puedes hacerlo en DigitalOcean Manage Databases: www.digitalocean.com/products/managed-databases cuesta 15$ por mes, pero si te creas una cuena nueva con este enlace te regalan 100$ gratis m.do.co/c/8ef261d77de5
Excelente explicación como todos tus videos! … pregunta, si next.js tambien es backend, cuando decidís usar nest.js o usar el backend de next.js? Gracias!
Hola Matias, las api Routes de Nextjs son bastante convenientes si quieres mantener todo el proyecto unido en un solo lugar y quieres empezar a desarrollar un proyecto web principalmente, pero cuando va creciendo el proyecto, si buscas escalar tu aplicacion backend y que sea accedida de distintos clientes, sin enfocarte en la aplicacion web, seria ideal que este en su propio repo escrito con algun framework de Nodejs. El principal propositio de las API Routes no es reemplazar las API de otros proyectos, sino el tener la posibilidad de preprocesar datos que llegaran a nuestro frontend. Aunque como puedes ver en este ejemplo puedes usarlas inicialmente como una tipica API REST sin problemas
Muy bueno 👏👏 una consulta fazt, no seria mejor practica que en la funcion getStaticProps aceda a una funcion de api en lugar de hacer un fetch a si misma? es posible eso?
Tanto con static props o get server side props, ambos pueden hacer peticiones el asunto es que static props las paginas se convierten en HTML, por eso se llama estatic. Así que tus datos solo cambian en desarrollo en producción se mantienen igual, con get server se hace una consulta en cada petición de la página. Aunque si quieres contenido estático y quieres que se actualice cada cierto tiempo nextjs tiene Incremental static regeneration, que genera la página HTML pero después cierto tiempo hace una petición nueva y genera un nuevo html actualizándose, es como un intermedio entre static y server
Hola Fazt buen tuto hermano, pregunta soy nuevo esto de vincular next (react) con mysql y quería saber si mi backend rest api estará hecha con springboot y manejare mysql como base de datos, hay problemas si lo hago con mysql2 npm? tengo como objetivo hacer un ecommerce es parte de mi proyecto fin de ciclo, espero tu respuesta bro, gracias...
Bueno, si tu backend ya estará creado con Java y MySQL. No tiene mucho sentido que tambien crees una REST API desde Nextjs. Lo que puedes hacer, es directamente consumir la REST API tal cual como si fuera una aplicación de React, o hacer simplemente las peticiones de SSR. El Ejemplo que he hecho aqui es crear una REST en Nextjs con MySQL y luego consumirla. en tu caso ya no harias la REST API solo la parte en donde hacemos las peticiones.
Si necesitas administrar un estado global en una aplicacion intermedia/grande es bastante probable que llegues a usar Redux, pero es una aplicacion con algunas paginas tan solamente facilmente puedes hacerla con Context y Reducer de React
Gracias Fazt... Esto está genial... ahora te pregunto, para crear la conexión a MySQL si mi Apliacion Web la usaran diferentes clientes, puedo configurar el nombre de la base de datos en un .env?
Anibal: Complementando lo que dice Fazt, yo acabo de hacer eso y puse todas mis variables de ambiente en un env.local (no me resultó sólo con env), además lo tengo como archivo oculto y lo agregué al .gitignore para ptroteger datos sensibles. De ahí y sin hacer más nada, leí las variables de ambiente de forma normal con process.env. Espero te ayude (aunque este comentario es algo tardío). Saludos desde Chile.
Hola Fazt, sabrias cual podria ser la razon que me sale - Error: User 'uvc86lod7vjemhjp' has exceeded the 'max_user_connections' resource (current value: 5) - y tengo que estar reiniciando el servidor?
Hola Renzo. El asunto es que en nextjs como llama la función de conexión en cada petición se crea una nueva conexión así que te recomiendo cambiar el módulo de npm llamado mysql con este otro llamado serverless-mysql www.npmjs.com/package/serverless-mysql El módulo hace lo mismo solo que maneja esas múltiples conexiones y está creado para estos casos
Hola Renzo. Acabo de actualizar el repositorio con el nuevo modulo, y hay unos pequeños cambios, dejo el respositorio: github.com/FaztWeb/nextjs-mysql-crud
Fazt, me funciono bien la propuesta de cambiar el paquete para usar mysql. Gracias. Tengo otra duda que me está rondando por la cabeza. Estoy utilizando el servicio gratuito de clevercloud (como muestras en un video) tú crees que por ser una base compartida, este pasando el error de los usuarios conectados?
hola fazt podrias hacer un tutorial con streaming video usando sockect io en backencd para conectarte streaming online para hacer video en directo streaming seria muy bueno ??? espero respuestas jajajaja
@@FaztCode Muchas gracias Fazt, soy abogado con tus videos aprendí a programar ahora hago sistemas e incluso los vendo, tu me enseñaste, de verdad muchas gracias, por favor no dejes de hacer esta labor, cambias vidas!!!
Hola Luciano, de momento solo he creado un ejemplo de subida de imagenes en Nextjs usando su ultima version 13: ruclips.net/video/b691Iqh87jY/видео.html
@@FaztCode muchas gracias . Decis que lo pueda adaptar con este ejemplo? Así queda un gestor de producto completo . Entonces de ahí puedo crear otro front en nextjs y consumirlo para un e comers
Bueno si hay un servidor, el asunto con nextjs es que es un verdadero framework fullstack, es decir puedes ejecutar código que es de Nodejs y código que solo es de React. Evitándote tener que crear dos proyectos por separado
Fazt muchas gracias eres el mejor, soy abogado y contigo aprendí a programar, gracias a ti ya hice sistemas administrativos, paginas de internet, tiendas en línea y PWAs, de verdad muchas gracias.
Ojalá estés ganando mucho dinero porque te lo merecés. Gracias !!
Acabo de seguir el ejemplo, está excelente. Lo único que hay que cambiar al día de hoy es cuando se ejecutan los es incorporar legacyBehavior dentro de la etiqueta Link, es decir queda
Mis respetos señor, hace 4 años que veo tus videos y ahora acabo de conseguir mi primer trabajo 100% remoto. Y como yu hay muchos otros colegas que tienen una mejor calidad de vida gracias a ti. Me encanaría poder contarte toda la historia, saludos desde México. ¡Éxito!
Éxitos Vlad. Un gusto que te sea útil el contenido
Me hiciste muy feliz @Fazt Code. me funciona perfectamente la base de datos. Era un tema, que yo personalmente, tenía muchas dudas, pero con tus explicaciones he podido resolver mis dudas. Muchas gracias. You 're the best.
Fazt la comunidad hispana de desarrollo está en deuda contigo por tu gran labor, muchas gracias.
gracias gracias ..... estupendo ejercicio,.... felicitaciones 🥰🥰🥰😍
Gracias por tanto Fazt querido.
Siento que este curso por alguna razón es especialmente y exclusivamente solo para mí jaja, gracias Fazt, lo estaba esperando!
Un sueño hecho realidad 🤩🤩🤩
Me lo gozare como no lo imaginas.. Gracias Fazt
Muchas gracias Fazt! justo en mi trabajo estaba buscando alternativas a sweetalert para mostrar mensajes en react que no sean tan intrusivos. No conocia react-toastify
También está react-hot-toast que tiene código mucho más simple y las alertas se ven muy bien
Muchas gracias por el video muy claro como siempre 👏👏👏👏
Eres un crack, aprendí muchísimo. Muchas gracias
Se más constante, se te extraña Fazt!
Lo intentaré :)
muy buen trabajo
Excelente hermano
Estoy usando como base este proyecto para usar una pequeña base de datos que tengoen mysql pero surgió un problema cuando obtengo los datos de campos como "contenido" de mi base de datos viene con todas la etiquetas html imagino que lo esta tomando todo como string, alguna idea para investigar. gracias
Por otro lado, para la aplicación del SSR usando el getServerSideProps para crear el query del context lo puedo hacer de forma dinámica... no sé si soy claro... yo necesito que el usuario haga el log in, y con las credenciales obtenidas, traiga del server una información específica... de antemano gracias!
Excelente! Y con next 12 💪
hola Fazt, excelente muchas gracias por tu video, pero tengo una inquietud: cuando ingreso un carater tipo texto al input precio, no me sale ningun error y me guarda en la base de datos un 0. hize una prueba de cambiando el nombre d la tabla de base de datos y si me arroja el error normal, o ingresando el dato de tipo texto directamente desde mysql tambien me muestra el error, ya verifique y el campo PRICE ESTA EN DECIMAL..... te gradecieria mucho una respuesta... Gracias
TailwindCSS is the King
Fazt, si aplico este ejemplo con next 13 no tendria no cambiaria nada?
Fazt por que cuando llamo por consola la variable data donde estan los campos de la base de datos y su respectivo valor, hay un campo que está entre comillas ('') como si fuera un string, ejemplo : 'description': 'some product', pero solo es un campo, alguna solucion? no puedo ver el problema :c
hola fazt.. como haces cargar imagentes con type file? sin que te salga el fakepath.. desde ya muchas gracias
Fazt, una pregunta, recomendas hacer el desarrollo backend todo en Nextjs? Entiendio que tiene algunas limitaciónes
Master 🔥
Todo un crack
Hola bro podrias pasar visual Studio profesional comprimido vengo de video de visual Studio code q hiciste en 2019.
Holaaaa. Habrá un tutorial similar para nextjs13?
Cómo haría si quisiera insertar imágenes también?
Gracias!
Este video ya lo estoy actualizando, muy pronto se publicará la versión nueva de este ejercicio :)
@@FaztCode gracias Fazt por lo que haces para nosotros. Justo debo sacar datos de una base en SQL con Nextjs y me viene genial una actualizacion, gracias nuevamente.
Fazt, con la actualización de next, el useRouter pasa a ser pasa a ser parte del next/navigation y como tal devuelve undefined al pedir el router.query. Claro que actualmente también se puede user el useRouter de next/router, pero me gustaria saber como se puede jalar el query con el nuevo navigation
planeo renovar este tutorial pronto, pero creo que te puedes dar una idea con un ejemplo que publique hace poco, donde uso la carpeta app y next/navigation:
video: ruclips.net/video/Ac9J_yyQqOI/видео.html
codigo: github.com/fazt/nextjs-context-crud
@@FaztCode me encantaría que lo ronovaras , estoy a la espera , muchas gracias por tus aportes
Hola Fazt! gracias por tu videos, son geniales.. Necesito integrar un Kanban Board a una pagina web que desarrolle (gracias a ti) con python y flask. Como me recomiendas que lo pueda hacer? Gracias de antemano
Dónde podría subir gratuitamente mi bd hecho en sql ???
Puedes hacerlo en DigitalOcean Manage Databases:
www.digitalocean.com/products/managed-databases
cuesta 15$ por mes, pero si te creas una cuena nueva con este enlace te regalan 100$ gratis
m.do.co/c/8ef261d77de5
Excelente explicación como todos tus videos! … pregunta, si next.js tambien es backend, cuando decidís usar nest.js o usar el backend de next.js? Gracias!
Hola Matias, las api Routes de Nextjs son bastante convenientes si quieres mantener todo el proyecto unido en un solo lugar y quieres empezar a desarrollar un proyecto web principalmente, pero cuando va creciendo el proyecto, si buscas escalar tu aplicacion backend y que sea accedida de distintos clientes, sin enfocarte en la aplicacion web, seria ideal que este en su propio repo escrito con algun framework de Nodejs. El principal propositio de las API Routes no es reemplazar las API de otros proyectos, sino el tener la posibilidad de preprocesar datos que llegaran a nuestro frontend. Aunque como puedes ver en este ejemplo puedes usarlas inicialmente como una tipica API REST sin problemas
Muy bueno 👏👏 una consulta fazt, no seria mejor practica que en la funcion getStaticProps aceda a una funcion de api en lugar de hacer un fetch a si misma? es posible eso?
Tanto con static props o get server side props, ambos pueden hacer peticiones el asunto es que static props las paginas se convierten en HTML, por eso se llama estatic. Así que tus datos solo cambian en desarrollo en producción se mantienen igual, con get server se hace una consulta en cada petición de la página. Aunque si quieres contenido estático y quieres que se actualice cada cierto tiempo nextjs tiene Incremental static regeneration, que genera la página HTML pero después cierto tiempo hace una petición nueva y genera un nuevo html actualizándose, es como un intermedio entre static y server
@@FaztCode perdon me equivoque en mi pregunta quise decir gerServerSideProps, igual entendi! muchas gracias
Hola Fazt buen tuto hermano, pregunta soy nuevo esto de vincular next (react) con mysql y quería saber si mi backend rest api estará hecha con springboot y manejare mysql como base de datos, hay problemas si lo hago con mysql2 npm? tengo como objetivo hacer un ecommerce es parte de mi proyecto fin de ciclo, espero tu respuesta bro, gracias...
Bueno, si tu backend ya estará creado con Java y MySQL. No tiene mucho sentido que tambien crees una REST API desde Nextjs. Lo que puedes hacer, es directamente consumir la REST API tal cual como si fuera una aplicación de React, o hacer simplemente las peticiones de SSR. El Ejemplo que he hecho aqui es crear una REST en Nextjs con MySQL y luego consumirla. en tu caso ya no harias la REST API solo la parte en donde hacemos las peticiones.
Fazt puedes hacer un video con django RestFramework, cómo login y crud tmb pls 😥
Buena idea, voy a elaborar unos ejemplos para publicar con varias bases de datos
Tengo una pregunta acerca de redux es necesario con Nextjs
Si necesitas administrar un estado global en una aplicacion intermedia/grande es bastante probable que llegues a usar Redux, pero es una aplicacion con algunas paginas tan solamente facilmente puedes hacerla con Context y Reducer de React
Gracias Fazt... Esto está genial... ahora te pregunto, para crear la conexión a MySQL si mi Apliacion Web la usaran diferentes clientes, puedo configurar el nombre de la base de datos en un .env?
Si en nextjs puedes crear loa archivos de variables de entorno sin problemas. Puedes crear archivos con nombre .env o .env.local y así
Anibal: Complementando lo que dice Fazt, yo acabo de hacer eso y puse todas mis variables de ambiente en un env.local (no me resultó sólo con env), además lo tengo como archivo oculto y lo agregué al .gitignore para ptroteger datos sensibles. De ahí y sin hacer más nada, leí las variables de ambiente de forma normal con process.env.
Espero te ayude (aunque este comentario es algo tardío). Saludos desde Chile.
@@prodrigu75 Muchísimas gracias Pablo querido… cuando la ducha es buena nunca es tarde… voy a hacer lo propio y te dejo saber si en algo me complico
Hola Fazt, sabrias cual podria ser la razon que me sale - Error: User 'uvc86lod7vjemhjp' has exceeded the 'max_user_connections' resource (current value: 5) - y tengo que estar reiniciando el servidor?
Hola Renzo. El asunto es que en nextjs como llama la función de conexión en cada petición se crea una nueva conexión así que te recomiendo cambiar el módulo de npm llamado mysql con este otro llamado serverless-mysql www.npmjs.com/package/serverless-mysql
El módulo hace lo mismo solo que maneja esas múltiples conexiones y está creado para estos casos
@@FaztCode mil gracias Fazt por tu rápida respuesta, lo intentaré y te comento mis resultados 🚀
Hola Renzo. Acabo de actualizar el repositorio con el nuevo modulo, y hay unos pequeños cambios, dejo el respositorio: github.com/FaztWeb/nextjs-mysql-crud
Fazt, me funciono bien la propuesta de cambiar el paquete para usar mysql. Gracias. Tengo otra duda que me está rondando por la cabeza. Estoy utilizando el servicio gratuito de clevercloud (como muestras en un video) tú crees que por ser una base compartida, este pasando el error de los usuarios conectados?
12:11 HELL OWOrld
hola fazt podrias hacer un tutorial con streaming video usando sockect io en backencd para conectarte streaming online para hacer video en directo streaming seria muy bueno ??? espero respuestas jajajaja
Lo apunto para eventualmente crear el tutorial :)
Tienes algun curso de base de datos en venta
Hola, Programadork100, no relamente, pero justo estoy preparando un curso de MySQL para iniciantes para este fin de semana.
@@FaztCode lo espero
@@FaztCode Muchas gracias Fazt, soy abogado con tus videos aprendí a programar ahora hago sistemas e incluso los vendo, tu me enseñaste, de verdad muchas gracias, por favor no dejes de hacer esta labor, cambias vidas!!!
Me encanto pero faltaria como subir imagenes y estaria de 10 o como lo puedo hacer
Hola Luciano, de momento solo he creado un ejemplo de subida de imagenes en Nextjs usando su ultima version 13:
ruclips.net/video/b691Iqh87jY/видео.html
@@FaztCode muchas gracias . Decis que lo pueda adaptar con este ejemplo? Así queda un gestor de producto completo . Entonces de ahí puedo crear otro front en nextjs y consumirlo para un e comers
Can deploy?
You can use vercel to deply nextjs and planetsacle to deploy the mysql database
@@FaztCode thanks :'D
Fazt es un pro y un master, pero se nota que no aprendió en la escuela. las cosa no son tan fáciles como "Cortar y pegar" y ya quedo.
Que pena faltó añadir imágenes al crud.
No sabía que se podía usar el backend sin un servidor, creo que no he entendido muy bien el backend.
Bueno si hay un servidor, el asunto con nextjs es que es un verdadero framework fullstack, es decir puedes ejecutar código que es de Nodejs y código que solo es de React. Evitándote tener que crear dos proyectos por separado