Ottimizzare il caricamento delle immagini su Next.js

Per impostazione predefinita, l'ottimizzazione delle immagini Next.js integrata è disabilitata su App Hosting, a meno che non imposti esplicitamente images.unoptimized su false o utilizzi un caricatore di immagini personalizzato.

Puoi configurare un caricatore di immagini globale Next.js con l'estensione Firebase Image Processing per abilitare l'ottimizzazione e la pubblicazione on demand delle immagini nella tua app Next.js su App Hosting.

Prerequisiti

  • Hai un progetto Firebase e un backend App Hosting.
  • Cloud Storage è abilitato nel tuo progetto.
  • Cloud Functions for Firebase è abilitato nel tuo progetto.

Installa l'estensione

Vai all'estensione Image Processing nell'hub di Firebase Extensions e seleziona Installa nella console Firebase. Segui le istruzioni sullo schermo.

(Facoltativo) Configura l'ottimizzazione delle immagini locali

Se la tua applicazione utilizza immagini locali che vuoi ottimizzare utilizzando questa estensione, devi configurare il parametro "Hostname" durante il processo di installazione dell'estensione.

  1. Durante la configurazione dell'estensione: quando raggiungi il passaggio "Configura estensione", individua il parametro "Nome host".

  2. Imposta il nome host: inserisci il dominio predefinito per il tuo backend Firebase App Hosting. Questo dominio in genere termina con .hosted.app.

Al termine dell'installazione, l'API Image Processing dovrebbe essere implementata come funzione in Cloud Functions. Vai alla dashboard di Functions nella consoleFirebase e copia l'URL trigger dell'API Image Processing.

Configura un caricatore di immagini personalizzato

Crea un caricatore di immagini che utilizzi l'API Image Processing di cui è stato eseguito il deployment per ogni componente immagine ottimizzato. Come ottimizzazione, riscrivilo in modo che venga pubblicato nello stesso dominio Firebase App Hosting e memorizzato nella cache dietro la stessa CDN globale della tua applicazione Next.js.

Innanzitutto, aggiungi i seguenti campi al file 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;

Poi crea un file loader.js nella directory root con i seguenti contenuti:

"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 un commit che includa queste modifiche ed eseguine il push nel branch attivo. Poi, attendi il completamento dell'implementazione di App Hosting.