Ottimizzare il caricamento delle immagini su Next.js

Per impostazione predefinita, l'ottimizzazione delle immagini Next.js integrata è disattivata in App Hosting a meno che tu non imposti esplicitamente images.unoptimized su false o utilizzi un Image Loader personalizzato.

Puoi configurare un Image Loader 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 App Hosting backend.
  • Cloud Storage è abilitato nel tuo progetto.
  • Cloud Functions for Firebase è abilitato nel tuo progetto.

Installare l'estensione

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

Configurare l'ottimizzazione delle immagini locali (facoltativo)

Se la tua applicazione utilizza immagini locali che vuoi ottimizzare utilizzando questa estensione, devi configurare il parametro "Nome host" 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 Firebase App Hosting backend. In genere, questo dominio termina con .hosted.app.

Una volta completata l'installazione, l'API Image Processing dovrebbe essere sottoposta a deployment come a funzione in Cloud Functions. Vai alla dashboard Funzioni nella Firebase console e copia l'URL del trigger dell'API Image Processing.

Configurare un Image Loader personalizzato

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

Innanzitutto, aggiungi i seguenti campi al tuo next.config.js file:

// @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 principale 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 e fai il push nel ramo live. Poi, attendi il completamento del rollout di App Hosting.