Bildladezeit in Next.js optimieren

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

Sie können einen globalen Next.js-Bild-Loader mit der Bildverarbeitung Firebase Extensions konfigurieren, um die On-Demand-Optimierung und -Bereitstellung von Bildern in Ihrer Next.js-App in App Hosting zu aktivieren.

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 Erweiterung für die Bildverarbeitung auf und wählen Sie In der 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:Suchen Sie im Schritt „Erweiterung konfigurieren“ den Parameter „Hostname“.

  2. Hostname festlegen: Geben Sie die Standarddomain für Ihr Firebase App Hosting Backend ein. Diese Domain endet in der Regel mit .hosted.app.

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

Benutzerdefinierten Bild-Loader einrichten

Erstellen Sie einen Bild Loader , der die bereitgestellte Image Processing API für jede optimierte Bild Komponente verwendet. Zur Optimierung können Sie ihn so umschreiben, dass er 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 der next.config.js Datei hinzu:

// @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 im Stammverzeichnis eine Datei loader.js 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 ein Commit mit diesen Änderungen und übertragen Sie es an Ihren Live-Branch. Warten Sie dann, bis die Einführung von App Hosting abgeschlossen ist.