Creo que estudiaré por aparte NEXT, es una herramienta muy potente que siento que el curso queda como básico de otra carrera, exclusiva de NEXT
Lo básico
Construir una web app con React no es fácil
Nuestro proyecto y lo que necesitaremos
Instalando NextJS
Routing
Rutas básicas
Rutas dinámicas
#UnderTheHood setup y páginas: optimizaciones ocultas
#UnderTheHood páginas: pre rendering de páginas
Enlazando páginas
#UnderTheHood enlazando páginas: prefetching automático
API y Debugging
¿Cómo crear API con NextJS?
Creando y consumiendo nuestra propia API
Extendiendo NextJS
Extendiendo el Document
Extendiendo el App
Path alias
Explora las soluciones de CSS en NextJS y su flexibilidad
Finalizando las páginas
Deployment en Vercel
Utilizando Vercel para hacer Deploy
Data Fetching y Pre-rendering
Introducción a los pre-render modes
#UnderTheHood Server Side Rendering: getServerSideProps
#UnderTheHood Static Generation: getStaticProps
#UnderTheHood Static Dynamic Static Generation: getStaticPaths
Deployment
Otras formas de hacer deploy de una app NextJS
Midiendo Performance
Mide Performance en NextJS
El futuro de NextJS
¿Qué será de NextJS en los próximos años?
Conclusiones
Continúa con el Curso de Next.js: Sitios Estáticos y Jamstack
Bonus Next.js 10
Next.js Image
Link y Proxy
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Next.js Image
26/27Recursos
Aportes 15
Preguntas 2
Ordenar por:
🖼️ Next.js image
-
El equipo de Next.js trabajaron en conjunto con ingenieros de google para crear un componente de imágenes
-
Las imágenes quedaron atrás a lo largo del tiempo en la web mientras otras tecnologías evolucionan
-
para ver las dependencias que se pueden actualizar
yarn upgrade-interactive --latest- Dependencias rojas: pasar de grandes versiones
-
Al usar el componente Image lo que hace es usar dos estrategias:
- Lazy loading ⇒ Las imágenes se descargan solo cuando son visibles en la pantalla
- Optimización de tamaño ⇒ Next.js optimizara según lo que especificamos como tamaño recortando y ajustando
- Se puede especificar en Next.js si deseamos usar un servicio de optimización
- En caso de que no se especifique lo hara dentro de su servidor
es uno de los mejores cursos que he visto en platzi, necesitamos un curso avanzado de NEXT!!
Para actualizar en npm yo use estas lineas
npm install -g npm-check-updates
y luego
ncu -u
Un Lazy load nativo de Next y optimización, que cool
Hey ! Si se preguntan como funciona el Lazy loading por debajo usando solo Javascript vanilla, el mismo profesor lo explica en uno de los talleres del Curso de manipulacion del DOM especificamente el “Workshop 2 : Lazy Loading” .
Haciendo uso de Intersection Observer una Api del navegador muy poderosa que tambien se le dedica una clase en el Curso profesional De JavaScript
Espero les ayude !
Llevo varios años ya trabajando con React, pero ver NextJS me hace pensar que debi haberlo aprendido e implementado hace mucho pero mucho tiempo…
y ya va en la 13
Wowwwwwwww, increible esto
Seria bueno un curso avanzado y a fondo de next js. lo estare esperando
existe algo parecido solo para react? sin usar next?
Que tenga Lazy Loading solamente agregando un componente es increíble. Aparte de la optimización de las imágenes
Esta clase si me gustó!! Genial
Para marcar las cosas a actualizar se selecciona con las flechas (arriba y abajo) la dependencia y se oprime la barra espaciadora para marcarla
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.