Next.js'de resim yüklemeyi optimize etme

images.unoptimized değerini açıkça false olarak ayarlamadığınız veya özel bir Image Loader kullanmadığınız sürece yerleşik Next.js resim optimizasyonu, App Hosting üzerinde varsayılan olarak devre dışıdır.

App Hosting üzerinde Next.js uygulamanızda resimlerin isteğe bağlı optimizasyonunu ve yayınlanmasını etkinleştirmek için Next.js genel resim yükleyicisini Görüntü İşleme Firebase Uzantısı ile yapılandırabilirsiniz.

Ön koşullar

  • Bir Firebase projeniz ve App Hosting arka ucunuz var.
  • Cloud Storage, projenizde etkinleştirildi.
  • Cloud Functions for Firebase, projenizde etkinleştirildi.

Uzantıyı yükleme

Firebase Extensions Hub'da Image Processing Extension'a (Görüntü İşleme Uzantısı) 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ız bu uzantıyı kullanarak optimize etmek istediğiniz yerel resimler kullanı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" adımına ulaştığınızda "Ana makine adı" parametresini bulun.

  2. Ana makine adını ayarlayın: Arka ucunuzun varsayılan alan adını Firebase App Hosting girin. Bu alan genellikle .hosted.app ile biter.

Yükleme tamamlandıktan sonra Image Processing API, Cloud Functions içinde bir işlev olarak dağıtılı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 Image Processing API'yi kullanan bir görüntü yükleyici oluşturun. Optimizasyon olarak, aynı Firebase App Hosting alan adı altında sunulması ve Next.js uygulamanızla aynı global CDN'de önbelleğe alınması için yeniden yazın.

Öncelikle next.config.js dosyanıza aşağıdaki alanları 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 aktarın. Ardından, App Hosting sürümünün kullanıma sunulmasının tamamlanmasını bekleyin.