Optymalizowanie wczytywania obrazów w Next.js

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

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

Wymagania wstępne

  • Masz projekt Firebase i App Hostingbackend.
  • Cloud Storage jest włączony w Twoim projekcie.
  • Cloud Functions for Firebase jest włączony w Twoim projekcie.

Instalowanie rozszerzenia

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

Skonfiguruj optymalizację lokalnego obrazu (opcjonalnie).

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

  1. Podczas konfigurowania rozszerzenia: gdy dojdziesz do kroku „Skonfiguruj rozszerzenie”, odszukaj 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 usłudze Cloud Functions. Otwórz panel Funkcje w Firebase konsoli i skopiuj adres URL wywołania interfejsu Image Processing API.

Konfigurowanie niestandardowego wczytywania obrazów

Utwórz program wczytujący obrazy, który będzie używać wdrożonego interfejsu Image Processing API w przypadku każdego zoptymalizowanego komponentu obrazu. W celu optymalizacji przepisz adres URL, aby był obsługiwany w tej samej domenie Firebase App Hosting i buforowany 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 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 aktywnej gałęzi. Następnie poczekaj na zakończenie wdrażania App Hosting.