Tener en cuenta que la API de contentful sólo soporta tamaños menores a 4000. Si el height o el width superan ese valor salta un error y no se renderiza la imágen.
Introducción y requisitos para tomar el curso
¿Cómo llevar Next.js a producción?
Variables de entorno
¿Para qué necesitamos variables de entorno?
Moviendo las llaves a variables de entorno
Llaves de alcance público (browser) y privadas (server)
Paquete cross-env y consideraciones en otros sistemas operativos
Imágenes responsivas
Componente Image de Next.js
Image API: configurando nuestro propio loader avanzado
Router
Shallow navigation, router.query y data fetching
next/link y React refs
Prefetching de rutas
Páginas de error
Personalizando las páginas de error 404 y 500
Páginas de errores avanzadas y cómo reusarlas
Preview Mode
CMS y Preview Mode
Configurando el Preview Mode en Contenful
Aceptando Preview Mode en nuestra App
Asà se ve en nuestro CMS y App
Deploy
¿Dónde puedo hacer deploy?
Cómo hacer deploy a Vercel
Siguientes pasos
Continúa con el Curso de Next.js: Internacionalización
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Comando: git checkout -b dev 3-image-loader
Aportes 3
Preguntas 2
Tener en cuenta que la API de contentful sólo soporta tamaños menores a 4000. Si el height o el width superan ese valor salta un error y no se renderiza la imágen.
No tengo ni puta idea de como integrar el API de contentfull a NextJs
Este es mi componente Image con algunas mejoras en el tipado
// components/Image.tsx
import { FC } from 'react'
import NextImage, { ImageLoader } from 'next/image'
type AspectRatio = '1:1' | '4:3' | '16:9'
const aspectRatioToRatio: { [key in AspectRatio]: number } = {
'1:1': 1,
'4:3': 3 / 4,
'16:9': 9 / 16,
}
function calcAspectRatio(aspectRatio: AspectRatio, width: number): number {
const ratio = aspectRatioToRatio[aspectRatio]
return Math.floor(width * ratio)
}
type ImageProps = {
layout: 'fill' | 'fixed' | 'intrinsic' | 'responsive' | undefined
src: string
width: number
height?: never
aspectRatio: AspectRatio
fit?: 'pad' | 'fill' | 'crop' | 'scale'
}
const Image: FC<ImageProps> = ({
layout,
src,
width,
aspectRatio,
fit = 'scale',
}) => {
const height = calcAspectRatio(aspectRatio, width)
const loader: ImageLoader = (args) => {
const loaderHeight = calcAspectRatio(aspectRatio, args.width)
return `${args.src}?w=${width}&h=${loaderHeight}&fit=${fit}`
}
return <NextImage {...{ layout, src, width, height, loader }} unoptimized />
}
export default Image
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. RegÃstrate o inicia sesión para participar.