Bildladezeit in Next.js optimieren

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

Sie können einen globalen Next.js-Bild-Loader mit der Firebase-Erweiterung „Image Processing“ konfigurieren, um die On-Demand-Optimierung und Bereitstellung von Bildern in Ihrer Next.js-App auf 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 den Parameter „Hostname“ während der Installation der Erweiterung konfigurieren.

  1. Bei der Erweiterungskonfiguration:Suchen Sie im Schritt „Erweiterung konfigurieren“ nach dem 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 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 Bild-Loader, der die bereitgestellte Image Processing API für jede optimierte Bildkomponente verwendet. Als Optimierung wird die Weiterleitung so umgeschrieben, dass sie über dieselbe Firebase App Hosting-Domain bereitgestellt und im selben globalen CDN wie Ihre Next.js-Anwendung zwischengespeichert wird.

Fügen Sie zuerst die folgenden Felder in Ihre next.config.js-Datei 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 im Stammverzeichnis eine loader.js-Datei 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 die App Hosting-Einführung abgeschlossen ist.