Optymalizowanie wczytywania obrazów w Next.js

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

Możesz skonfigurować globalny moduł wczytywania obrazów Next.js za pomocą rozszerzenia Firebase Image Processing, 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 Hosting backend.
  • 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 procesu 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 Cloud Functions. Otwórz panel Funkcje w Firebase konsoli i skopiuj adres URL wyzwalacza 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ł on obsługiwany w ramach tej samej domeny 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 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.