El componente Image Nextjs

¿Para qué se utiliza el componente Image de Nextjs?

El componente de Nextjs permite mostrar imágenes optimizadas de acuerdo a la resolución de pantalla que el usuario este utilizando. También tiene otras ventajas sobre la etiqueta como mostrar una imagen de mejor calidad cuando la imagen se esta escalando a la resolución deseada.

1. Actualizamos el componente CreatePostWizard utilizando el componente Image de Nextjs.

   const CreatePostWizard = () => {
       // ...
   
       return (
           <div className="flex w-full gap-3">
               <Image
                   src={user.imageUrl}
                   width={120}
                   height={120}
                   alt="Profile image"
                   className="h-14 w-14 rounded-full"
               />
               <input
                   placeholder="Type some emojis"
                   className="grow bg-transparent outline-none"
               />
           </div>
       )
   }
   

   De igual manera actualizamos el componente PostView de Nextjs.

   const PostView = (props: PostWithUser) => {
       return (
           <div
               key={`post-${props.post.id}`}
               className="flex w-full gap-3 border-b border-slate-400 p-8"
           >
               <Image
                   src={props.author?.imageUrl ?? ''}
                   width={120}
                   height={120}
                   alt="Profile image"
                   className="h-14 w-14 rounded-full"
               />
               ...
           </div>
       )
   }
   

   Al momento de intentar utilizar el componente Image con imágenes externas, descubriremos que se genera un error dentro de Nextjs, y esto es debido a que debemos indicar la lista de dominios de los cuales deseamos permitir que se copie la image y se genere una versión optimizada.

2. Abrimos el archivo next.config.mjs y agregamos el dominio img.clerk.com que es donde clerk almacena las imágenes de los perfiles de usuario.

   await import('./src/env.mjs')
   
   const config = {
       reactStrictMode: true,
       images: {
           domains: ['img.clerk.com'],
       },
       // ..
   }
   
   export default config
   

   Como podemos ver domains es un arreglo, por lo que podemos incluir dominios adicionales que interactúen con el componente Image.

3. Empujamos los cambios a GitHub para que Vercel realice el despliegue de la aplicación en producción.

   git add next.config.mjs src/pages/index.tsx
   git commit -m "Reemplazadas las etiquetas picture/img por el componente Image de Nextjs"
   git push -all
   

4. Revisa la aplicación desplegada en Vercel y que las imágenes estén debidamente optimizadas para las distintas resoluciones.

La etiqueta Image de Nextjs nos ha permitido utilizar una sola referencia a las imágenes y esta ha podido ser optimizada para diferentes dispositivos con diferentes resoluciones. También hemos comprobado que es posible incluso optimizar imágenes que se encuentran fuera de nuestro propio dominio utilizando la configuración de Nextjs.