Next.js'de resim yüklemeyi optimize etme

Varsayılan olarak, App Hosting üzerinde yerleşik Next.js görüntü optimizasyonu devre dışıdır. images.unoptimized öğesini açıkça false olarak ayarlamadığınız veya özel bir Görüntü Yükleyici kullanmadığınız sürece bu özellik devre dışı kalır.

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

Ön koşullar

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

Uzantıyı yükleme

Firebase Extensions Merkezi'nde Image Processing Extension'a gidin ve Install in Firebase Console'u (Firebase konsoluna 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 makine 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 Image Processing API, Cloud Functions'da bir 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örüntü bileşeni için dağıtılan Görüntü İşleme API'sini kullanan bir görüntü yükleyici oluşturun. Optimizasyon amacıyla, 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çeriklerle 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 kullanıma sunma işleminin tamamlanmasını bekleyin.