Curso completo de Next.js 14 con App Router
NEW
almost 2 years ago•November 15, 2023
1:29:04
23,428 views
860 likes
Channel
Interviewed Person
Gonzalo Pozzo (Goncy)
¡Bienvenido/a al curso introductorio a Next.js con App Router! Durante este curso, apenderás los fundamentos (y no tanto) de Next.js con App Router para construir una aplicación web: Restaurancy, un catálogo de restaurantes. El diseño de este curso se plantea de manera incremental, donde cada lección se basa en la anterior. Te recomendamos seguir el orden de las lecciones para obtener el máximo beneficio. Es natural que algunos conceptos puedan resultar complicados al principio o que no siempre sea evidente el motivo detrás de ciertas decisiones. No te preocupes, a medida que avances en el curso y te enfrentes a más ejercicios, así como a la creación de aplicaciones, estos conceptos irán cobrando mayor claridad y sentido. Ten en cuenta que hay diversas formas de lograr los mismos resultados, así que si tienes ideas diferentes, ¡adelante! Curso: https://github.com/goncy/nextjs-course 1:53 Requisitos 3:18 Terminologia 6:25 Índice 9:00 Crear una App con NextJS 11:53 Estructura del proyecto 14:50 Ambientes de renderizado (Servidor y Cliente) 23:52 Mostrando la grilla de Restaurantes (se apala la garra) 27:53 Router (creación de rutas) 32:09 Colocación (ubicación de archivos) 33:10 Navegación (componente de Link) 34:50 Metadatos - Objeto metadata 36:49 generateMetadata (creación de objeto de metadatos personalizado) 37:55 Archivos de Metadatos 38:40 Estados de Carga (loading.tsx) 41:55 Manejo de Errores (error.tsx) 43:16 Uso de una Base de Datos 46:42 Compilando de la Aplicación 49:10 Estrategias de Renderizado - Renderizado Estático 52:20 Renderizado Dinámico 54:30 Streaming 55:25 Pre-renderizado Parcial (experimental) 57:00 Caching 1:00:40 Configuraciones de Revalidación de Caché 1:01:00 cache: no-store 1:02:53 revalidate 1:04:42 Configuración de Segmento de Ruta 1:07:51 Funciones Dinámicas 1:08:40 Revalidación Manual 1:09:20 revalidatePath 1:12:40 revalidateTag 1:13:49 Parámetros de URL 1:17:40 Agrupación de Rutas 1:19:48 Server Actions 1:22:32 Guardado en Favoritos (localStorage) 1:24:30 Pre-renderizado 1:25:25 Lazy Loading Twitter: https://twitter.gonzalopozzo.com TikTok: https://tiktok.gonzalopozzo.com Twitch: https://twitch.gonzalopozzo.com Discord: https://discord.gonzalopozzo.com Github: https://github.gonzalopozzo.com
Goncy
Interviewed: Gonzalo Pozzo (Goncy)
bueno curso introductorio a nextjs con app router dice bienvenido Bienvenida al curso introductorio de nexs con app app router Durante este curso aprenderás los fundamentos y no tanto de nex con app router para construir una aplicación web restauran o sea restauran es la aplicación que vamos a hacer hoy que es esto acá tenemos un catálogo de restaurantes bastante sencillo tenemos este botoncito para favorite arlos que no está implementado tenemos un buscador
sí que si ponemos gol y apretamos enter debería Buscar Y mostrarnos esto y tenemos la posibilidad de entrar y ver los detalles de cada uno de estos restaurantes restauran es como decíamos un catálogo de restaurantes que se ve más o menos así el diseño de este curso se plantea de una manera incremental o sea cada lección se basa en la lección anterior Así que Les recomiendo que sigan el orden de las lecciones para para obtener
el máximo de beneficio y no se salte las cosas porque quieren hacer o lograr cosas más rápido si este curso tiene una parte introductoria técnica bastante importante al principio y después como que se vuelve más práctica Es natural que a lo largo del curso haya algunos conceptos que puedan parecer complicados o no sea evidente el motivo de por qué hacemos ciertas cosas a lo largo de que vayamos avanzando en el curso o de que ustedes se pongan a hacer más más aplicaciones y practiquen
etcétera deberían tomar más sentido así que sigan sí Y dejen las cosas que no les cierran del todo para después o no lo dejen si hay algo que no les cierra si el contenido no es suficiente para resolver alguno de los ejercicios no duden en ir a la documentación oficial tanto de next Como de react que tienen acá los requisitos que ustedes deberían tener para hacer este curso los que yo asumo que deberían tener para hacer este curso es conocimientos básicos de html csc y javascript que si no los tienen
pueden ir a la certificación de responsive We design de free cam tocando acá conocimientos básicos de react que si no los tienen pueden hacer dos pueden hacer el curso oficial de react en s. rea.de bar learn donde les enseñan todas las bases de react o si no tienen el curso de react foundation de nextjs que viene a modo de companion del oficial de nextjs donde Les enseña las bases de react pero medio orientados a lo que va a ser aprender next J después así que
esos dos recursos son los esenciales si no tienen conocimientos después van a tener que tener noj instalado en su computadora y contar con un editor de texto en su preferencia o si no quieren tener el proyecto en su computadora pueden optar por un entorno en línea como code sandbox pero mi recomendación personal es que si pueden correrlo en su computadora va a ser mejor Generalmente cuando empezamos a hacer muchos cambios
o tenemos que hacer un build y después un dev o lo que sea suele ser mejor en su computadora como dicen por ahí stackit está bueno idx también lo que quieran pero mi recomendación personal córralo en su computadora a lo largo de este curso vamos a usar algunos términos que es importante que conozcan pero que no es necesario que memoricen si hay alguno algo que se encuentra en una terminología que no está acá googleen la y generalmente van a van a aparecer
vamos a hablar de routing decide basado en qué URL estamos Qué contenido le vamos a mostrar al usuario si ustedes usaron react router o usaron alguna versión de next es básicamente si yo entro barra contact que me muestre el componente de contacto o similares no vamos a a referir mucho a casing o a C Que es un espacio almacenamiento temporal donde vamos a guardar datos que se van a usar o futuro a corto plazo o a largo plazo o a mediano plazo
