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 dla parametru images.unoptimized wartość false lub użyjesz niestandardowego ładownika obrazów.

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

Wymagania wstępne

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

Instalowanie rozszerzenia

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

Konfigurowanie optymalizacji obrazu lokalnego (opcjonalnie)

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

  1. Podczas konfigurowania rozszerzenia: gdy dojdziesz do kroku „Konfigurowanie rozszerzenia”, odszukaj parametr „Nazwa hosta”.

  2. Ustaw nazwę hosta: wpisz domyślną domenę dla backendu App HostingFirebase. Ta domena zwykle kończy się na .hosted.app.

Po zakończeniu instalacji interfejs API przetwarzania obrazu powinien zostać wdrożony jako funkcja w Cloud Functions. W konsoli Firebase otwórz panel Funkcje i skopiuj adres URL reguły interfejsu Image Processing API.

Konfigurowanie niestandardowego wczytywania obrazów

Utwórz ładowarkę obrazów, która korzysta z rozmieszczonego interfejsu Image Processing API w przypadku każdego zoptymalizowanego elementu obrazu. W ramach optymalizacji przepisz go tak, aby był on dostarczany w ramach tej samej domeny App Hosting Firebase i zapisywany w pamięci podręcznej za pomocą tego samego globalnego 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 zatwierdzanie obejmujące te zmiany i prześlij je do gałęzi na żywo. Następnie poczekaj na zakończenie App Hosting.