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'images personnalisé.

Vous pouvez configurer un chargeur d'images global Next.js avec l'extension Firebase de traitement des images pour activer l'optimisation et la diffusion à la demande des 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 Traitement des images 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 arrivez à 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 de traitement des images 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 de traitement des images.

Configurer un chargeur d'images personnalisé

Créez un chargeur d'images qui utilise l'API de traitement des images déployée pour chaque composant d'imageoptimisé. 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é.