Optymalizowanie wczytywania obrazów w Next.js

Domyślnie wbudowana optymalizacja obrazów Next.js jest wyłączona w App Hosting, chyba że jawnie ustawisz images.unoptimized na wartość false lub użyjesz niestandardowego modułu wczytywania obrazów.

Możesz skonfigurować globalny moduł wczytywania obrazów Next.js za pomocą rozszerzenia Firebase do przetwarzania obrazów, aby umożliwić optymalizację i dostarczanie obrazów na żądanie w aplikacji Next.js na platformie App Hosting.

Wymagania wstępne

  • Masz projekt w Firebase i backend App Hosting.
  • Usługa Cloud Storage jest włączona w Twoim projekcie.
  • Usługa Cloud Functions for Firebase jest włączona w Twoim projekcie.

Instalowanie rozszerzenia

W centrum rozszerzeń w Firebase przejdź do rozszerzenia Image Processing i kliknij Install in Firebase Console (Zainstaluj w konsoli Firebase). Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.

Skonfiguruj optymalizację obrazów lokalnych (opcjonalnie).

Jeśli aplikacja używa obrazów lokalnych, które chcesz zoptymalizować za pomocą tego rozszerzenia, podczas instalacji rozszerzenia musisz skonfigurować parametr „Nazwa hosta”.

  1. Podczas konfigurowania rozszerzenia: gdy dojdziesz do kroku „Skonfiguruj rozszerzenie”, znajdź parametr „Nazwa hosta”.

  2. Ustaw nazwę hosta: wpisz domyślną domenę backendu Firebase App Hosting. Ta domena zwykle kończy się na .hosted.app.

Po zakończeniu instalacji interfejs Image Processing API powinien zostać wdrożony jako funkcja w Cloud Functions. Otwórz panel funkcji w konsoli Firebase i skopiuj adres URL aktywatora interfejsu Image Processing API.

Konfigurowanie niestandardowego modułu wczytywania obrazów

Utwórz moduł ładowania obrazów, który używa wdrożonego interfejsu Image Processing API dla każdego zoptymalizowanego komponentu obrazu. W ramach optymalizacji przepisz do niego, aby był obsługiwany w tej samej domenie Firebase App Hosting i przechowywany w pamięci podręcznej w tej samej globalnej sieci CDN co aplikacja Next.js.

Najpierw dodaj do pliku next.config.js te pola:

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

Następnie utwórz w katalogu głównym plik loader.js z tą zawartością:

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

Utwórz zatwierdzenie, które zawiera te zmiany, i prześlij je do aktywnej gałęzi. Następnie poczekaj na zakończenie wdrażania App Hosting.