Recursos estáticos

Next.js puede servir recursos estáticos, como imágenes, desde el directorio public de primer nivel. Los archivos dentro de public pueden ser referenciados desde la raíz de la aplicación de manera similar a pages.

El directorio public también es útil para robots.txt, la verificación de Google Site Verification y cualquier otro recurso estático. Consulta la documentación sobre Servicio de archivos estáticos para aprender más.

Descargar tu foto de perfil

Primero, obtengamos tu foto de perfil.

• Descarga tu foto de perfil en formato .jpg (o usa este archivo).
• Crea un directorio images dentro del directorio public.
• Guarda la imagen como profile.jpg en el directorio public/images.
• El tamaño de la imagen puede ser aproximadamente de 400px por 400px.
• Puedes eliminar el archivo SVG de logo no utilizado directamente bajo el directorio public.

Imagen no optimizada

Con HTML normal, agregarías tu foto de perfil de la siguiente manera:

<img src="/images/profile.jpg" alt="Your Name" />

Sin embargo, esto significa que debes manejar manualmente:

• Asegurar que tu imagen sea responsiva en diferentes tamaños de pantalla
• Optimizar tus imágenes con herramientas o bibliotecas de terceros
• Cargar imágenes solo cuando entren en el viewport

Y más. En cambio, Next.js proporciona un componente Image listo para usar que maneja esto por ti.

Componente Image y optimización de imágenes

next/image es una extensión del elemento HTML <img>, evolucionado para la web moderna.

Next.js también tiene soporte para Optimización de Imágenes por defecto. Esto permite redimensionar, optimizar y servir imágenes en formatos modernos como WebP cuando el navegador lo soporta. Esto evita enviar imágenes grandes a dispositivos con viewports más pequeños. También permite que Next.js adopte automáticamente formatos de imagen futuros y los sirva a navegadores que los soporten.

La Optimización Automática de Imágenes funciona con cualquier fuente de imagen. Incluso si la imagen está alojada en una fuente de datos externa, como un CMS, aún puede ser optimizada.

Usando el componente Image

En lugar de optimizar imágenes en tiempo de compilación, Next.js optimiza imágenes bajo demanda, según las solicitudes de los usuarios. A diferencia de los generadores de sitios estáticos y soluciones estáticas, los tiempos de compilación no aumentan, ya sea que envíes 10 imágenes o 10 millones de imágenes.

Las imágenes se cargan de forma diferida (lazy loaded) por defecto. Esto significa que la velocidad de tu página no se ve penalizada por imágenes fuera del viewport. Las imágenes se cargan cuando aparecen en el viewport.

Las imágenes siempre se renderizan de manera que evitan el Cambio Acumulativo de Diseño (Cumulative Layout Shift), un Core Web Vital que Google va a usar en el ranking de búsqueda.

Aquí tienes un ejemplo usando next/image para mostrar nuestra foto de perfil. Las props height y width deben ser el tamaño de renderizado deseado, con una relación de aspecto idéntica a la imagen fuente.

Nota: Usaremos este componente más adelante en "Pulir el diseño", no es necesario copiarlo todavía.

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Ruta del archivo de imagen
    height={144} // Tamaño deseado con relación de aspecto correcta
    width={144} // Tamaño deseado con relación de aspecto correcta
    alt="Your Name"
  />
);

Para aprender más sobre la Optimización Automática de Imágenes, consulta la documentación.

Para aprender más sobre el componente Image, consulta la referencia API de next/image.