Integración de la API de Contentful con Next.js para Imágenes

Clase 7 de 19 • Curso de Next.js: Optimización y Deploy a Producción

Contenido del curso

Introducción y requisitos para tomar el curso

1
Variables de entorno seguras en Next.js para producción
02:59 min

Variables de entorno

Imágenes responsivas

Router

Páginas de error

Preview Mode

Deploy

Siguientes pasos

19
Despliegue de Next.js: Variables, Imágenes y Producción en Vercel
01:19 min

Tomar examen

Resumen

Comando: git checkout -b dev 3-image-loader

Comentarios

Angelo Zambrano

student•

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.

Cristian Alejandro

student•

No tengo ni puta idea de como integrar el API de contentfull a NextJs

Luis Berenguer

student•

A leer un poco de documentación compañero💪

Joseph Manuel Salen Pantoja

student•

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

Cesar Gonzalez Groh

student•

No entendí por qué hay que volver a calcular el height dentro del loader

Pablo Orozco Monte

student•

En el loader llega el width de las versiones más pequeñas de la misma imagen, ej: 750, 400, 300, 150. Entonces se debe calcular el height de cada una.

Andres Prieto

student•

Creo que es bueno mencionar que desde la versión 13 Nextjs eliminó la propiedad "layout"

Ref:

Ulqernesh Karvenae

student••

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) =&gt; {
    const h = calcAspectRatioHeight(aspectRatio, width)
    const finalQuality = quality || loaderQuality
    return src.concat(`?w=${width}&amp;h=${h}&amp;fit=${fit}${f ? `&amp;f=${f}` : ''}${finalQuality ? `&amp;q=${finalQuality}` : ''}`)
  }

  return &lt;NextImage layout={layout} src={src} width={width} height={height} loader={loader} /&gt;
}


const calcAspectRatioHeight = (aspectRatio: AspectRatio, width: number) =&gt; {
  const aspectRatioParts = aspectRatio.split(':')

  const [w, h] = aspectRatioParts
  const height = (parseInt(h) * width) / parseInt(w)

  return height
}

Ulqernesh Karvenae

student•

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

student•

La imagen de next puede hacer el objectFit, por que es mejor hacerlo con el API ?

Jonathan 🦑 Alvarez

teacher•

Gran 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

student•

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

student•

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

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) =&gt; {
    const h = calcAspectRatioHeight(aspectRatio, width)
    const finalQuality = quality || loaderQuality
    return src.concat(`?w=${width}&amp;h=${h}&amp;fit=${fit}${f ? `&amp;f=${f}` : ''}${finalQuality ? `&amp;q=${finalQuality}` : ''}`)
  }

  return &lt;NextImage layout={layout} src={src} width={width} height={height} loader={loader} /&gt;
}


const calcAspectRatioHeight = (aspectRatio: AspectRatio, width: number) =&gt; {
  const aspectRatioParts = aspectRatio.split(':')

  const [w, h] = aspectRatioParts
  const height = (parseInt(h) * width) / parseInt(w)

  return height
}

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']
) => {}

// 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

Integración de la API de Contentful con Next.js para Imágenes

Introducción y requisitos para tomar el curso

Variables de entorno seguras en Next.js para producción

Variables de entorno

Uso seguro de variables de entorno en aplicaciones Next.js

Manejo de Variables de Entorno en Next.js y Git

Variables de entorno en Next.js: servidor vs. cliente

Uso de cross-env para Variables de Entorno en JavaScript

Imágenes responsivas

Integración de Next.js con API de Imágenes de Contentful