Optimiza la carga de imágenes en Next.js

De forma predeterminada, la optimización de imágenes integrada de Next.js está inhabilitada en App Hosting, a menos que establezcas explícitamente images.unoptimized como falso o uses un cargador de imágenes personalizado.

Puedes configurar un cargador de imágenes global de Next.js con la extensión de Firebase Image Processing para habilitar la optimización y la entrega de imágenes a pedido en tu app de Next.js en App Hosting.

Requisitos previos

  • Tienes un proyecto de Firebase y un App Hosting backend.
  • Cloud Storage está habilitado en tu proyecto.
  • Cloud Functions for Firebase está habilitado en tu proyecto.

Instala la extensión

Navega a la extensión Image Processing en el centro de extensiones de Firebase y selecciona Install in Firebase Console. Sigue las instrucciones en pantalla.

Configura la optimización de imágenes locales (opcional)

Si tu aplicación usa imágenes locales que deseas optimizar con esta extensión, debes configurar el parámetro "Hostname" durante el proceso de instalación de la extensión.

  1. Durante la configuración de la extensión: Cuando llegues al paso "Configurar extensión", busca el parámetro "Hostname".

  2. Establece el nombre de host: Ingresa el dominio predeterminado para tu Firebase App Hosting backend. Por lo general, este dominio termina en .hosted.app.

Una vez que se complete la instalación, la API de Image Processing se debe implementar como una función en Cloud Functions. Navega al panel Functions en la Firebase console y copia la URL del activador de la API de Image Processing.

Configura un cargador de imágenes personalizado

Crea un cargador de imágenes que use la API de Image Processing implementada para cada componente de imagen optimizada. Como una optimización, reescríbelo para que se entregue en el mismo Firebase App Hosting dominio y se almacene en caché detrás de la misma CDN global que tu aplicación de Next.js.

Primero, agrega los siguientes campos a tu next.config.js archivo:

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./loader.js",
  },
  async rewrites() {
    return [
      {
        source: "/_fah/image/:path*",
        destination:
          "<CLOUD_FUNCTIONS_URL>/:path*",
      },
    ];
  },
}

module.exports = nextConfig;

Luego, crea un archivo loader.js en tu directorio raíz con el siguiente contenido:

"use client"

export default function myImageLoader({ src, width, quality }) {
  if (process.env.NODE_ENV === "development") {
    return src;
  }

  const operations = [
    {
      operation: "input",
      type: "url",
      url: src,
    },
    { operation: "resize", width: width },
    { operation: "output", format: "webp", quality: quality || 75 },
  ];

  const encodedOperations = encodeURIComponent(JSON.stringify(operations));

  return `/_fah/image/process?operations=${encodedOperations}`;
}

Crea una confirmación que incluya estos cambios y envíala a tu rama activa. Luego, espera a que se complete el lanzamiento de App Hosting.