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ę i dostarczanie obrazów na żądanie 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ń Firebase i kliknij Zainstaluj w konsoli Firebase. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.

Konfigurowanie lokalnej optymalizacji obrazów (opcjonalnie)

Jeśli Twoja aplikacja używa lokalnych obrazów, 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 „Configure extension” (Skonfiguruj 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 Functions dashboard w konsoli Firebase i skopiuj adres URL wyzwalacza 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 zoptymalizować, przepisz go tak, aby był obsługiwany w tej samej Firebase App Hosting domenie i buforowany w tej samej globalnej sieci CDN co Twoja 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 commit zawierający te zmiany i prześlij go do gałęzi produkcyjnej. Następnie poczekaj na zakończenie wdrażania App Hosting.