Conceptos básicos de Next.js 14
¿Qué es Next.js y por qué aprenderlo si quieres ser frontend senior?
Arquitectura de un proyecto de Next.js
Herramientas y stack utilizado en el curso
Cómo crear rutas en Next.js
Cómo crear Layout en Next.js
Cómo funciona la navegación en Next.js
Manejo de parámetros en rutas en Next.js
React Server Components en Next.js: notación "use Client"
Creación de arquitectura de landing page en Next.js
Quiz: Conceptos básicos de Next.js 14
Manejo de estilos y estáticos en Next.js 14
CSS Modules en Next.js 13
Uso de Sass en Next.js
Cómo utilizar estilos globales en Next.js
Cómo agregar archivos estáticos en Next.js
Manejo y optimización de imágenes con Next Image
Optimización del componente image en Next.js
Optimización de fuentes con Next.js
Creando estilos dinámicos aplicando condicionales en Next.js
Quiz: Manejo de estilos y estáticos en Next.js 14
Data Fetching en Next.js
Creación de tienda de Shopify para un proyecto en Next.js
Manejo de variables de entorno en Next.js
Cómo obtener información de una API con Next.js
Manejo de estado de carga con el archivo loading.tsx
Route Grouping en Next.js
Manejo de errores en la UI con el archivo error.tsx
Quiz: Data Fetching en Next.js
Next.js Avanzado
Implementando páginas de Not Found y error global
Cómo impactan los React Server Components en un proyecto en Next.js
Cuándo utilizar layout o template en Next.js
Arquitectura profesional para data fetching en un proyecto en Next.js
Next.js para backend: manejando rutas con archivos Route Handlers
Proyecto: implementando la página de tienda
Patrones de data fetching en Next.js
Proyecto: filtrando categorías de productos
Data fetching de parámetros en el servidor y cliente
Proyecto: página de producto y arreglos en el sitio
Cómo funciona el Fetch y el Caché de Next.js
Revalidando cache con revalidateTag y revalidatePath en Next.js
Cómo hacer redirects en Next.js
Proyecto: HTML dinámico en la descripción del producto
Mejorando SEO de una página en Next.js
Quiz: Next.js Avanzado
Autenticación y autorización
Manejando autenticación y autorización con Storefront APÏ de Shopify
Server Actions en Next.js
Proyecto: proceso de Sign-Up con GraphQL
Manejo de cookies para colocar un token de acceso de un proyecto en Next.js
Cómo implementar un flujo de login en un proyecto en Next.js
Validando token de acceso de usuario en un proyecto en Next.js
Proyecto: implementando el carrito de compras
Manejo de estado global con zustand en Next.js
Proyecto: agregando items al carrito de compras
Cómo integrar el checkout de Shopify a un proyecto en Next.js
Implementar middleware en proyecto en Next.js para protección de rutas
Inteligencia Artificial
Creando componente de chatbot de ventas con la SDK IA de Vercel
Implementación de un bot de ventas en una app Next.js
Performance
Optimización de carga con parallel routing en Next.js
Análisis de bundle para Next.js 14
Quiz: Performance
Frontend Ops
Edge runtime
Despliegue de un proyecto Next.js en Vercel
Mejores prácticas en arquitecturas empresariales
Quiz: Frontend Ops
Next.js es parte de tu nuevo stack
¡Has creado un proyecto en Next.js!
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Optimización del componente image en Next.js
15/57Aportes 8
Preguntas 1
Clase15 03/03/2024 Image
Image component es una version extendida y mejorada de la etiqueta <img> con caracteristicas de optimización:
- Optimización en tamaño.
- Estabilidad visual previniendo el layout shift
- Carga de paginas rapida mediante lazy loading con opciones de blur.
- Flexibilidad de Archivos: ON-DEMAND rescalamiento de imagenes, siempre para imagenes en server remotos.
Para imagenes locales se pueden importar .jpg,.png,.webp
Next automaticamente determina el width y height de la imagen basada en el archivo importado.
Para imagenes remotas es necesario indicar el width y height y opcionalmente el blurDataURL, estos tamaños no determinan el tamaño de renderizado de archivo de la imagen.
Para asegurar una optimizacion segura de imagenes es necesario configurar un patron en archivo next.config.js
El Loader predeterminado de las aplicaciones Next.js utiliza la API de optimización de imágenes incorporada, que optimiza las imágenes desde cualquier lugar de la web y, a continuación, las sirve directamente desde el servidor web Next.js. Si desea servir sus imágenes directamente desde un CDN o servidor de imágenes, puede escribir su propia función de carga con unas pocas líneas de JavaScript.
Dado que next/image se ha diseñado para garantizar unos buenos resultados de rendimiento, no puede utilizarse de forma que contribuya al desplazamiento del diseño, y debe dimensionarse de una de estas tres maneras:
Automáticamente, mediante una importación estática
Explícitamente, incluyendo una propiedad de anchura y altura
Implícitamente, usando fill, que hace que la imagen se expanda hasta llenar su elemento padre.
Styling
El estilo del componente Image es similar al estilo de un elemento <img> normal, pero hay que tener en cuenta algunas directrices:
Utilice className o style, no styled-jsx.
En la mayoría de los casos, recomendamos utilizar la propiedad className. Puede ser un módulo CSS importado, una hoja de estilos global, etc.
También puede utilizar la propiedad style para asignar estilos en línea.
No puede usar styled-jsx porque está limitado al componente actual (a menos que marque el estilo como global).
Cuando se usa fill, el elemento padre debe tener position: relative
Cuando se utiliza fill, el elemento padre debe tener display: block
He aquí un resumen de los props disponibles para el componente de imagen:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?