Conceptos básicos de Next.js 14
Optimización Web con Next.js: Velocidad y Rendimiento Mejorados
Creación de Proyectos Next.js con TypeScript y App Router
Creación de Tienda Online con NextGIS y Shopify
Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico
Implementación de Layouts en Next.js: Globales y Locales
Navegación Optimizada con Next.js Usando el Componente Link
Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica
Uso de React Server Components en Next.js: Cliente vs Servidor
Arquitectura de Componentes para Landing Page en Next.js
Quiz: Conceptos básicos de Next.js 14
Manejo de estilos y estáticos en Next.js 14
Implementación de CSS Modules en Next.js para Estilizar Componentes
Instalación y Configuración de Sass en Next.js
Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web
Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos
Optimización de Imágenes con Next.js: Uso de Next.Image
Optimización y Responsividad con NextImage en Next.js
Optimización de Fuentes de Google en Next.js con Roboto
Estilos Dinámicos en React con Classnames y useState
Quiz: Manejo de estilos y estáticos en Next.js 14
Data Fetching en Next.js
Creación de Tienda en Shopify para Desarrollo con Next.js
Creación y uso de variables de entorno en Next.js
Consumo de APIs con Shopify y React Server Components
Implementación de Loader en Next.js para Carga de Productos
Implementación de Root Grouping en Next.js
Manejo de Errores en Next.js con React Error Boundary
Quiz: Data Fetching en Next.js
Next.js Avanzado
Manejo de Errores y Páginas 404 en Next.js
React Server Components en Next.js: Renderizado y Optimización
Diferencias entre archivos Template y Layout en Next.js
Arquitectura Escalable para Aplicaciones de Software
Creación de APIs con Next.js y Road Handlers
Configuración y Creación de Colecciones en Shopify
Patrones de Fetching en Next.js: Secuencial y Paralelo
Filtrado Dinámico de Productos en Shopify mediante API Collections
Uso de searchParams y params en componentes React cliente-servidor
Implementación de la Vista de Producto en TypeScript y React
Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas
Revalidación de Caché en Next.js: Endpoints por Tag y Path
Redirección en Next.js: Server y Client Components
Creación de un Componente React para Sanitizar HTML
SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web
Quiz: Next.js Avanzado
Autenticación y autorización
Implementación de API GraphQL en Shopify para Autenticación Segura
Uso de Server Actions en Next.js para Formularios React
Implementación de Signup con GraphQL y Shopify
Implementación de Cookies de Acceso en Shopify con Next.js
Implementación de Flujo de Login con Tokens y Cookies
Validación de Access Tokens en Next.js con GraphQL y Cookies
Implementación de Carrito de Compras con React Icons
Manejo de estado global con Sustant en Next.js 13
Implementación de Carrito de Compras en JavaScript y CSS
Solución de errores de hidratación en carritos con Next.js y Shopify
Implementación de Middlewares en Next.js para Control de Acceso
Inteligencia Artificial
Implementación de Chatbots con Next.js y Vercel AI SDK
Creación de un Chatbot de Ventas con Personalidad y Contexto
Performance
Implementación de Parallel Routing en Next.js para Cargas Independientes
Análisis de Bundle en Next.js con Bundle Analyzer
Quiz: Performance
Frontend Ops
"Implementación del Edge Runtime en Next.js"
Despliegue de Aplicaciones NxJS en Vercel
Arquitectura de Proyectos Next.js para Entornos Empresariales
Quiz: Frontend Ops
Next.js es parte de tu nuevo stack
Next.js: Backend y Frontend con React Server Components
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Optimización y Responsividad con NextImage en Next.js
15/57Aportes 10
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?