Next.js'de resim yüklemeyi optimize etme

Varsayılan olarak, App Hosting üzerinde yerleşik Next.js görüntü optimizasyonu, images.unoptimized öğesini açıkça false olarak ayarlamadığınız veya özel bir ImageLoader 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 Next.js global resim yükleyicisini Image Processing Firebase uzantısıyla yapılandırabilirsiniz.

Ön koşullar

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

Uzantıyı yükleme

Firebase Extensions Hub'da Image Processing Extension'a gidin ve Install in Firebase Console'u 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 makine adını ayarlayın: Firebase App Hosting arka uçunuz için varsayılan alanı girin. 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 ayarlama

Her optimize edilmiş görsel bileşen için dağıtılan Image Processing API'yi 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.