Mengoptimalkan pemuatan gambar di Next.js

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

Anda dapat mengonfigurasi pemuat gambar global Next.js dengan Ekstensi Firebase Pemrosesan Gambar untuk mengaktifkan pengoptimalan dan penayangan 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 Hub Firebase Extensions, lalu pilih Install in Firebase Console. Ikuti petunjuk di layar.

Mengonfigurasi pengoptimalan gambar lokal (opsional)

Jika aplikasi Anda menggunakan gambar lokal yang ingin Anda optimalkan menggunakan ekstensi ini, Anda perlu mengonfigurasi parameter "Nama host" selama proses penginstalan ekstensi.

  1. Selama Konfigurasi Ekstensi: Saat Anda mencapai langkah "Konfigurasi ekstensi", temukan parameter "Nama host".

  2. Setel Nama Host: 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 konsol Firebase, lalu 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 sana agar ditayangkan di domain App Hosting Firebase 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 kirimkan ke cabang aktif Anda. Kemudian, tunggu hingga peluncuran App Hosting selesai.