Optymalizowanie wczytywania obrazów w Next.js

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

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

Wymagania wstępne

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

Instalowanie rozszerzenia

Otwórz rozszerzenie do przetwarzania obrazów w centrum rozszerzeń w Firebase i kliknij Zainstaluj w konsoli Firebase. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.

Konfigurowanie lokalnej optymalizacji obrazów (opcjonalnie)

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

  1. Podczas konfigurowania rozszerzenia: gdy dojdziesz do kroku „Konfiguruj rozszerzenie”, znajdź parametr „Hostname” (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 Funkcje w konsoli Firebase i skopiuj adres URL wywołania interfejsu Image Processing API.

Konfigurowanie niestandardowego modułu ładującego obrazy

Utwórz moduł ładujący obrazy, który będzie używać wdrożonego interfejsu Image Processing API w przypadku każdego zoptymalizowanego komponentu obrazu. Aby zopt ymalizować działanie, przepisz go tak, aby był obsługiwany w tej samej Firebase App Hosting domenie i buforowany w tej samej globalnej sieci CDN co aplikacja Next.js.

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

// @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 o tej treś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 zawierające te zmiany i prześlij je do gałęzi produkcyjnej. Następnie poczekaj na zakończenie wdrażania App Hosting.