Next.js'de resim yüklemeyi optimize etme

Varsayılan olarak, App Hosting'da yerleşik Next.js görüntü optimizasyonu, images.unoptimized öğesini açıkça false olarak ayarlamadığınız veya özel bir Image Loader kullanmadığınız sürece devre dışıdır.

App Hosting üzerinde Next.js uygulamanızdaki resimlerin isteğe bağlı olarak optimize edilmesini ve yayınlanmasını sağlamak için Image Processing Firebase uzantısıyla Next.js genel resim yükleyicisi yapılandırabilirsiniz.

Ön koşullar

  • Bir Firebase projeniz ve App Hosting arka uçunuz olmalıdır.
  • Cloud Storage projenizde etkinleştirilmiş olmalıdır.
  • Cloud Functions for Firebase projenizde etkinleştirilmiş olmalıdır.

Uzantıyı yükleme

Firebase Uzantı Merkezi'nde Image Processing Extension'a gidin ve Install in Firebase Console'u (Firebase Konsolu'na Yükle) seçin. Ekrandaki talimatları uygulayın.

Yerel resim optimizasyonunu yapılandırma (isteğe bağlı)

Uygulamanızda bu uzantıyı kullanarak optimize etmek istediğiniz yerel resimler kullanılıyorsa uzantı yükleme işlemi sırasında "Ana makine adı" parametresini yapılandırmanız gerekir.

  1. Uzantı Yapılandırması Sırasında: "Uzantıyı yapılandırın" adımına ulaştığınızda "Ana makine adı" parametresini bulun.

  2. Ana bilgisayar adını ayarlayın: Arka uç için varsayılan alanı girin. Firebase App Hosting Bu alan adı genellikle .hosted.app ile biter.

Yükleme tamamlandıktan sonra Görüntü İşleme API'si, Cloud Functions'da işlev olarak dağıtılmalıdır. Firebase konsolunda Functions kontrol paneline gidin ve Image Processing API tetikleyici URL'sini kopyalayın.

Özel resim yükleyici oluşturma

Her optimize edilmiş görüntü bileşeni için dağıtılan Görüntü İşleme API'sini kullanan bir image loader oluşturun. Bir optimizasyon olarak, Next.js uygulamanızla aynı Firebase App Hosting alan adı altında sunulacak ve aynı genel CDN'nin arkasında önbelleğe alınacak şekilde yeniden yazın.

Öncelikle aşağıdaki alanları next.config.js dosyanıza ekleyin:

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

Ardından, kök dizininizde aşağıdaki içeriklere sahip bir loader.js dosyası oluşturun:

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

Bu değişiklikleri içeren bir commit oluşturun ve bunu canlı dalınıza gönderin. Ardından, App Hosting dağıtımının tamamlanmasını bekleyin.