Optimiza la carga de imágenes en Next.js

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

Puedes configurar un cargador de imágenes global de Next.js con la extensión de procesamiento de imágenes de Firebase para habilitar la optimización y la publicación de imágenes on demand en tu app de Next.js en App Hosting.

Requisitos previos

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

Instala la extensión

Navega a la extensión de procesamiento de imágenes en el centro de extensiones de Firebase y selecciona Instalar en 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 "Nombre de host".

  2. Establece el nombre de host: Ingresa el dominio predeterminado de tu backend de App Hosting de Firebase. 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 de Functions en 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 procesamiento de imágenes implementada para cada componente de imagen optimizado. Como optimización, reescribe el contenido para que se entregue en el mismo dominio App Hosting de Firebase y se almacenen en caché en la misma CDN global que tu aplicación de Next.js.

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

// @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 el 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.