Тёмный

Tutorial Next.js 14 paso a paso, para Principiantes 

midulive
Подписаться 280 тыс.
Просмотров 159 тыс.
50% 1

En este tutorial de Next.js 14, estaremos cubriendo desde la introducción hasta la conexión a una base de datos PostgreSQL, pasando por estilos, fuentes, imágenes, optimización de carga y más.
¡Esperamos que este video te ayude a dominar Next.js y mejorar tus habilidades de desarrollo web! No dudes en dejar tus preguntas y comentarios
▶ No te pierdas más directos en: / midudev
00:00:00 - Introducción a Next.js 14
00:02:03 - A mover las manitas
00:02:42 - ¿Qué es Next.js?
00:05:05 - ¿Cómo inicializar un proyecto de Next.js 14?
00:08:13 - Requerimientos
00:09:08 - capitulo 1
00:12:41 - Revisando código
00:14:39 - Revisando carpetas
00:16:48 - layout
00:17:47 - Separación del Layout y Page
00:18:12 - Carpetas ui y lib
00:19:40 - Cargando los estilos
00:21:52 - Estilos globales
00:22:06 - css modules
00:24:06 - ¿Qué forma usar?
00:24:58 - Preguntas de la comunidad
00:25:47 - Importar y cargar fuentes
00:30:20 - Agregar más fuentes al proyecto
00:31:24 - Imagenes
00:32:44 - Diferencia entre Image e img
00:35:27 - Dato importante sobre el componente Image
00:38:33 - Sistema de enrutado por archivos
00:39:22 - Ruta dashboard
00:40:26 - Layout
00:41:43 - Rutas anidadas
00:44:53 - Layouts que envuelvan secciones específicas de nuestras rutas
00:48:30 - Preguntas de la comunidad
00:50:09 - Navegación: Componente Link
00:55:15 - Hooks de Next.js
00:56:55 - ‘use client’ y ‘use server’
00:59:39 - Dato importante sobre Link
01:01:26 - Code splitting
01:04:00 - Base de datos: postgres
01:11:15 - Fetching de Datos
01:17:54 - Renderizar datos en el Dashboard
01:21:37 - Streaming de datos
01:22:06 - Loading
01:23:51 - Continuando con el Straming
01:31:06 - Hay problemas en el SEO por el Skeleton?
01:32:20 - Más preguntas de la comunidad

Наука

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

 

26 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 241   
@gaxrod
@gaxrod 2 месяца назад
Midu eres lo mas grande del mundo contemporáneo de la programación, no solo por la calidad del contenido que brindas, sino por la capacidad que tienes de extender tu pasion y entusiasmo por el mundo dev. Hace años que trabajo como FE, y cada vez que me encuentro desanimado mirar algo tuyo me contagia ese entusiasmo y me recuerdo lo bonito que es programar. SIMPLEMENTE GRACIAS ❤❤❤
@daniel-24gra79
@daniel-24gra79 4 месяца назад
La madre que pario a este muchacho no se imagina el baúl de informacion que le estaba dando al mundo
@erickruben5536
@erickruben5536 7 месяцев назад
Sin duda ese tutorial de vercel es perfecto para lo que quieran saber como funciona Next como una introduccion y encima explicado con Midu mucho mejor aun, gracias por el contenido.
@mateoibanez5184
@mateoibanez5184 2 месяца назад
es increíble este tipo, simplemente todos los comentarios son positivos y su contenido es excelente
@Luis-tt2br
@Luis-tt2br 7 месяцев назад
Muchas gracias por todo el contenido que traes para la comunidad.
@XXTargaryenXX
@XXTargaryenXX 3 месяца назад
Es fantastico! Ya voy por el capítulo 14 del tutorial en el que te inspiraste y tu guía en los primeros capítulos ha sido fundamental! Muchas gracias!! Si te animas a hacer otro tuto de los capítulos restantes lo veré para repasarlo bien, porque aprendo mucho más contigo. Ojalá no cambie nada a menos que sea para mejor!
@gianbarbozaa
@gianbarbozaa 7 месяцев назад
Increible como explica. Por fin entendí que es lo realmente bueno de nextjs. Ojala puedas seguir el curso para ver como se hace cuando se necesita editar data, enviar data lo que sean entre componentes.
@luisaquinoc6548
@luisaquinoc6548 2 месяца назад
Carajoooooo !!!! grande midu !!!! un curso de estos en otras plataformas millones de $$$$. Gracias por tu conocimiento !!!
@vivarantx
@vivarantx 7 месяцев назад
impecable, muy justificadas las elecciones de las tecnologias que usas y lo bueno que pones buenos ejemplos, como lo del parcheo de la ui o decir por que salieron las spa realmente y que la gente lo malinterpret'o con otros usos
@GabrielPozo
@GabrielPozo 7 месяцев назад
Como siempre, un nivel increíble en la forma que comunicar el contenido en los cursos 👏👏👏👏
@midulive
@midulive 7 месяцев назад
Muchas gracias ❤️
@carlosdiazreyes9849
@carlosdiazreyes9849 6 месяцев назад
Ya era hora! un sistema de enrutado como el de CI2, por archivos. Un tuto excelente!
@gabinoortiz6131
@gabinoortiz6131 Месяц назад
Midu en verdad que eres un crack, este tutorial de Next y el curso de React son una joya, ni en cursos de pago esta tan bien explicado. Como me hubiera gustado ver esta info antes. Mil gracias!!!
@julian8522
@julian8522 7 месяцев назад
El mas grande Midu, gracias por tanto, ojala tengamos en algun momento como pagarte tanto conocimiento transferido!!
@fraineralex
@fraineralex 7 месяцев назад
Más simple de ahí imposible, gracias midu!
@polloricopollo9036
@polloricopollo9036 6 месяцев назад
midudev eres una bendición para el mundo
@victorhugoolvera8773
@victorhugoolvera8773 7 месяцев назад
Invaluable este video. Muchas gracias!
@andres-mora-vanegas
@andres-mora-vanegas 7 месяцев назад
Muchísimas gracias, contenido de gran calidad 🎉🎉Thanks!
@juniorromero2539
@juniorromero2539 7 месяцев назад
ya se que voy a hacer este fin de semana. Gracias midu♥
@SergioSam
@SergioSam 20 дней назад
madre mia, midu es el elegido que vino del futuro para enseñarnos todo con una claridad impresionante jaja gracias infinitas
@yovaxox
@yovaxox 7 месяцев назад
Excelente. Gracias Midu!
@tadeoandresperez251
@tadeoandresperez251 7 месяцев назад
Muy épico, vengo de Laravel estoy aprendiendo next muy buenas cosas tiene next
@mariojuniortorresperez7837
@mariojuniortorresperez7837 Месяц назад
Casi 2 horas de contenido valioso. Muchas gracias Midu
@EzeCriis
@EzeCriis 5 месяцев назад
Terrible video Midu, sos crack gracias por siempre transmitir tus conocimientos! Abrazo, buen año
@student1381
@student1381 7 месяцев назад
Bua midu, increible el contenido y lo que aportas a la comunidad!
@midulive
@midulive 7 месяцев назад
Gracias!!! 🙂
@tony96sosa
@tony96sosa 3 месяца назад
Excelente contenido. Gracias Midu!
@coroyangelitabaylando
@coroyangelitabaylando 7 месяцев назад
Saludos desde Xalapa, Veracruz, México , gracias por todo tu contenido
@coff3andprograming
@coff3andprograming Месяц назад
¡Joder!, buenísima la info
@carlosraul6578
@carlosraul6578 3 месяца назад
jeje lo del suspense y skeleton lo suelo hacer mucho en React de hecho encapsulo todo en un solo componente para cuando se use el componente , no haya que estarlo envolviendo en suspense. Excelente explicación Midu, tus vídeos son sinónimo de calidad.
@Jonavoe
@Jonavoe 7 месяцев назад
Gracias por el video Midu!
@yavallejo
@yavallejo 4 месяца назад
Excelente Video, Gracias por compartir lo que sabes, un saludo
@erickrh
@erickrh 2 месяца назад
Gracias por este gran aporte viejo, eres el mejor.
@dngmyth6347
@dngmyth6347 6 месяцев назад
Midu sos el mejor, te amo
@Frlawer
@Frlawer 7 месяцев назад
Soy backend PHP y me voy a poner con next xq le veo mucho futuro. Me pasó al bando fullstack
@rodolfolopezp
@rodolfolopezp 4 месяца назад
No se va a arrepentir. La sintaxis de React y Next.js es mucho mas manejable que PHP. Es el presente y el futuro.
@HEAVYMETAL80tas
@HEAVYMETAL80tas 5 месяцев назад
Qué agradable sujeto!🍷
@higeco1
@higeco1 7 месяцев назад
¡Excelente! 👏💯
@nqda12
@nqda12 7 месяцев назад
tremendo contenido, muchas gracias
@SonGoku-pc7jl
@SonGoku-pc7jl 7 месяцев назад
cada dia mola más Next y cada dia molan más tus clases xD muchisimas gracias por todo midu!!! eres más genial que next14!!! ;)
@midulive
@midulive 7 месяцев назад
Gracias a ti!!
@kendryfinol7665
@kendryfinol7665 7 месяцев назад
Gracias Midu, te amo
@MaxClintonHarriganChatergoon
@MaxClintonHarriganChatergoon 7 месяцев назад
Muchas gracias midu 🫂
@lackcsgo6750
@lackcsgo6750 7 месяцев назад
impresionante la magia que hace nextjs
@gasprograma
@gasprograma 7 месяцев назад
Muy buen video!
@alexandevs
@alexandevs 7 месяцев назад
creo de los mejores instructores sin temor a equivocarme 🎉🎉 FELICITACIONES 🎉🎉
@alvarotorres1471
@alvarotorres1471 Месяц назад
Yo diría el mejor jaja Bueno, al parejo con el buen Fazt
@marcopat01
@marcopat01 7 месяцев назад
Seguirás el curso más adelante? Vendría bien un video de prueba técnica y/o uno de un tipo blog o tienda en línea
@PauDevelop
@PauDevelop 7 месяцев назад
Excelente contenido como siempre!!
@midulive
@midulive 7 месяцев назад
Mil gracias!
@ragknar2401
@ragknar2401 7 месяцев назад
Buenisimo midu 🤩
@ArielLopezMkultra
@ArielLopezMkultra 7 месяцев назад
Sos un genio midu :)
@cl3on482
@cl3on482 7 месяцев назад
Impresionante
@cesarandresrestrepoc7746
@cesarandresrestrepoc7746 7 месяцев назад
muchas gracias por su contenido.esta excelente como siempre sos un crack.me gustaria que realizaras una pagina con next14 y mui.seria excelente para reforzar el aprendizaje.gracias
@__renesan
@__renesan 2 месяца назад
Gracias 💛
@Yhau1989
@Yhau1989 7 месяцев назад
Grande Midudev
@josephito27
@josephito27 7 месяцев назад
Midu eres increíble 🥹❤
@midulive
@midulive 7 месяцев назад
Gracias majo!
@tadeoandresperez251
@tadeoandresperez251 7 месяцев назад
Esperando el siguiente video
@JonathanRamirez-ep9hd
@JonathanRamirez-ep9hd 7 месяцев назад
Como el 14 es relativamente nuevo hay poco contenido que te enseña a usarlo o lo usa tal cual, me salvaste el proyecto de la uni gracias pa 🫶🏼🫡
@v3.14
@v3.14 7 месяцев назад
buen video midu! ya lo vi 3 veces
@TornVeil7
@TornVeil7 7 месяцев назад
Y eso que lo subió hace 5 minutos, qué crack
@Murzbul
@Murzbul 7 месяцев назад
Está buenisimo lo que tiene nextjs ahora! Lo de server components es extraordinario, aunque rompe con atomic design pero bueno es lo de menos.
@ceambusiness
@ceambusiness 7 месяцев назад
Muchas gracias por esta excelente introducción al Next.js, estoy en el camino de llegar a éste aprendiend JavaScript y React antes. Como recomiendas. Saludos
@aarondiaz2506
@aarondiaz2506 7 месяцев назад
Gracias!
@rodolfolopezp
@rodolfolopezp 7 месяцев назад
Voy por el capítulo 10 o 12 del curso de Vercel, y me parece que Next 14 está muy bien. Lógico, hay gente que se complica la vida en tecnisismos
@contrerasgarciaangel6614
@contrerasgarciaangel6614 5 месяцев назад
Que emoción❤❤❤❤❤, no puedo esperar por este contenido de auténtica calidad😂😂😂❤❤
@diarioparaemprendedores
@diarioparaemprendedores 4 месяца назад
Vengo a Disfrutar
@Magistrado1914
@Magistrado1914 3 месяца назад
Excelente tutorial. Visto en 02/03/2024
@frako23
@frako23 Месяц назад
tremando titurial midu! gracias, ya es la segunda vez que lo veo y no creo que sea la última jajajaja
@midulive
@midulive Месяц назад
Muchas gracias amigo!
@programandoConFelipe
@programandoConFelipe 7 месяцев назад
Midu, más contenido de next.js 14 por favor.
@fmaylinch
@fmaylinch 7 месяцев назад
1:38:17 sobre monolitos: si los servicios del backend son complejos, se podría mover esa lógica a una API aparte (incluso en otro lenguaje como Java) y hacer que NextJS llame a esa API (de manera similar a como se llama a Postgres en este ejemplo).
@DigitalwebPatagonia
@DigitalwebPatagonia 7 месяцев назад
es correcto, la filosofia de Nextjs es adaprtse al presente y futuro, ademas de que sea usable junto a otras tecnologías
@samuelmayo28
@samuelmayo28 5 месяцев назад
hola, muy buen video. podrias comentar cuales extenciones usas? alguien sabe?
@user-jh1mg3lf4v
@user-jh1mg3lf4v 3 месяца назад
geniales tus videos, ya es el segundo curso que veo y son geniales, quisiera saber como se llama la extensión que usas para ese completado de sugerencia se ve muy genial.
@berndeveloper
@berndeveloper 7 месяцев назад
Si quieres hacer una app tipo sistema operativo, cómo manejarías las páginas al abrir múltiples ventanas? Yo estoy jugando con arrays de objetos de páginas que se displayen en un componente de ventana, entonces así manejo el que se vayan acululando, cerrar etc, pero me gustaría pasarlo al route the nextjs, algún consejo que me puedas dar?, es viable pasar esa lógica a routes?
@mauroleonardi390
@mauroleonardi390 7 месяцев назад
Midu!! genial el contenido muchas gracias!! Habra parte 2??
@midulive
@midulive 7 месяцев назад
Por supuesto! Este jueves en directo en Twitch
@user-xs4th5rm6w
@user-xs4th5rm6w 5 месяцев назад
wao exelente tutorial, muchas gracias, pero el trucaso de crear ruta mmm(cuando usas neovim no tienes que estar redescrubriendo cosas que viene por defecto con unix)
@anthonyisraelterancamacho5193
@anthonyisraelterancamacho5193 7 месяцев назад
Midu excelente video, como se llama esa extensión que incluso te muestra el resultado del console log ahí mismo inline?
@jere4385
@jere4385 7 месяцев назад
Excelente video!, pero podrias dar un curso desde cero orientado al backend. Gracias sos un genio 🇦🇷
@felipebuitrago9115
@felipebuitrago9115 7 месяцев назад
¡Hola! De pronto esta playlist de los videos de Midu sobre NodeJS desde Cero es lo que estas buscando: ru-vid.com/group/PLUofhDIg_38qm2oPOV-IRTTEKyrVBBaU7
@jogre900
@jogre900 28 дней назад
Excelente. Midu como siempre. Pero como se hacen esos emoticones en el código xd
@francescllaogarcia6340
@francescllaogarcia6340 7 месяцев назад
Hola, excelente tutorial, podrías indicar todas las extensiones que estas utilizando? alguien las sabe?
@yazid113
@yazid113 5 месяцев назад
Hola @midu una consulta si yo trabajo como front y otro desarrollado se encarga del back en C# vale la pena usar next?
@carlosterrazas8913
@carlosterrazas8913 7 месяцев назад
Puedes hacer un video explicando sobre el sistema de api de nextjs y/o el sistema de cacheo de nextjs, revalidate..., si existe querys optimistas. como en reactquery. porfavor necesito esto para comenzar un nuevo proyecto. no hay mucha info afuera.
@sergioariela.mondino8479
@sergioariela.mondino8479 Месяц назад
Hola Midu, Gracias por regalar conocimiento!!!. Esto está bueno, solo por un detalle, Odio Tailwind, te hace escribir kilómetros de código sucio, una línea interminable con "palabras" separadas por espacios. ¿Pregunto, es difícil reemplazar Tailwind por Material UI, por ejemplo?
@colommbiano
@colommbiano 2 месяца назад
maestro en NextJs 14 como recomiendas mejor nombrar a las carpetas y archivos de .tsx ? colocandole guion medio o usando camelcase, he visto ha mucho que llaman a las capertas y a los archivos colocandole el guion medio que me recomiendas ?
@bryanramososuna1481
@bryanramososuna1481 7 месяцев назад
Tengo una dusa, recientemente termine un proyecto en next 13.5, me gustaria migrar a next 14, que cosas debo tener en cuenta para migrar mi proyecto a esa version? Gracias de antemano.
@rafaelrafael4843
@rafaelrafael4843 6 месяцев назад
Hola, crees que pueda llevar este curso sin saber nada de type script? Mis conocimientos: React, javascript... Tengo un proyecto en produccion con react, funcionando bien, solo que me gustaría aprender este framework para proyectos optimizados para seo en algunas areas, y sobre todo para optimizar imagenes, será posible? O debería llevar un curso de Ts primero
@pep3marquez46
@pep3marquez46 7 месяцев назад
Me quedé con ganas de ver el revalidate y la hidratación
@tomymarengo
@tomymarengo 6 месяцев назад
Aclaración, luego del 1:01:00 habla de descarga en segundo plano y code splitting. Estas funciones Next.js las hace solo en producción, por eso Midu no puede mostrarlas en las devtools.
@DAVIDIL81
@DAVIDIL81 7 месяцев назад
Pero Midu, con el en qué queda el loading.tsx? ya no sirve? una cosa sustituye a la otra?
@diegotale4608
@diegotale4608 7 месяцев назад
amigo midudev, es necesario saber ya de react para empezar con next
@could313
@could313 6 месяцев назад
En una parte del video alguien del chat pregunta sobre si quiero usar componente en el layout global y en otras partes no usarlo, creo que con el uso de template.ts y layout.ts se lograria
@ema22mas11
@ema22mas11 3 месяца назад
con respecto al pathname ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jMy4pVZMyLM.html&feature=shared se puede recuperar, pero con javascript puro (no JSX, ReactJS, NextJS y demás) y las bibliotecas de node URL().parse(url).pathname. Por que es parte de la solicitud HTTP que el servidor recibe. Cuando la HTTP request llega al servidor la primer línea es el método HTTP luego el path. Por ejemplo GET /dashboard/customers Por ejemplo se podría hacer un hook similar a pathname, pero que se procese en el lado del servidor 😄
@ernestograndoli2950
@ernestograndoli2950 7 месяцев назад
Tengo realizado el suspense como lo mostras en el ejemplo, y funciona correctamente en mi local y en vercel, cuando deployo en AWS con Amplify el loading no me lo muestra nunca. Sabes que podria ser? Saludos.
@dira4734
@dira4734 7 месяцев назад
Con respecto a la pregunta del footer como cambiarlo dependiendo la pagina se usa los params de la url y en el return del footer se pone un ternario, si es el pathname que devuelva null u otra cosa y sino que se muestre el footer normal. Yo lo solucione así, espero que me haya explicado
@mobilgamemix6384
@mobilgamemix6384 7 месяцев назад
Hola Midu, como hiciste para aprender todo este entorno de desarrollo en la web, soy nuevo y hace 2 semanas que veo tus videos, cual es tu plan de estudio o cual fue el orden de las cosas para aprender y el horario, me gusta en mundo web en todo sus aspectos, saludos y abrazos.
@Antoniofdez98
@Antoniofdez98 7 часов назад
Midu es rentable hacer un proyecto de front nextjs y de back nestjs?
@risehit
@risehit 5 месяцев назад
Saben si en nextjs se usa la estructura de carpetas: serc/pages, src/utils, etc. por ende, quitando la carpeta app en src/app?
@user-cm1ym6mm9j
@user-cm1ym6mm9j 5 месяцев назад
que extensión usas en code? veo que te predice código al escribir algo.
@josuehuallullo1705
@josuehuallullo1705 7 месяцев назад
Alguien sabe que extension es la que usa midu, para que le salga los errores, y que configuracion hace para que le salga en español. Gracias
@juliojaviermartinezvargas8187
@juliojaviermartinezvargas8187 7 месяцев назад
🎉👏🎉
@tadeoandresperez251
@tadeoandresperez251 7 месяцев назад
Sigue con el tutorial
@user-ug8sb3up5g
@user-ug8sb3up5g 3 месяца назад
14:00 Cual es la vs code extension para que agrupe los ficheros de configuración dentro del package.json ?
@felipedelgado160
@felipedelgado160 7 месяцев назад
¿Como conectas a una BD local? En el ejemplo se conecta en remoto con Vercel
@sebastianmedina5106
@sebastianmedina5106 7 месяцев назад
de donde sacaste esa polera/camiseta MIdu?
@juancamiloibanezchaparro
@juancamiloibanezchaparro 4 месяца назад
Next14 Soporta ssg con el app routing o solo con pages routes
@aranzuachavezcesar1300
@aranzuachavezcesar1300 7 месяцев назад
Para hacer zoom con el mouse, es algún programa exclusivo de mac?
@lebaf8661
@lebaf8661 3 месяца назад
¿Cual se supone es la diferencia entre getstaticprops y "use server", ¿son lo mismo o son similares?
Далее
Игровой Комп с Авито за 4500р
01:00
NextJS Tutorial - All 12 Concepts You Need to Know
44:38
Aprende ANGULAR 17 desde cero para principiantes GRATIS
1:23:34
NEXT.JS 13 + STRAPI: Your OWN CMS from SCRATCH!
1:09:52
React acabará Muerto como jQuery (mi opinión)
18:20
Просмотров 109 тыс.
14 hábitos de desarrolladores altamente productivos
22:22
¿Qué es Nextjs y Como Aprenderlo?
13:06
Просмотров 24 тыс.
FullHD в 8К БЕЗ ПОТЕРЬ? |РАЗБОР
20:42
APPLE совершила РЕВОЛЮЦИЮ!
0:39
Просмотров 3,9 млн