Cristian Alejandro
No tengo ni puta idea de como integrar el API de contentfull a NextJs
Luis Berenguer
A leer un poco de documentación compañero💪
Joseph Manuel Salen Pantoja
Saludos amigo, antes de este curso se pasa por el Curso de Next.js: Sitios Estáticos y Jamstack, ahí se explica lo que necesitas para integrar el API de Contentful :D adicionalmente la documentación de Contentful es bastante amigable
Andres Prieto
Creo que es bueno mencionar que desde la versión 13 Nextjs eliminó la propiedad "layout"
Ref:
Ulqernesh Karvenae
Ulqernesh Karvenae
Otra forma de calcular el AspectRatioHeight mas escalable es
const calcAspectRatioHeight = (aspectRatio: AspectRatio, width: number) => {
const aspectRatioParts = aspectRatio.split(':')
const [ w , h ] = aspectRatioParts
const height = (parseInt(h) * width) / parseInt(w)
return height
}
Juan Pablo Arango
La imagen de next puede hacer el objectFit, por que es mejor hacerlo con el API ?
Jonathan 🦑 Alvarez
ProfesorGran observación Juan Pablo!
Solo mostraba varias opciones por própositos académicos.
En general, si con next/image funciona tu Layout, así está perfecto 👌
Cristian Mauricio Cavanzo Arias
En calcAspectRatio estamos diciendo a aspectRatio que puede ser una de las siguientes opciones: '1:1' | '4:3' | '16:9' y a width que sea number, esto esta bien sin embargo si aspectRatio cambia de ImageProps tendriamos que tambien cambiar el de la funcion una forma de que siempre se mantenga actualizado los tipos
type ImageProps = { layout: 'responsive' | 'intrinsic' src: string width: number height?: never aspectRatio: '1:1' | '4:3' | '16:9' fit?: 'pad' | 'fill' | 'cropt' } const calcAspectRatio = ( aspectRatio: ImageProps['aspectRatio'], width: ImageProps['width'] ) => {}
Cristian Iñiguez
Mi solución
type AspectRatio = '1:1' | '4:3' | '16:9' export type ContentfulFit = | 'pad' | 'fill' | 'scale' | 'crop' | 'thumb' export type ContentfulFocus = | 'center' | 'face' | 'top' | 'bottom' | 'left' | 'right' export type ImageProps = { layout: 'responsive' | 'intrinsic' src: string width: number height?: never aspectRatio: AspectRatio fit?: ContentfulFit f?: ContentfulFocus quality?: number } function Image({ layout, src, width, aspectRatio, fit = "fill", f , quality}: ImageProps) { const height = calcAspectRatioHeight(aspectRatio, width) const loader = ({ src, width, quality: loaderQuality }: ImageLoaderProps) => { const h = calcAspectRatioHeight(aspectRatio, width) const finalQuality = quality || loaderQuality return src.concat(`?w=${width}&h=${h}&fit=${fit}${f ? `&f=${f}` : ''}${finalQuality ? `&q=${finalQuality}` : ''}`) } return <NextImage layout={layout} src={src} width={width} height={height} loader={loader} /> } const calcAspectRatioHeight = (aspectRatio: AspectRatio, width: number) => { const aspectRatioParts = aspectRatio.split(':') const [w, h] = aspectRatioParts const height = (parseInt(h) * width) / parseInt(w) return height }
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
