Nextjs MySQL Tutorial (CRUD, Subida de imagenes, Tailwind, Deploy)

Подписаться 254 тыс.

Просмотров 30 тыс.

50% 1

Aprende a crear una aplicacion de Nextjs en su version 13 (app Router, Route Handlers, etc) que se comunique con una base de datos de MySQL y permita hacer las operaciones CRUD ademas de poder subir imagenes a la nube de Cloudinary y estar estilizada usando Tailwind, para finalmente desplegarla en servicios de la nube como (Vercel, Cloudinary y demas).
Curso Recomendados
Curso de React: • Curso de Reactjs desde...
Curso de Nextjs: • Curso de Nextjs desde ...
Código del Tutorial
github.com/fazt/nextjs-mysql-...
Indice del contenido
00:00 Introducción
02:32 Configuración del proyecto
07:57 API Routes
14:07 Conexion a base de datos
21:17 Crear Producto - API
31:13 Listar Productos - API
33:31 Obtener Producto - API
38:44 Eliminar Producto - API
42:28 Actualizar Producto - API
48:20 ProductForm - React
01:08:03 Listar Productos - React
01:19:40 ProductCard - React
01:31:34 Eliminar Producto - React
01:38:40 Actualizar Producto - React
01:48:55 Subir Imagenes a Nextjs y Cloudinary
02:28:28 Eliminar y actualizar Imagenes en Nextjs
02:49:13 Navegacion en Nextjs
02:54:28 Despedida
Video de Despliegue (para Miembros):
• Nextjs MySQL Tutorial ...
🛒 Fazt Web
Tienda Online: store.faztweb.com/
⭐ Cursos Recomendados
Curso de Nodejs ⮕ fazt.dev/nodejs
Curso de Python⮕ faztweb.com/python
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
⮕ Github: github.com/fazt
⮕ Twitter / fazttech
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef261d77de5
Namecheap ⮕ namecheap.pxf.io/ErDe9
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
Notion ⮕ affiliate.notion.so/yj9uc7bi3miq
Puedes encontrar la lista de tutoriales de React en:
faztweb.com/javascript
#nextjs #mysql #reactjs

Наука

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 60

@davidalejoms 10 месяцев назад

Con Fazt es un No parar! recién estoy terminando la crud con next y ahora este. apenas termine empiezo con este, muchas gracias por tanto, de verdad!!!!❤❤❤

@manularrere 10 месяцев назад

Yo tambien estoy en ese! Deberiamos tener una comunidad Fazt

@capdres 9 месяцев назад

Gracias Fazt por trasmitir desinteresadamente esos valiosos conocimientos. Gracias!!!!!

@richardmilian9959 10 месяцев назад

Muchas gracias Fazt eres genial. Aparte de MongoDB también MySql es una base de datos que yo había usado pero nunca con next y lo chido es que hasta con imágenes lo enseñas tu y con deploy. Infinitas gracias maestro Fazt.

@ChristianDev93 10 месяцев назад

Fazt esta OnFire. Gracias por tanto 👍

@sebastiancastillo3560 10 месяцев назад

Nextjs es una maravilla!, y tus videos Fazt, como siempre, invaluables! gracias mil!!

@ronaldotorrescaceres2680 10 месяцев назад

Gracias!! excelente tuto! como siempre

@juancosaurio 10 месяцев назад

Gracias Fazt, he aprendido mucho con tus videos🎉

@oscarclaros2225 9 месяцев назад

Buen tutorial Fazt, aprendí bastante todo esta muy bien explicado

@humbertogarcia9404 6 месяцев назад

Muchas gracias, buenisimo

@SmailBAHMIDA 6 месяцев назад

The best ever (Next.js MySQL) tutorial

@SmailBAHMIDA 6 месяцев назад

Should i ask you about the auto-complet perfect tool you're using there ? (is it just 'Prettier' ?)

@juanenrique6609 10 месяцев назад

El mejor maestro 😊

@gilbertardila 9 месяцев назад

con este video me decidí a pagar membresía

@manularrere 10 месяцев назад

Muchisimas gracias, justo lo que necesitaba, no todos usan mongodb para la base y este con MySQL nos viene muy bien, gracias!

@italodigi1 10 месяцев назад

Asi mismo es, por ahora MySql sera por mucho tiempo mas...!

@jualexesrio 10 месяцев назад

Estuve estudiando un poco de MongoDB y su uso más que todo se hace necesario para proyectos que necesiten almacenar bastante información ya que adquirir más espacio de almacenamiento es de bajo costo. Gracias profe Fazt.

@lucianocosta4062 10 месяцев назад

Gracias Fazt . Por fin usp de imágenes

@lucianocosta4062 10 месяцев назад

Cumpliste mi solicitud jajaja

@lucianocosta4062 10 месяцев назад

Fazt recién se me ocurrio a ver si es posible . En Argentina diariamente cambia el valor del dólar, pero hay que seguir vendiendo en nuestra moneda el peso . Si se carga el precio en doláres y se muestra en pesos argentinos ? Es decir si ingreso 100 dólares al día de hoy 23 agosto del 2023 serian 85mil pesos argentinos Pero si baja el lunes a 80mil No se si me explico

@hill3099 10 месяцев назад

Estaría muy bueno algún video creando un login y con un dashboard para cargar productos/noticias, tenés alguno así ya hecho?

@ismanolgarcia 10 месяцев назад

Saludos ! Tienes que hacer el curso de MySQL

@joseluisvallejos5186 10 месяцев назад

Muchas gracias, tengo un proyecto que si o si debo ocupar MySQL y no tenia ni idea de como conectarlo en Next js. un saludo y muchas Gracias.

@davidalejoms 10 месяцев назад

en el vídeo anterior fazt enseña prisma que te permite usar MySQL sin usar SQL 😮😮

@szxtt 10 месяцев назад

Qué bueno está Fazt tu fazt- store, me gustaría que puedas replicar algo parecido con un sistema de autenticación ya sea next o react

@user-jh6xj9st9y 9 месяцев назад

fazt me gustan mucho tus videos y gran parte de lo poco que se de programacion te lo debo, existe la posiblidad de que abordes temas como edge runtime vs serverless, despliegue de aplicaciones, arquitecturas para next, astro, protocolos de conexion a base de datos, manejo de concurrencia, injeccion de dependencias, y demas cuestiones "avanzadas" sin entrar en algoritmos y bigdata? Almenos yo, no encontre muchos videos en español en youtube. Muchas gracias por contribuir con tus videos que enseñan tanto, tu material es excelente, segui asi crack

@danielruiz7182 10 месяцев назад

@Fazt puedes hacer un video en donde hagas un recetario con Nextjs en donde la receta pueda tener varias imágenes, con autentificación para que solo un adm pueda subir recetas. Si lo subes alguna plataforma exclusiva yo lo pagaría para ver

@x89mrf 2 месяца назад

Genial, muchas gracias. ¿De qué tipo creaste el campo de la tabla product en mysql donde almacenas el archivo/imagen?

@grtourscartagena 10 месяцев назад

Seria bueno que hicieras un clone de una pagina full stack.. lo espero

@MrByteMx 8 месяцев назад

Agradecido enormemente con tu contenido. Alguien podría ayudarme en darme alguna idea de como puedo hacer validaciones de los input?

@royerrrrutti9903 10 месяцев назад

sabes como se desactiva el cache por defecto del NextResponse pasa que eh creado endpoints hacia una base de datos que esta en amazon y siempre retorna lo mismo a pesar de borrar la base de datos al parecer nextResponse lo almacena en cache , llegue a desplegar mi proyecto en amplify todo funciona correcto excepto eso

@programacionfacil7680 10 месяцев назад

q es mejor next o express?

@jrsistemasltda 9 месяцев назад

Não consigo proseguir devido a esse erro: Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client"

@gixi_lym 4 месяца назад

Change the password. Don't use symbols, just text

@lamaquinadealexandre4811 10 месяцев назад

Muchas gracias por el vídeo. Tengo una duda ¿Es normal que tarde en cargar la página a la hora de hacer el envío de datos mediante post por el formulario? Me pasa eso y después de un rato, al refrescar, no me aparecen cambios en la base de datos.

@FaztCode 10 месяцев назад

Es porque puede que estés subiendo archivos grandes. A este ejemplo le faltó un loader, pero lo puedes añadir simplemente con un estado true y false o axios también tiene eventos para indicar El Progreso. Pero si es normal, aunque si no aparece es porque al refrescar estes interrumpiendo la carga del archivo

@Deus-lo-Vuilt 10 месяцев назад

Gracias fazt , lo del ecommerce que comentaste hace un tiempo será más adelante ?

@FaztCode 10 месяцев назад

Lo he atrasado porque lo había hecho con clerk pero ya lo cambie a next auth. Esta semana empiezo a grabarlo :)

@Deus-lo-Vuilt 10 месяцев назад

@@FaztCode ow entiendo , justo ando en eso , practicando lo de Clerk de tu video , hay alguna razón para el cambio ? o solo es probar algo diferente ? me armé una ruta super entrete con tus videos de next , se agradece

@danielrodriguez-aleman8797 4 месяца назад

porque no usas form Actions que ya te da un FormData?

@waltergree 3 месяца назад

Quise abrir mysql en la consola y le salía no instalado o no reconocido, asi que modifiqué la ruta path en las variables de entorno y me di con la sorpresa de que el comando que reconocia es el 'mysqlsh' y ese comando si lo reconoce en la consola.

@miguelsantiagocaleropazmio6243 10 месяцев назад

Estaría chevere un crud en el cual se puedan subir muusicas o audios

@jrsistemasltda 9 месяцев назад

fUNCIONARIA COM DRIVE DO MYSQL TRADICIONAL?

@user-mr5sc5eu1s 6 месяцев назад

porque usas serverless y no mysql2?

@santiagoardila9120 10 месяцев назад

Los datos se ven en tiempo real y en la nube? Osea se puede ver al mismo tiempo en diferentes dispositivos com firebase?

@MonSster-jf7ex 9 месяцев назад

@Hazael_Poot 10 месяцев назад

¿Cuál es el tema de vscode que usas? se ve muy cómodo, Excelente video...!!!

@FaztCode 10 месяцев назад

Se llama Tokyo night dark

@ronaldotorrescaceres2680 10 месяцев назад

Creo que el error que da a la hora de hacer las peticiones es sobre temas con el body(postmas, si uno abre una nueva pestaña y crea la petición no da problemas. Es como solucioné eso.

@FaztCode 10 месяцев назад

Si justamente ese es el error

@roddy_21_25 6 месяцев назад

Minuto 27:10 el minuto en el que al Master Fazt le da error y a mi no 😎😎 PD: Tengo que hablar con mi jefe para que me aumente el sueldo y el seniority 😎

@alexisolivarez9212 10 месяцев назад

Como se llama lo que te recomienda comandos en la terminal? 2:43

@FaztCode 10 месяцев назад

Esas sugerencias vienen de ohmyposh: Mejorando el Powershell de Windows con OhmyPosh, Windows Terminal y NerdFonts ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d9y0l7yY404.html Aunque para Linux y Mac tienes ohmyzsh

@joelcontreras4629 10 месяцев назад

voy en min 15:56 pero veo que creaste la crapeta "libs" en app a pesar de que dices que se crea en src, quizas no lo notaste y mas adelante si lo corriges. Pero bueno sigamos el tutorial y yo si la crearé en src como aconsejas.