Componente Image de Next.js

Para la imágenes que están guardadas de manera local es decir dentro de la carpeta del proyecto es necesario hacer un import de la ruta de la imagen por ejemplo:

import profilePic from '../public/me.png'

Next.js va a determinar el width y el height de la imagen.
Si se usa una imagen remota si es necesario especificar las dimensiones ya que Next no tiene acceso a la imagen durante el proceso de build.
Aqui dejo el link de la documentación https://nextjs.org/docs/basic-features/image-optimization

⛰️ Imágenes responsivas

Recursos

• next/image | Next.js

Apuntes

¿Cómo funciona?

• Next.js va creando imágenes de diferentes tamaños en el servidor, las cuales según el tamaño del dispositivo se irán cargando
• Existen servidores los cuales se encargan únicamente de la manipulación de imágenes, los cuales están optimizados para el manejo de imágenes a gran escala
  • Next.js brinda la flexibilidad para el uso de los mismos

📌 **RESUMEN:** Para crear imágenes responsivas se pueden realizar mediante el componente propio de Next.js el cual creará las mismas mediante el servidor de Node.js o también puede delegar este trabajo a servicios especializados en el mismo

Siguiendo la documentación agregué el parámetro objectFit=‘cover’.

<code> <Image src={image.url} width={460} height={460} layout='responsive' objectFit='cover' />

next.config.js →

const config = {
  future: {
    webpack5: true,
  },
  images: {
    //especificamos los dominios q queremos optimizar
    domains: ['images.ctfassets.net']
  }
}