Optimiser le chargement d'images sur Next.js

Par défaut, l'optimisation des images 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 Image Processing 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 backend App Hosting.
• L'API Cloud Storage est activée dans votre projet.
• L'API Cloud Functions for Firebase est activée dans votre projet.

Installer l'extension

Accédez à l'extension de traitement d'images dans le hub d'extensions Firebase, puis sélectionnez Installer dans la console Firebase. Suivez les instructions à l'écran.

Configurer l'optimisation des images locales (facultatif)

Si votre application utilise des images locales que vous souhaitez optimiser à l'aide de cette extension, vous devez configurer le paramètre "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 "Configurer l'extension", recherchez le paramètre "Nom d'hôte".

2. Définissez le nom d'hôte : saisissez le domaine par défaut de votre backend Firebase App Hosting. 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 et copiez l'URL du déclencheur de l'API Image Processing.

Configurer un chargeur d'images personnalisé

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

Commencez par ajouter les champs suivants à votre fichier 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;

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 incluant ces modifications et envoyez-le à votre branche active. Attendez ensuite que le déploiement de App Hosting soit terminé.