Menu

Curso De NextJS

Lecciones del Curso Gratuito

¿Qué es NextJS? 

Hola mundo soy andrea sectoriales y en esta lista de vídeos vamos a hablar acerca de next y the next que yes es un framework que es muy conocido por permitirnos crear aplicaciones de biak que son servir sidewinder o sea que son renderizadas por el servidor entre otras cosas vamos a hablar acerca de sus ventajas la primera como lo mencionamos es que nos permite crear aplicaciones que son renderizadas por el servidor son pre renderizadas normalmente lo que nos ayuda un montón en aspectos como vacío y bueno gracias a sus últimos felices a sus últimos lanzamientos next 10 no sólo es server sidewinder sino que también nos permite construir aplicaciones que son generadas estéticamente así como lo hace gatsby gatsby es otro frame erc que nos permite crear aplicaciones con react pero su énfasis principal está en construir aplicaciones estáticamente generadas y no tanto y no tanto aplicaciones que son servers android como next next nos ofrece pues las dos opciones otra de sus ventajas y una muy grande en mi opinión es que nos permite crear aplicaciones con cero configuración next ya por defecto incluye features cosas como code splitting.

Entrega de la primera asignación

Al mundo soy andreas de web trial es y este es el siguiente vídeo de nuestro curso de next llegues en el vídeo anterior hicimos la introducción a next day es y también vimos un poco cómo funciona su enrutador basado en archivos y al final del vídeo dejamos una asignación y recordamos que lo que hicimos fue crear dos rutas creamos la ruta de index la que tenemos por acá y la ruta de giuseppe que tenemos por acá recordemos que al nombrar un archivo como index estamos indicando que la ruta es básicamente la raíz del directorio actual entonces por lo tanto index para ser la raíz de nuestra aplicación y users sería ir allí giuseppe y aquí tenemos la página de josephs la asignación era crear una ruta de post entonces si nosotros vamos aquí a post vamos a ver que nos devuelven 404 porque no hemos creado la ruta entonces para crear la ruta de posts pues es relativamente lo mismo que hicimos darles pasada vamos a crear dentro de nuestra directorio de páginas un nuevo archivo llamado post punto js aquí nos cargaron unos errores porque todavía no hemos creado nuestro componente entonces vamos a crearlos vamos a decir export default connection post creamos un componente tipo funcional y lo que vamos a volver y sex donde vamos a tener lo mismo que en la ruta de giuseppe un dif y dentro de este día cuando se teme o hering los recuerdos e ir a h1h1 y porque vamos a poner postes escritos de acuerdo vamos a aguardar ahora al guardar vemos que nuestra aplicación con pilot exitosamente y nuestra ruta carga mostrando la página de posts perfecto con esto consideramos entregada a la asignación del vídeo anterior ahora sí vamos a pasar a conocer más sobre las rutas dinámicas por último recuerdan que se están disfrutando este curso the next day es hagan clic en like en este vídeo suscriban sectoriales para más vídeos y si tiene alguna duda o comentario ciento de ser libres de dejarlos allá abajo en los comentarios entonces vamos para el siguiente hoy ah.

¿Cómo crear RUTAS DINÁMICAS con NextJS?

Hola mundo soy andrea de victoria les y en esta tercera lección vamos a aprender a crear rutas dinámicas para nuestra aplicación de estrellas ah antes que nada les quiero agradecer a todos ya todas los que se han interesado por el curso al vídeo de introducción le está yendo súper bien pues como ven en la cantidad de visualizaciones sin likes no es muy grande pero este canal es pequeñito todavía y en comparación a otros vídeos pues son números muy buenos este es el primer vídeo del curso y hay una lista de reproducción para cada uno de los vídeos yo lo voy a dejar en todas las descripciones de los días de este curso pero ahora si empezamos con esta lección primero voy a crear un poco más de estructura en nuestras rutas dentro de nuestra carpeta de páginas voy a crear una nueva carpeta y hace carpeta la voy a llamar posts entonces post y vamos a crear también una carpeta llamada new sex ahora dentro de cada una de estas carpetas voy a poner pues la ruta correspondiente voy a poner posts dentro de la carpeta de posts vamos a ponerlo por acá si lo quiero mover y vamos a mover la carpeta.

Segunda Asignación

Cuando en este vídeo vamos a hacer la revisión y la entrega de la asignación de la lección anterior nada más para recapitular rápidamente en la elección anterior creamos una ruta dinámica para nuestra página de detalles de usuario aprendimos que cualquier ruta que diga algo así como you 6 1 y un 61 esta ruta va a ser macho o va a ser emparejada con este archivo que creamos en la elección anterior también aprendimos que en mex nos provee el objeto del router y este objeto de router tiene varias propiedades entre ellas una propiedad de madera cueva y ese cueva tiene una propiedad llamada y usted el valor de esta propiedad de jóser corresponde a el valor que nosotros pasamos aquí en nuestra url entonces por eso en esta pantalla estamos renderizando pues si es ahora de dos puntos y el valor que nosotros pasamos si pasamos cinco se va a realizar 20 25 y bueno la asignación era básicamente utilizar este mismo conocimiento para crear una ruta dinámica para las páginas de detalles de los posts inclusive podrías haber utilizado este mismo archivo como como plantilla entonces dentro de la carpeta de posts vamos a crear un nuevo archivo se llama post punto js esto va a ser el componente que nos va a renderizar entonces los detalles de un post en específico que querramos ver dentro del componente vamos a exportar un complemento funcional llamado post export default.

¿Cómo navegar entre rutas con LINK?

Holamun2 hoy andreas con wake torales y en este vídeo o en esta lección vamos a aprender a utilizar el componente del link que nos proveen next y es para poder visitar las páginas o mejor dicho las rutas de nuestra aplicación esto lo vamos a hacer creando un componente de xerez o de enap para que lo pueda utilizar cada una de nuestras rutas inicialmente también íbamos a crear un par de componentes más un componente de título y un componente de layout pero ya preparando la lección pues veo que terminó siendo un poco más larga de lo que pensaba y mejor lo pasamos para la siguiente elección por ahí alguien tal vez dice que yo no preparó las lecciones pero ya ven ok ok introducción lista empecemos.

Tercera Asignación

Hola mundo soy andreas de huétor ya les y en este vídeo vamos a hacer entrega de la tercera asignación de este curso recordemos que en el vídeo anterior creamos este componente de napar para que contenga todos los links de nuestra aplicación son links a los diferentes landing pages de la aplicación sin embargo que hasta este momento sólo estamos importando el nap para en los landing pages de la página de post y en los ambientes de la página de youtube pero en la página de detalles de post todavía no le estamos importando lo mismo que en la página de detalles de giuseppe de esto es lo que se trata la asignación nada más importar el mapa y utilizarlo en estas dos rutas entonces vamos a abrir los dos componentes y empezamos por el de post entonces vamos a importar naftas de y tenemos que navegar a la ruta de la carpeta de componentes y dentro de componentes que tenemos acceso al componente de nafta y por el momento lo que vamos a hacer es introducirlo aquí dentro de nuestro distinto entonces innovar y vamos a hacer esto exactamente igual en la página detalles de usuarios vamos a decir import bar from componentes la park y lo vamos a agregar aquí dentro de nuestro día listo vamos a guardar los todos los archivos y nos aseguramos que la aplicación compila exitosamente y ahora sí entonces vamos a la ruta primero de usuarios y ya teníamos el nap farc pero ahora si queremos ir a usuarios guión uno aquí ahora sí ya tenemos el nap park en la ruta de detalles de usuarios asegurémonos que también existe en la de post y ahora si ya la tenemos por acá de aquí puede navegar por ejemplo a landing page de posts y luego puedo ir a la raíz de nuestra aplicación podemos ir al users de giuseppe podemos visitar un usuario en específico y podemos preparar perfecto con esto entonces consideramos entregada la tercera asignación y vamos a pasar al siguiente vídeo recuerda como siempre si te está gustando este curso dale like a este vídeo y suscríbete agua tutoriales para que no te pierdas los vídeos que vienen chao chao a hoy [Música] ah.

Crear un componente SIMPLE de LAYOUT

Volando soy andreas de web trial es y en esta siguiente elección de nuestro curso de next ies vamos a crear un único componente del layout para que todas las páginas de nuestra aplicación lo utilizan creo que este vídeo va a ser un poco más corto que nosotros y lo que vamos a hacer en este vídeo no está pues necesariamente directamente relacionado con next tickets pero nos va a ayudar a estructurar la aplicación para un siguiente tema que es el de cómo utilizar state key essex para darle estilos a nuestra aplicación style.

Estilos de CSS con STYLED JSX

El mundo en el vídeo de hoy vamos a hablar de la herramienta que nextel es influyó por defecto para agregar estilos a nuestras aplicaciones esta herramienta se llama hasta hay autores ex en este enlace podemos acceder a la documentación pero bueno en este vídeo vamos a hablar un poco más sobre todo de lo básico como siempre yo voy a dejar el enlace a esta documentación pues en la descripción del vídeo pero bueno vamos a comenzar style de leyes ex es una librería de css en javascript que nos permite escribir css que es encapsulado y que es scout para estilizar nuestros componentes que quiere decir que el css us code esta palabra es code esto quiere decir que si le vamos a dar estilo a un elemento dentro de uno de nuestros componentes esos estilos por defecto sólo van a afectar a ese elemento dentro de ese componente y no va a afectar a elementos similares en otros componentes que tengan nuestra aplicación entonces para ver un ejemplo primero tenemos que aprender la sintaxis de style y xx para utilizarlo lo que vamos a hacer es abrir una etiqueta de style dentro de nuestro componente en este caso el componente de layout.

Estrategias de RENDERIZADO

Hola mundo en este vídeo vamos hablar sobre tres temas importantes y uno de esos temas es bueno la principal razón por la cual estamos creando y llevando este curso los tres temas a los que me refiero son contenido generado por el cliente contenido generado por el servidor y también vamos a hablar de contenidos estáticos vamos a empezar hablando sobre el contenido generado por el cliente o client side generation en inglés cuando estamos hablando de client generation estamos hablando de que el contenido de una página se renderiza en el navegador utilizando javascript entonces en un request a un servidor web aquí tenemos pues lo que es un browser un cliente y aquí el servidor web entonces cuando el cliente realiza el regrese al servidor web el servidor web devuelve un documento html y este documento html es muy básico pero dentro de ese documento tenemos un enlace a uno o más archivos javascript.

¿Cómo usar SERVER SIDE RENDERING con NEXT? 

Hola mundo en este siguiente vídeo sobre nuestro curso de next y 10 vamos a aprender a generar contenido desde el servidor con este framework a esto también se le conoce en inglés como server state rendering si quieres saber las diferencias entre servir 6 rendering client side rendering y contenido estático te recomiendo que veas el vídeo anterior de este mismo curso de todas maneras voy a explicar súper rápido qué quiere decir cuando el contenido es generado o renderizado por el servidor bueno veamos el mismo diagrama que utilizamos en el vídeo anterior el escenario que tenemos es que un browser o un cliente realiza una cuesta a un servidor web y el servidor en ese momento que recibe ese request se va a encargar de realizar todas las operaciones necesarias para construir el documento html.

¿Cómo usar STATIC CONTENT GENERATION con NEXT?

Holamun2 hoy andreas de victoria les y en este vídeo vamos a aprender cómo hacer que nuestras páginas de next day es esta en prevender izadas mediante la estrategia de static content generation’ static side generation ok ya para estas alturas del curso hemos aprendido cómo generar contenido desde el lado del cliente y en el vídeo anterior aprendimos cómo generar contenido desde el lado del servidor ahora vamos a aprender cómo hacer que ese contenido esté pre renderizado desde que se construyó en la aplicación entonces para aclarar qué quiere decir compre renderizado vamos a utilizar nuevamente la imagen que nos ilustra así como a grandes rasgos qué pasa cuando un cliente como un browser que realizó un recuesta o una solicitud de un servidor web bueno ya vemos que cuando hay contenido generado desde el cliente el cliente primero a ser rico está el servidor por ejemplo a la página de post y el servidor devuelve un documento html casi vacío y uno o varios archivos de jaws pib.

STATIC PATHS para rutas DINÁMICAS 

Al mundo soy andreas de eeuu vectoriales y en este vídeo vamos a aprender a cómo generar los pads creer renderizadas para las páginas estáticas de nuestra aplicación esas páginas que están utilizando ruteo dinámico en el vídeo anterior aprendimos a generar contenido estático con get static props en la ruta de landing page de usuarios sin embargo bueno si necesitamos aquí usuarios aquí vamos a ver en la página lenin page de usuarios sin embargo tuvimos un problema con la página de detalles de cada usuario y bueno aquí el error dice cuál es el problema pero vamos a hablar de esto en el vídeo.

DEPLOYMENTS con VERCEL 

Por el mundo soy andrea sectoriales y en este vídeo vamos a aprender a publicar nuestra aplicación de next games en internet quiero empezar este vídeo agradeciéndole a todas ya todos los que han sido parte del curso ya sea que hayan visto un vídeo que hayan visto todos los vídeos o sólo un pedacito de uno ya sea que hayan dejado un like o no que se hayan suscrito no importa estoy muy impresionado que entre los 12 vídeos que tenemos hasta el momento del curso ya tenemos más de 200 visualizaciones y también entre cada vídeo tenemos más de 60 likes nada más dejo como último recordatorio que si les ha gustado el curso o alguna lección específica hagan clic en el botón de me gusta en el botón de like y se suscriban a huétor ya les también pueden compartir este u otros vídeos o la lista de reproducción completa con otras personas que crean que les pueda interesar también recuerden que pueden seguir a web sociales en twitter voy a dejar por aquí en algún lado el handball de twitter.

Componente HEAD

Por el mundo soy andreas de web seriales y en este vídeo del curso de next les vamos a aprender sobre el componente de head este vídeo está saliendo unos meses más tarde del último vídeo del curso donde aprendimos a hacer deployment de aplicaciones textiles en versión siempre fue mi intención ir actualizando el curso poco a poco mientras next va añadiendo nuevos features y mientras se va actualizando en este vídeo no vamos necesariamente a hablar de un fichero nuevo sino más bien de un componente importante en aplicaciones web que no vimos en vídeos anteriores del componente que estoy hablando y es la cabecera html normalmente para describirla para utilizarla nativamente utilizamos la etiqueta de head que creo que por aquí no está aquí está así la etiqueta de gente dentro de la cabecera de html o dentro del head normalmente se describe información que está relacionada a la página web al documento que estamos visitando tal vez lo más común es verde escrito dentro de la cabecera el título del documento html para describir el título utilizamos el elemento o la etiqueta tyrone.

¿Cómo hacer upgrade a NextJS? 

Hola mundo soy andreas de victoria les y en este vídeo vamos a aprender a hacer of credit de las dependencias de next series react y dom cuando empezamos a este curso la última versión de next y es que estaba disponible era la versión 9.4 punto cero acá vemos por ejemplo en el package punto jason que cuando yo inicie el curso la versión de next que se nos instalado que se instaló fue la versión 9.4 punto 0 y las versiones de biak y acton eran las versiones 16.13 punto 1 ya han pasado varios meses desde que se creó ese primer vídeo del curso y desde entonces verse el actualizado next a la versión 10.0 sin embargo si vos empezaste este curso después de que vérsela actualizo next.

Nuevo componente de IMAGEN de NEXTJS 

Hola mundo soy andrea de huétor ya les y en este vídeo vamos a hablar del componente de imagen de next leyes que nos permite optimizar y servir imágenes dependiendo del dispositivo del usuario uno de los filtros presentes en gatsby que no estaban presentes en next era la optimización automática de imágenes pero a partir de la versión 10.0 en next ya incluye un componente de imagen que nos permite optimizar las mientras las vamos a ir viendo a los usuarios esa optimización bueno nos permite valga la redundancia optimizar la imagen redimensionar la cifra necesario y servir imágenes en formatos modernos como web o web y si es que el dispositivo del usuario lo soporta por aquí tengo un enlace a una documentación de google donde hablan sobre el formato web y les voy a dejar este enlace en la descripción del vídeo por si quieren leer un poco más next si es optimizar las imágenes durante el round time y no durante view time una de las críticas de gatsby.

¿Qué es el CUSTOM APP de NextJS?

Hola mundo soy andreas de victoria les y en este vídeo vamos a tocar un tema un poco más complejo más avanzado the next y les vamos a hablar de por qué o para qué queríamos utilizar un custom up este es el vídeo número 17 de una lista de un curso de next y es que te interesa verlo desde el comienzo voy a dejar un carril en este vídeo y un enlace en la descripción para que lo puedas ver desde el inicio la verdad te lo recomiendo para que comprendas un poco más la aplicación que construimos aquí y de lo que vamos a hablar hoy bueno next yes utiliza un componente llamado para inicializar las páginas de la aplicación si han puesto cuidado hasta el momento en el curso notarán que en ningún lugar nosotros hemos creado un componente de app bueno esto es porque next.