Optimiser le chargement d'images sur Next.js

Par défaut, l'optimisation d'image Next.js intégrée est désactivée sur App Hosting sauf si vous définissez explicitement images.unoptimized sur "false" ou si vous utilisez un chargeur d'image personnalisé.

Vous pouvez configurer un chargeur d'image global Next.js avec l'extension Firebase Image Processing pour activer l'optimisation et la diffusion à la demande d'images dans votre application Next.js sur App Hosting.

Prérequis

  • Vous disposez d'un projet Firebase et d'un App Hosting backend.
  • Cloud Storage est activé dans votre projet.
  • Cloud Functions for Firebase est activé dans votre projet.

Installer l'extension

Accédez à l'extension Image Processing Extension dans le hub d'extensions Firebase, puis sélectionnez Install in Firebase Console (Installer dans la console Firebase). Suivez les instructions à l'écran.

Configurer l'optimisation locale des images (facultatif)

Si votre application utilise des images locales que vous souhaitez optimiser à l'aide de cette extension, vous devez configurer le paramètre "Hostname" (Nom d'hôte) lors du processus d'installation de l'extension.

  1. Lors de la configuration de l'extension : lorsque vous atteignez l'étape "Configure extension" (Configurer l'extension), recherchez le paramètre "Hostname" (Nom d'hôte).

  2. Définissez le nom d'hôte : saisissez le domaine par défaut de votre Firebase App Hosting backend. Ce domaine se termine généralement par .hosted.app.

Une fois l'installation terminée, l'API Image Processing doit être déployée en tant que fonction dans Cloud Functions. Accédez au tableau de bord Functions dans la console Firebase, puis copiez l'URL de déclencheur de l'API Image Processing.

Configurer un chargeur d'image personnalisé

Créez un chargeur d'image qui utilise l'API Image Processing déployée pour chaque composant d'image optimisé. Pour optimiser le processus, réécrivez-le afin qu'il soit diffusé sous le même Firebase App Hosting domaine et mis en cache derrière le même CDN mondial que votre application Next.js.

Pour commencer, ajoutez les champs suivants à votre next.config.js fichier :

// @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;

Créez ensuite un fichier loader.js dans votre répertoire racine avec le contenu suivant :

"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}`;
}

Créez un commit qui inclut ces modifications et envoyez-le à votre branche active. Attendez ensuite que le déploiement de App Hosting soit terminé.