Mengoptimalkan pemuatan gambar di Next.js

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

Anda dapat mengonfigurasi loader gambar global Next.js dengan Firebase Extension Image Processing untuk mengaktifkan pengoptimalan dan pengiriman gambar sesuai permintaan di aplikasi Next.js Anda di 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 harus mengonfigurasi parameter "Hostname" selama proses penginstalan ekstensi.

  1. Selama Konfigurasi Ekstensi: Saat Anda mencapai langkah "Configure extension", temukan parameter "Hostname".

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

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

Menyiapkan pemuat gambar kustom

Buat pemuat gambar yang menggunakan Image Processing API yang di-deploy untuk setiap komponen gambar yang dioptimalkan. Sebagai pengoptimalan, tulis ulang ke dalamnya sehingga disajikan di domain Firebase App Hosting yang sama dan di-cache di belakang 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 Anda 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 kirim ke cabang aktif Anda. Kemudian, tunggu hingga peluncuran App Hosting selesai.