CURSO de NEXT.JS 12 desde CERO y con dos proyectos prácticos
HTML-код
- Опубликовано: 30 июл 2024
- Creamos un proyecto desde cero con Next.js
00:00 - Introducción
03:40 - Iniciando el proyecto desde cero
06:00 - Estructura de carpetas
17:00 - Sistema de rutas en Next.js
22:30 - styled jsx y CSS Modules
31:00 - No uses botones para navegaciones
52:35 - getServerSideProps
01:12:25 - getStaticProps
01:24:30 - componente Image
01:41:45 - Context Provider
01:50:00 - Segundo proyecto para seguir con Next.js
02:00:00 - Crear un scraper con Node.js
02:30:00 - El resto del vídeo jajaja
▶ No te pierdas más directos en: / midudev 
Наука
2:44:26 instalación de tailwind
2:51:09 getStaticProps
3:14:20 Mentasuave regala 10 subs
3:18:27 buscamos las dimensiones de imagenes del dirty scrapper
3:36:59 explicación de lo que es un masonry
3:48:32 instalación de masonic para crear manonry en react
4:02:34 Paginacion de los comics
4:32:14 Añadiendo algolia para el search
...stand by por hoy
Te das cuenta que a midu le dio perece, cuando del 2:30 en adelante la anotación es "El resto del video jajaja" , no se puede pedir, gracias por tiempo y tu conocimiento Midu, vales millones
Midu, gracias por hacer del conocimiento algo libre y horizontal. Estos videos me ayudan muchísimo a seguir creciendo como profesional. Se aprecia mucho la contribución desinteresada a la comunidad. Estimo que ya lo sabés, pero estás aportando un granito de arena a cada persona que está iniciando en este mundo, y eso, para alguien que recién inicia, puede significar un gran avance. Sigue así, ¡Muchísimas gracias!
Midudev lo que haces por la comunidad no tiene precio, nada mejor que compartir el conocimiento, pues cuando se enseña es cuando realmente te das cuenta que dominas algo. Gracias
El resto del video jajaakaja 👏👏👏 Gracias por el video! Justo estoy en una migración laravel+quasar a next js full stack
Justo quería aprenderlo y estaba buscando donde. Que genialidad, gracias Midu, siempre tan crack 🕺👏
Gracias a ti!!
Gracias Midu! Iré dejando los tiempos a medida que vea el video, gracias!
I) CONFIGURACIÓN DE NEXT.JS
4:15 Preguntas del chat (¿usar @latest actualiza la versión global?)
8:44 Cómo iniciar el proyecto
32:30 Por qué usar nextjs: es por el SSR
36:04 Preguntas del chat al respecto
36:15 Video de midudev sobre explicación en detalle del SSR
36:37 Explicación y comparación del renderizado de Nextjs (SSR) versus el de Vite (CSR)
40:21 Preguntas del chat al respecto
41:17 Continúa el curso
41:37 Se usarán estilos jsx
41:54 Creación del primer componente
43:41 Componer páginas y advertencias al respecto (no tocar mucho el archivo «_app.js»)
II) FETCHING DE DATOS
45:07 Fetching de datos: se comenzará desde el Client Side. Se verá cómo hacerlo desde React y el problema que este tiene.
45:43 Cómo hacer el fetching de datos
49:16 No uses , usa en Next js
51:12 Se explica el problema del fetch en React (o hacerlo en el cliente)
52:24 Solución de Nextjs: fetch en el servidor
54:49 Resultado del fetch de Nextjs (getServerSideProps) y su explicación
57:00 Responde preguntas del chat al respecto: ¿esto es lo mismo que los LDJSON, como los rick snippets? No, no lo es, solo comparten ser un JSON
58:07 Responde preguntas del chat al respecto: por debajo ¿que servidor sirve? Ahora usa express pero se lo irán quitando.
58:24 Responde preguntas del chat al respecto: ¿al hacer el fetching en el servidor es más seguro: se oculta el end point ? Sí y con ello también las keys
59:31 Responde preguntas del chat al respecto: ¿no es peligroso que el servidor ejecute código arbitrario, ahora hiciste un fetch pero a saber lo quj un dev podría hacer? No es peligroso.
1:00:23 Responde preguntas del chat al respecto: esas props ¿se ven en producción? Sí
1:00:40 El "problema" que resuelve Nextjs con fetch desde el servidor. Los React Server Components va por aquí.
1:01:53 Sorteo en directo
1:04:01 Responde preguntas del chat al respecto: ¿cóme hacer un fetch que pida headers y autenticación? En el getServerSideProps porque el usuario no lo ve, de hecho podrías hasta conectarte con una base de datos
1:05:05 Responde preguntas del chat al respecto: ¿los data fetching desde el servidor los cobra Vercel?
1:06:22 Continúa
1:06:48 Detalles del getServerSideProps en la navegación
1:11:30 Problemas des getServerSideProps
1:12:25 Dos formas de hacer pre renderizado en Nextjs: getServerSideProps gerStaticProps
1:12:46 Explicación de getStaticProps, casos de uso de getServerSideProps y cómo se renderizan
1:14:19 Diferencia entre getStaticProps y getServerSideProps usando "npm run build"
1:22:11 Nextjs export, funcionalidad avanzada
1:24:11 Componente Imagen en Nextjs. Se menciona el Largest Contentful Paint (LCP)
1:34:44 Responde preguntas del chat al respecto
1:39:39 Pregunta del chat sobre getServerSideProps
1:40:50 Pregunta del chat: cómo se usaría context, información global disponible para todos los elementos
1:42:55 Comentario del chat sobre imágenes: todas los imágenes son por defecto defer, con prioridad se configura paro que carge en preload
1:43:12 Pregunta del chat: por qué usas tanto export default
1:45:23 Pregunta del chat: para ejecutar fetch del lado del servidor sirve la última versión de node o es magia de next
1:46:21 Pregunta del chat: cuándo usar getStaticProps y getServerSideProps
lll) Tercera parte: proyecto con nextjs
1:50:17 Segundo profecto con nextjs, implica un poco de Node y web scraping
1:56:21 Preguntas del chat: recomiendas aprender React con typescript o sin typescript
1:56:40 Empieza el proyecto con el scraping
1:59:34 Empieza a codear el scraping
2:04:50 Preguntas del chat
2:05:44 Preguntas del chat: con promise all se hubiera descargado todo en paralelo
2:11:28 Creando un proyecto de nextjs con "npm init next"
2:11:44 "npm init next" sale mal, progede a usar "npx create-next-app@latest"
2:14:01 Uso de NextUI
216:32 Explicación del use del archivo _document.js
2:17:30 Posible problema en el archivo _document.js con getInitialProps
2:20:48 Preguntas del chat: qué hace la etiqueta main en un componente, ¿pueden haber varios main?
2:21:22 Preguntas del chat: main, header y footer solo uno + continúa con el proyecto creando carpeta components
2:23:25 Qué es Link
2:23:50 A Midu lo tratan bien, lo traton mal y él responde con humildad, razón y empatía
2:30:57 Preguntas del chat sobre Link
2:34:20 Continúa aplicando estilos con NextUI
2:42:07 Comienza a usar Tailwin dadas las limitaciones de NextUI
2:42:50 Chat resuelve la duda a Midu para usar correctamente NextUI
2:43:40 Falla otra vez NextUI
2:44:11 Decide usar Tailwin en los casos donde no llega NextUI
2:45:50 Continúa
2:50:53 Comienza a usar getStaticProps
3:03:33 Preguntas del chat al respecto
3:04:53 Continúa + problemas con Image component
3:07:01 Solución al componente Image
3:10:48 Preguntas del chat
3:11:40 Continúa
3:14:36 Preguntas del chat al respecto
3:18:18 Continúa: obtendrá las dimensiones de las imágenes con Node
3:26:47 Procede a descargar los comics con width y height + expansión del log de dirty scraper
3:31:32 Lograr obtener las demensiones y continúa con el proyecto
3:35:22 Problemas con la distribución de las imágenes y solución: masonry
3:39:04 Solución aportada por la comunidad: título sobre la imagen
3:41:42 Solución aportada por la comunidad: briks.js (masonry)
3:45:14 Continúa con las rutas de cada comic
3:47:36 Solución aportada por la comunidad: masonic (masonry)
3:49:08 Continúa con las rutas de los comics (usará getStaticProps y getStaticPaths)
3:55:59 Potencia de getStaticProps con fetch, sus Problemas y el porqué del uso del scraper
3:59:58 Paginación
Gracias!!!!
@@midulive Gracias a ti Midu!!
Gracias, midu. Sobre todo por la parte de "El resto del video jajaja", creo que fue la parte más interesante del video 🥺
Midu te envio este mensajito desde argentina para agradecerte por tu buen animo y ganas de enseñar, eres un grande enseñando front con tanta pasion, Gracias por darme animos a adentrarme en este maravilloso mundo! ❤
Tu canal esta genial, justo cuando estaba queriendo ver un review de next JS, me topo con el tuyo, que creo que es el mejor canal para react !
Es año nuevo, mientras todos festejan yo estoy aquí, por un futuro mejor, gracias midu por todo el contenido que haces!
¡Feliz 2023 para todos los que lean este comentario!
Midu sos un genio! No sabes lo agradecido que estoy por este curso! Espero poder mudarme a España con mi familia y continuar mi carrera de programador frontend ahi. Saludos desde Argentina!
Como te quierooooo miduuu, que genio eresss, es la primera vez que sigo uno de tus directos y me diverti y aprendi muchisimo con este!! Te agradezco mucho!! :D
No me podría llegar en mejor momento. Que grande Midu.
Lo sé, me llegó la notificación!!!
@@midulive también te llegó la mía :3
Llego en el preciso momento quiero aprenderlo, no tienes idea de cómo voy a gozarlo. Grande Midu. 👍🏼
Como siempre lo mas reciente y util, Muchas Gracias
Midu acabo de despertar y ahora como te lo agradezco? Jajaja muchas gracias ☺️☺️
Siiii estaba esperandolo desde hace tiempo
Grande Midu!! Siempre aprendiendo cosas nuevas contigo! Un master!! :D
No hay chance midu, sos muy grande hermano , justo que estoy metido en next👏🏻
Muchas gracias Midu, justo en mi ruta de aprendizaje de Platzi me toca aprender Next.
Voy a hacer algo, voy a tomar este curso y con lo que aprenda aquí voy a intentar hacer el examen de Platzi. Luego les cuento que tal me fue.
Estupendo curso. Gracias Miguel
Gracias por el mejor contenido en español bro
Gracias profe, por tanta calidad y calidez.
Midu, gracias por tanto!! ☺☺❤❤❤
Ahhhhhh que belleza ❤ súper sencillooo
8 horas??? guau, este man es un mounstro. Muchas gracias por ese aporte tan grande.
Te mereces más subs, espero sigas creciendo.. gracias por tu contenido
Eres el mejor crack! Gracias por tus aportes :D
Espectacular!!! Que claro que se entiende todo con tus videos.. increible =D. Una cosita que noto es que cada vez que el VSC carga alguna libreria, compila algo o hace trabajar al CPU, la grabacion se entrecorta un poco y a veces se traba la voz un segundo, talvez le podrias poner mas prioridad desde el task manager al proceso del OBS o el programa que sea que uses para grabar 🤔, asi no nos perdemos ni una palabra de lo que enseñás, gracias y saludos!!
Midu! En la empresa que trabajo vamos a utilizar Next. ¡Buenardo el curso!
Justo hoy empecé con NextJS con los vídeos viejos y habían algunas cosas que habían cambiado... ¡y justo sales con esto! Nada más que agradecerte por tu trabajo y desearte lo mejor, Midu. Soy Junior recién salido de un bootcamp e intento mejorar cada día, tus vídeos son oro puro. ¡Saludos desde Argentina!
y ahora salió next 13....
Este contenido es mejor que muchos cursos pagados, muy bueno
Gracias!!!
Gracias por compartir un saludo desde Colombia 🇨🇴
Increible, pareciera que me leyeras la mente
Thanks for the tutorial! It was very helpful!
brutal
que buen video
Eres el mejor midu
Excelente el video!!! Consulta, podemos ver en algun lado donde quedo la finalizacion de la app en node con las GH Actions?
ujuu, tenía hacer un curso de next, creo que llegó el momento!
Safe title suena como un title que no tieene HTML tags, para pasarlo directo al o para redes sociales. Usualmente se limpian
Quería aprender NextJS, no llegue a la mitad del video y ahora aprendí Node. A este ritmo en 5 horas me hago senior
Hola Midu. Estoy mirando el curso. Muchas gracias. Veo que te cansaste de poner los capítulos. Entendible jajaja.
se puede ejecutar una action de redux en getserverside props?
Llego, no sabes cuanto lo espere midu
🤗
Gracias Crack!!!
Excelente explicación de como se generan las páginas estáticas.
👏👏👏👏
Muchas gracias, Rodolfo!! 🤗
Midu, justo estaba creando un clon de Twitter con Next.js para aprender a usarlo y realmente había cosas que me estaba costando entender. Para mi, en este momento, este contenido tiene un valor increíble. Muchas Gracias de parte de alguien que aspira a conseguir su primer trabajo en el mundo del desarrollo!
Aguanten los redondos, padreeeeeeeeeeeeee
Ojalá puedas conseguir laburo, estoy en la misma.
@@nacho3055 vamos que se consigue
donde puedo encontrar la configuracion del tema de visual studio code?
Buenas Midu. Eres un crack. Veo muchísimos vídeos tuyos. Una pregunta, qué extensión tienes en el IDE que te autocompleta? Es una maravilla. Gracias
Cuando un curso de web performance midu? Seria de gran utilidad. Muchas gracias por tus conocimientos.
Midu necesito tu ayuda pongo el domain y todavia me sigue tirando el error no ecuentro el problema. saludos
Hola Midu, porque al momento de renderizar los datos se saltea los primeros 4?, si los veo por consola salen todos, pero al momento de mostrar en pantalla se saltea los primeros?
Como hace para que desde la terminal le complete o le sugiera las carpetas? gracias
Yo tengo más de 3 años como desarrollador y no me había topado con I18n 😅 , gracias midu
¡Gracias!
Solo viendo lo de las rutas ya me he enamorado de next jajajajaja
Hora 2:28:00 pienso todo lo contrario a lo que escribio la chica, yo acepto ser tonto pero aún así tus videos siempre me enseñan algo y tu forma de enseñar es facil de entender, además de que las cosas las explicas a fondo y siempre andas tirando informacion super buena que es dificil de saber si no tenes mas de 5+ años programando. Además de eso todo el contenido que haces es gratis por lo que ayuda un monton a la comunidad, en vez de endeudarnos en bootcamps donde no te enseñan ni el 15% de esto vos lo estas dando gratis y eso es un monton
Gracias por tu mensaje, amigo! Ya se me había olvidado aquel mensaje jajajaj se valoran tus palabras mucho ❤️
Midu usted es el amo de youtube, hace poco sali de Cuba, estoy buscando tabajo ahora mismo. Pero te aseguro en cuanto pille trabajo ganas un subscriptor en twitch. Porque cuando lo haga tu tendras parte de la culpa de ese exito.. Gracias por crear tanto contenido
Muchas gracias, Bárbaro!! 🤗
Midu , cuando acabes el curso de React , piensas sacar algo de Next ?
miduJesus muy buen vídeo.
💥💥💥💥💥💥💣💣💣💣💯💯💯 grande miduuu
GRACIAS POR ENSEÑAR ALGO DE TODO ESE CONOCIMIENTO.
Gracias a ti!!!
Mucha diferencia con Nextjs13? Como para saber si vale la pena dedicarle a este tutorial, gracias
Genioooo!
Midu, ¿todo tu aprendizaje es con documentación sin ver ningún video tutorial, ya sea react, next.js, node, express, django, etc...?, ¿como harias para aprender una herramienta tan visual como figma? Sería conveniente ver videos en ese caso o siempre se recomienda la documentación?
El destino me esta diciendo algo 🔥🔥
Que grande midu
excelente curso🙌
Muchas gracias!!!
Como puede desplegarlo en un app services de azure?
Regresó NEXT!
A la mmmmmmmmmmmm!!!! 8hora. Provecho a todos los que quieran aprender
OMG genial
🤗 Gracias!
El resto del video jajajaja. midugod
1:30:24 "No estoy invocando ningún demonio ni nada".
Es lo que diría cualquier invocador de demonios...
A dia de hoy que ya está next.js 13 vale la pena hacer este curso?
Tengo tu misma fuente pero no me salen tus mismos colores, cómo lo hiciste? Gracias por el video
Tips golds.Eres nuestro Confluence .Tu siguiente proyecto, una web howto-videos con un indice de tips cortos
se que esto no es stackOverFlow pero si alguien sabe como corregir este error --> on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL ( or ) usando estos datos remotos, estaría muy agradecido
jaja se mamo con "resto del video" 😅
Cual tema de VS Code es ese?
Sigue valiendo la pena ver este curso con la salida de nextjs 13?
Una pregunta es necesario usar Redux con Nextjs
Alguien sabe cuántos hosts toca agregar en el archivo 'next.config.js' cuando sale el error en el componente Image del minuto 1:27:00. Ya he agregado varios y cada vez me sale un host diferente luego de reiniciar el servidor. Si alguien puede ayudarme se lo agradecería muchísimo.
justo tengo ahora ese error, he agregado ya 5 hostname y nada. Conseguiste una solución?
Buenas tardes, estoy realizando la practica exacta con la misma API de noticias y me pasa lo siguiente. Al momento de cargar las imagenes asi bien como explica midu y debo ir al config de next para autorizar el dominio, me pasa que cada imagen tiene un dominio distinto por lo que cada vez que me sale el error debo volver a arrancar el repo y sumar la url al domein. Alguien encontro una solucion o le paso lo mismo? Aun no termine el video pero fantastica toda la explicacion.
Yo lo pude resolver así: images: {
remotePatterns: [
{
protocol: "https",
hostname: "**.*",
},]
Funciona. Pero en vista de lo expuesto no se si es una práctica segura. Está en la documentación. nextjs.org/docs/api-reference/next/image
Thanks
Miduuu consulta, estoy haciendo el bootcamp y tengo diagramado luego hacer el de react y desp el de next anterior
Me recomiendas hacer los dos o el anterior ya quedó obsoleto??
Este está más actualizado y además se enfoca sólo en Next. El otro también mete Firebase y está más desactualizado.
@@midulive muchas gracias midu 👨🏻💻 cuando consiga mí primer trabajo además de suscribirme a todo me voy hasta Barcelona a abrazarte
@@nahuelorselli5586 Ya somos dos!! Cuando consigamos trabajo organizamos para ir juntos jajaja
¿Está subido el código a algún sitio?
6:30:42 Agregando i18N y traducciones al proyecto
Ey! de la epoca de 530 subs! Cuanto ha pasado xD
👏👏👏👏👏👏
🤗
como lo puedo hacer al agregar el dominio por el tema de las imagenes?, a mi se me cambia de hostname todo el tiempo. gracias si alguien me puede ayudar 1:27:59
Encontraste la solucion?
@@MrDanielx39 no aun no, como solucion use imagenes fijas
@@MithosDs Ya se cual es el problema por si necesitas respuesta
@@MrDanielx39 aun me serviría ayuda. Me podrías orientar? gracias
cual es la solucion al problema?? no he podido nadaa, ni con remotePattern ni con images, aiuda :(
#challenge Oye Midu, te animas con un clon de Notion?
PD: Sos un genio.
Con la API de las noticias no consigo que me funcione el componente Image de Next. Las URL de las imágenes solo las conozco cuando hago la petición, así que entiendo que no puedo registrarlas en el archivo de configuración. ¿Alguien más tiene este problema?
pudiste arreglarlo?
@@diegoignacio1846 que va, pero si te sirve de consuelo luego el proyecto ese queda un poco apartado
mismo problema, siempre cambia de cdn
si pudiste arreglarlo?
Que extension es esa que rellena las cosas automaticamente?
GitHub Copilot
Me encantó tu terminal, es iterm ? podrías compartir la config ? Saludos! y excelente curso
Se llama Warp y ya viene configurada
@@midulive gracias buen hombre, descargando
@@midulive por aquí de nuevo ¿cómo dejaste el input de texto en la parte de arriba?. Por defecto va abajo y en la doc no aparece cómo configurar eso (es super limitada la doc de configuración)
Arranqué a verlo ayer y dps me doy cuenta que salío react 13 🙃
hola dejo mi sub y like, una pregunta sabes como retirar un virus de la ram sin tener que formatear el equipo? gracias.
es imposible que en una memoria volátil se aloje un virus, debe haber un proceso que lo "clava" ahí, así que como todos los virus... con un antivirus... y si no lo hace, deberías actualizar y ver ese proceso y eliminarlo a manita
@@carloschavezrosario7791 si no tengo dinero para comprar antivirus donde puedo encontrar recursos para aprenderlo
3:20 autocompletado con qué cosa???
midu para cuando algo testing con svelte??