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 images.unoptimized na false lub użyjesz niestandardowego modułu ładującego obrazy.

Możesz skonfigurować globalny moduł ładują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 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 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 „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ć 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 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 zatwierdzenie zawierające te zmiany i prześlij je do gałęzi produkcyjnej. Następnie poczekaj na zakończenie wdrażania App Hosting.