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