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 Pemuat Gambar kustom.

Anda dapat mengonfigurasi pemuat gambar global Next.js dengan Pemrosesan Gambar Firebase Extension 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 Ekstensi Pemrosesan Gambar di Hub Ekstensi Firebase, lalu pilih Instal di 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 harus mengonfigurasi parameter "Nama host" selama proses penginstalan ekstensi.

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

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

Setelah penginstalan selesai, Image Processing API harus di-deploy sebagai a 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 gambaryang dioptimalkan. Sebagai pengoptimalan, tulis ulang ke pemuat gambar sehingga ditayangkan di bawah 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 next.config.js file:

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