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