¿Cómo importar una imagen en Next.js?

Next.js es un marco completo basado en React. A diferencia de una aplicación de reacción tradicional, que carga y presenta toda la aplicación en el cliente, Next.js permite que el servidor muestre la carga de la primera página, lo cual es excelente para el SEO y el rendimiento.

Algunas de las características clave de Next.js son: 

• Representación del lado del servidor
• Optimización de imagen
• Generación de sitios estáticos
• Regeneración incremental del sitio.

Puede obtener más información sobre Next.js aquí . En este artículo, aprenderemos a importar imágenes en Next.js usando el componente Imagen.

Componente de imagen en Next.js (siguiente/imagen): El componente de imagen de Next.js es una forma evolucionada del elemento <img/> en HTML. Viene integrado con optimización del rendimiento que ayuda a lograr buenos datos vitales de Core web. Este aumento de rendimiento se tiene en cuenta en el algoritmo de clasificación de Google, lo que mejora la clasificación de nuestro sitio web.

El componente Imagen admite las siguientes optimizaciones integradas: 

1. Rendimiento mejorado: sirve diferentes tamaños de imagen para cada dispositivo, lo que reduce el tamaño de la imagen para dispositivos más pequeños y, por lo tanto, mejora el rendimiento.
2. Cargas de página más rápidas: las imágenes no se cargan hasta que ingresan a la ventana gráfica, lo que permite que la página web se cargue más rápido.
3. Flexibilidad de activos: admite varias configuraciones, como cambiar el tamaño del componente de imagen a través de accesorios.
4. Estabilidad visual: evita automáticamente el cambio de diseño acumulativo, que es un error de diseño que se produce cuando los elementos se desplazan después de que DOM los represente. Determina la estabilidad general del diseño de nuestro sitio web.

Propiedades del componente de imagen: los componentes de imagen admiten los siguientes accesorios: 

• src (obligatorio): esta propiedad acepta una string de ruta, una URL externa o una imagen importada localmente.
• ancho (obligatorio): Representa el ancho original o renderizado de la imagen en píxeles. Para imágenes importadas localmente, esta propiedad es opcional.
• altura (obligatorio): Representa la altura renderizada o la altura original de la imagen en píxeles. Para imágenes importadas localmente, esta propiedad es opcional.
• diseño: determina el comportamiento del tamaño de la imagen cuando cambia el ancho de la ventana gráfica. Admite los siguientes valores: 
  • intrínseco: es el comportamiento predeterminado, que reduce la escala de la imagen al ancho del contenedor, hasta el tamaño de la imagen.
  • fixed: Mantiene la imagen fija al ancho y alto dado.
  • receptivo: escala la imagen para que se ajuste a las dimensiones del contenedor.
  • fill: Hace que la imagen llene el contenedor. También hace que las propiedades de ancho y alto sean opcionales porque el contenedor las determinará.
  • raw: Permite renderizar la imagen sin ningún comportamiento automático.

Trabajar con el componente de imagen: ejecute el siguiente comando para crear un nuevo proyecto Next.js.

npx create-next-app@latest gfg

Estructura del proyecto: 

 

Para el alcance de este artículo, solo nos centraremos en el directorio público y de páginas. El directorio público contiene todos los archivos estáticos que deben servirse cuando se crea la aplicación Next.js para su implementación. 

En este ejemplo, crearemos y agregaremos tres imágenes con diferentes fuentes, una se importará del directorio público, la segunda imagen se entregará a través de la ruta estática del directorio público y la otra se entregará desde una URL externa. . Puede agregar su imagen al directorio público (aquí hemos agregado gfgLogo.png). Y para la URL externa, estamos usando esta imagen, pero para que la URL externa funcione, tendremos que agregar su nombre de dominio al archivo next.config.js para proteger nuestra aplicación de usuarios malintencionados.

Primero limpiaremos un código repetitivo en las páginas/index.js (Página de inicio) e importaremos el componente Imagen. 

import Image from "next/image";
  
const HomePage = () => {
    return (
        <>
            {/* This is a local import, so the 
            height and width props are optional */}
            <div>
                <Image src={gfgLogo} 
                    alt="GFG logo imported from public directory" />
            </div>
  
            {/* This image is also served from public 
            directory but using the static path */}
            <div>
                <Image
                    src="
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
                    alt="GFG logo served with static path of public directory"
                    height="100"
                    width="400"
                />
            </div>
  
            {/* This image is being served from an 
            external URL, for this URL to work we 
            will need to add the hostname 
            'media.geeksforgeeks.org' to our 
            next.config.js file */}
            <div>
                <Image
                    src="
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png"
                    height="100"
                    width="400"
                    alt="GFG logo served from external URL"
                />
            </div>
        </>
    );
};
  
export default HomePage;

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images : {
    domains : ['media.geeksforgeeks.org']
  }
}
  
module.exports = nextConfig

Paso para ejecutar la aplicación: Ejecute su próxima aplicación usando el siguiente comando:

npm run dev

Producción: