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 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.
- Projenizde Cloud Storage etkinleştirilmiş olmalıdır.
- Projenizde Cloud Functions for Firebase 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.
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.
Ana makine adını ayarlayın: Firebase App Hosting arka ucunuz için varsayılan alanı girin. 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ş image component için dağıtılan Image Processing API'yi kullanan bir image loader oluşturun. Bir optimizasyon olarak, aynı Firebase App Hosting alanında sunulacak ve Next.js uygulamanızla aynı global 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.