Bildladezeit in Next.js optimieren

Standardmäßig ist die integrierte Next.js-Bildoptimierung in App Hosting deaktiviert, es sei denn, Sie setzen images.unoptimized explizit auf „false“ oder verwenden einen benutzerdefinierten Image Loader.

Sie können einen globalen Next.js-Image-Loader mit der Firebase-Erweiterung „Image Processing“ konfigurieren, um die On-Demand-Optimierung und -Bereitstellung von Bildern in Ihrer Next.js-Anwendung in App Hosting zu ermöglichen.

Vorbereitung

  • Sie haben ein Firebase-Projekt und ein App Hosting-Backend.
  • Cloud Storage ist in Ihrem Projekt aktiviert.
  • Cloud Functions for Firebase ist in Ihrem Projekt aktiviert.

Erweiterung installieren

Rufen Sie im Firebase Extensions Hub die Image Processing Extension auf und wählen Sie In Firebase Console installieren aus. Folgen Sie der Anleitung auf dem Bildschirm.

Lokale Bildoptimierung konfigurieren (optional)

Wenn Ihre Anwendung lokale Bilder verwendet, die Sie mit dieser Erweiterung optimieren möchten, müssen Sie während der Installation der Erweiterung den Parameter „Hostname“ konfigurieren.

  1. Während der Erweiterungskonfiguration: Wenn Sie den Schritt „Erweiterung konfigurieren“ erreichen, suchen Sie den Parameter „Hostname“.

  2. Hostname festlegen: Geben Sie die Standarddomain für Ihr Firebase App Hosting-Backend ein. Diese Domain endet normalerweise auf .hosted.app.

Nach Abschluss der Installation sollte die Image Processing API als Funktion in Cloud Functions bereitgestellt werden. Rufen Sie in der Firebase-Konsole das Functions-Dashboard auf und kopieren Sie die Trigger-URL der Image Processing API.

Benutzerdefinierten Image-Loader einrichten

Erstellen Sie einen Image Loader, der die bereitgestellte Image Processing API für jede optimierte Bildkomponente verwendet. Als Optimierung können Sie die Datei umschreiben, damit sie unter derselben Firebase App Hosting-Domain bereitgestellt und hinter demselben globalen CDN wie Ihre Next.js-Anwendung im Cache gespeichert wird.

Fügen Sie zuerst die folgenden Felder in die Datei next.config.js ein:

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

Erstellen Sie dann eine loader.js-Datei in Ihrem Stammverzeichnis mit folgendem Inhalt:

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

Erstellen Sie einen Commit, der diese Änderungen enthält, und übertragen Sie ihn per Push an Ihren Live-Zweig. Warten Sie dann, bis das Roll-out von App Hosting abgeschlossen ist.