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 di elaborazione delle immagini di Firebase per abilitare l'ottimizzazione e la pubblicazione on demand delle immagini in 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 Elaborazione immagini nell' hub delle estensioni di 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 la procedura 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 di elaborazione delle immagini dovrebbe essere sottoposta a deployment come a funzione in Cloud Functions. Vai alla dashboard Funzioni nella console Firebase e copia l'URL del trigger dell'API di elaborazione delle immagini.

Configurare un Image Loader personalizzato

Crea un image loader che utilizzi l'API di elaborazione delle immagini di cui è stato eseguito il deployment per ogni componente image ottimizzato. Per l' ottimizzazione, riscrivilo in modo che venga pubblicato nello stesso dominio Firebase App Hosting e memorizzato nella cache dietro la stessa CDN globale dell'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 invialo al ramo live. Poi, attendi il completamento del lancio di App Hosting.