Ottimizzare il caricamento delle immagini su Next.js

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

Puoi configurare un caricatore di immagini globale Next.js con l'estensione Firebase per l'elaborazione delle immagini per attivare 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.

Installare l'estensione

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

Configura l'ottimizzazione delle immagini locali (facoltativo)

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 arrivi al passaggio "Configura estensione", individua il parametro "Nome host".

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

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

Configurare un caricatore di immagini personalizzato

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

Innanzitutto, aggiungi i seguenti campi al tuo 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 principale con il seguente contenuto:

"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 esegui il push nel branch attivo. Poi, attendi il completamento dell'implementazione di App Hosting.