ডিফল্টরূপে, App Hosting -এ বিল্ট-ইন Next.js ইমেজ অপ্টিমাইজেশন অক্ষম থাকে যদি না আপনি স্পষ্টভাবে images.unoptimized false তে সেট করেন অথবা একটি কাস্টম ইমেজ লোডার ব্যবহার করেন।
App Hosting -এ আপনার Next.js অ্যাপে অন-ডিমান্ড অপ্টিমাইজেশন এবং ছবি ডেলিভারি সক্ষম করতে আপনি ইমেজ প্রসেসিং ফায়ারবেস এক্সটেনশনের সাহায্যে একটি Next.js গ্লোবাল ইমেজ লোডার কনফিগার করতে পারেন।
পূর্বশর্ত
- আপনার একটি Firebase প্রকল্প এবং একটি App Hosting ব্যাকএন্ড আছে।
- আপনার প্রকল্পে Cloud Storage সক্ষম করা আছে।
- আপনার প্রকল্পে Cloud Functions for Firebase সক্রিয় করা আছে।
এক্সটেনশনটি ইনস্টল করুন
Firebase Extensions Hub-এর Image Processing Extension- এ নেভিগেট করুন এবং Firebase Console-এ Install নির্বাচন করুন। স্ক্রিনে প্রদর্শিত নির্দেশাবলী অনুসরণ করুন।
স্থানীয় চিত্র অপ্টিমাইজেশন কনফিগার করুন (ঐচ্ছিক)
যদি আপনার অ্যাপ্লিকেশনটি স্থানীয় ছবি ব্যবহার করে যা আপনি এই এক্সটেনশনটি ব্যবহার করে অপ্টিমাইজ করতে চান, তাহলে এক্সটেনশন ইনস্টলেশন প্রক্রিয়ার সময় আপনাকে "হোস্টনেম" প্যারামিটারটি কনফিগার করতে হবে।
এক্সটেনশন কনফিগারেশনের সময়: যখন আপনি "এক্সটেনশন কনফিগার করুন" ধাপে পৌঁছাবেন, তখন "হোস্টনেম" প্যারামিটারটি সনাক্ত করুন।
হোস্টনেম সেট করুন: আপনার ফায়ারবেস App Hosting ব্যাকএন্ডের জন্য ডিফল্ট ডোমেনটি লিখুন। এই ডোমেনটি সাধারণত
.hosted.appদিয়ে শেষ হয়।
ইনস্টলেশন সম্পূর্ণ হয়ে গেলে, ইমেজ প্রসেসিং API Cloud Functions একটি ফাংশন হিসেবে স্থাপন করা উচিত। Firebase কনসোলে ফাংশন ড্যাশবোর্ডে নেভিগেট করুন এবং ইমেজ প্রসেসিং API ট্রিগার URL টি অনুলিপি করুন।
একটি কাস্টম ইমেজ লোডার সেট আপ করুন
প্রতিটি অপ্টিমাইজড ইমেজ কম্পোনেন্টের জন্য ডিপ্লয় করা ইমেজ প্রসেসিং API ব্যবহার করে এমন একটি ইমেজ লোডার তৈরি করুন। অপ্টিমাইজেশন হিসেবে, এটিতে পুনরায় লিখুন যাতে এটি একই Firebase App Hosting ডোমেনের অধীনে পরিবেশিত হয় এবং আপনার Next.js অ্যাপ্লিকেশনের মতো একই গ্লোবাল CDN-এর পিছনে ক্যাশে করা হয়।
প্রথমে, আপনার 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 রোলআউট সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন।