Bildladezeit in Next.js optimieren

Die integrierte Next.js-Bildoptimierung ist auf App Hosting standardmäßig 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 zur Bildverarbeitung 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 Bilder optimieren (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 Abschluss der Installation sollte die Image Processing API als 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 Image-Loader, der die bereitgestellte Image Processing API für jede optimierte Bildkomponente verwendet. Als Optimierung können Sie die Rewrite-Regel so anpassen, dass sie unter derselben Firebase-App Hosting-Domain bereitgestellt und im selben globalen CDN wie Ihre Next.js-Anwendung zwischengespeichert wird.

Fügen Sie zuerst die folgenden Felder Ihrer 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 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 ein Commit, das diese Änderungen enthält, und übertragen Sie es an Ihren Live-Zweig. Warten Sie dann, bis das App Hosting-Rollout abgeschlossen ist.