Mengoptimalkan pemuatan gambar di Next.js

Secara default, pengoptimalan gambar Next.js bawaan dinonaktifkan di App Hosting, kecuali jika Anda menetapkan images.unoptimized ke salah secara eksplisit atau menggunakan Image loader kustom.

Anda dapat mengonfigurasi loader gambar global Next.js dengan Ekstensi Firebase Pemrosesan Gambar untuk mengaktifkan pengoptimalan dan pengiriman gambar on demand di aplikasi Next.js pada App Hosting.

Prasyarat

  • Anda memiliki project Firebase dan backend App Hosting.
  • Cloud Storage diaktifkan di project Anda.
  • Cloud Functions for Firebase diaktifkan di project Anda.

Menginstal ekstensi

Buka Image Processing Extension di Firebase Extensions Hub, lalu pilih Install in Firebase Console. Ikuti petunjuk di layar.

Mengonfigurasi pengoptimalan gambar lokal (opsional)

Jika aplikasi Anda menggunakan gambar lokal yang ingin dioptimalkan menggunakan ekstensi ini, Anda perlu mengonfigurasi parameter "Hostname" selama proses penginstalan ekstensi.

  1. Selama Konfigurasi Ekstensi: Saat Anda mencapai langkah "Konfigurasikan ekstensi", cari parameter "Nama Host".

  2. Tetapkan Hostname: Masukkan domain default untuk backend App Hosting Firebase Anda. Domain ini biasanya diakhiri dengan .hosted.app.

Setelah penginstalan selesai, Image Processing API harus di-deploy sebagai fungsi di Cloud Functions. Buka dasbor Functions di Firebase console, lalu salin URL pemicu Image Processing API.

Menyiapkan loader gambar kustom

Buat loader gambar yang menggunakan Image Processing API yang di-deploy untuk setiap komponen gambar yang dioptimalkan. Sebagai optimasi, tulis ulang ke domain tersebut agar ditayangkan di domain App Hosting Firebase yang sama dan di-cache di balik CDN global yang sama dengan aplikasi Next.js Anda.

Pertama, tambahkan kolom berikut ke file next.config.js Anda:

// @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;

Kemudian, buat file loader.js di direktori root dengan konten berikut:

"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}`;
}

Buat commit yang menyertakan perubahan ini dan kirimkan ke cabang live Anda. Kemudian, tunggu hingga peluncuran App Hosting selesai.