App Hosting पर, Next.js में इमेज
ऑप्टिमाइज़ेशन
की सुविधा डिफ़ॉल्ट रूप से बंद होती है. हालांकि, अगर आपने App Hosting में
images.unoptimized
को साफ़ तौर पर 'गलत' पर सेट किया है या कस्टम इमेज
लोडर का इस्तेमाल किया है, तो यह सुविधा चालू हो सकती है.
App Hosting पर, Next.js ऐप्लिकेशन में इमेज ऑप्टिमाइज़ेशन की सुविधा चालू करने के लिए, Image Processing Firebase Extension की मदद से, Next.js के लिए ग्लोबल इमेज लोडर कॉन्फ़िगर किया जा सकता है. इससे, ज़रूरत के हिसाब से इमेज ऑप्टिमाइज़ की जा सकती हैं और उन्हें डिलीवर किया जा सकता है App Hosting.
ज़रूरी शर्तें
- आपके पास Firebase प्रोजेक्ट और एक App Hosting बैकएंड होना चाहिए.
- Cloud Storage आपके प्रोजेक्ट में चालू है.
- Cloud Functions for Firebase आपके प्रोजेक्ट में चालू है.
एक्सटेंशन इंस्टॉल करना
Firebase Extensions Hub में जाकर, Image Processing Extension पर जाएं और Firebase कंसोल में इंस्टॉल करें को चुनें. स्क्रीन पर दिए गए निर्देशों का पालन करें.
स्थानीय इमेज ऑप्टिमाइज़ेशन कॉन्फ़िगर करना (ज़रूरी नहीं)
अगर आपके ऐप्लिकेशन में स्थानीय इमेज का इस्तेमाल किया जाता है और आपको इस एक्सटेंशन की मदद से उन्हें ऑप्टिमाइज़ करना है, तो एक्सटेंशन इंस्टॉल करने की प्रोसेस के दौरान, "होस्टनेम" पैरामीटर को कॉन्फ़िगर करना होगा.
एक्सटेंशन कॉन्फ़िगर करने के दौरान: "एक्सटेंशन कॉन्फ़िगर करें" चरण पर पहुंचने के बाद, "होस्टनेम" पैरामीटर ढूंढें.
होस्टनेम सेट करना: अपने Firebase App Hosting बैकएंड के लिए डिफ़ॉल्ट डोमेन डालें. आम तौर पर, यह डोमेन
.hosted.appपर खत्म होता है.
इंस्टॉल पूरा होने के बाद, Image Processing API को Cloud Functions में किसी फ़ंक्शन के तौर पर डिप्लॉय किया जाना चाहिए. Functions डैशबोर्ड पर जाएं, Firebase कंसोल में, और Image Processing API के ट्रिगर यूआरएल को कॉपी करें.
कस्टम इमेज लोडर सेट अप करना
एक इमेज लोडर बनाएं. यह लोडर, ऑप्टिमाइज़ की गई हर इमेज कॉम्पोनेंटके लिए, डिप्लॉय किए गए Image Processing API का इस्तेमाल करता है. ऑप्टिमाइज़ेशन के तौर पर, इसे फिर से लिखें, ताकि यह आपके Next.js ऐप्लिकेशन की तरह ही, Firebase App Hosting के एक ही डोमेन के तहत काम करे और एक ही ग्लोबल CDN में कैश हो.Firebase App Hosting
सबसे पहले, अपनी
next.config.js
फ़ाइल में ये फ़ील्ड जोड़ें:
// @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;
इसके बाद, अपनी रूट डायरेक्ट्री में loader.js नाम की एक फ़ाइल बनाएं. इसमें यह कॉन्टेंट शामिल करें:
"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}`;
}
एक कमिट बनाएं, जिसमें ये बदलाव शामिल हों. इसके बाद, इसे अपनी लाइव ब्रांच पर पुश करें. इसके बाद, App Hosting के रोलआउट की प्रोसेस पूरी होने का इंतज़ार करें.