Next.js ইন্টিগ্রেট করুন

Firebase CLI ব্যবহার করে, আপনি আপনার Next.js ওয়েব অ্যাপগুলি Firebase-এ স্থাপন করতে পারেন এবং Firebase Hosting সাথে সেগুলি পরিবেশন করতে পারেন। CLI আপনার Next.js সেটিংসকে সম্মান করে এবং আপনার পক্ষ থেকে শূন্য বা ন্যূনতম অতিরিক্ত কনফিগারেশন সহ Firebase সেটিংসে অনুবাদ করে। যদি আপনার অ্যাপে ডাইনামিক সার্ভার-সাইড লজিক থাকে, CLI সেই লজিকটিকে Cloud Functions for Firebase স্থাপন করে। সর্বশেষ সমর্থিত Next.js সংস্করণ হল 13.4.7।

দ্রষ্টব্য: ফ্রেমওয়ার্ক-সচেতন Hosting একটি প্রাথমিক পাবলিক প্রিভিউ। এর মানে হল যে কার্যকারিতা পশ্চাদপদ-বেমানান উপায়ে পরিবর্তিত হতে পারে। একটি প্রিভিউ রিলিজ কোনো SLA বা অবচয় নীতি সাপেক্ষে নয় এবং সীমিত বা কোনো সমর্থন পেতে পারে।

সতর্কতা: ডেভেলপারদের জন্য একটি ফুল-স্ট্যাক Next.js অ্যাপ তৈরি করার জন্য, আমরা দৃঢ়ভাবে Firebase অ্যাপ হোস্টিংয়ের সুপারিশ করি। আপনি যদি ইতিমধ্যে Firebase CLI-তে ফ্রেমওয়ার্ক পরীক্ষা ব্যবহার করে থাকেন, তাহলে আমরা App Hosting এ "স্নাতক" হওয়ার পরামর্শ দিই। App Hosting এর সাথে, আপনার কাছে উন্নত গিটহাব ইন্টিগ্রেশন সহ, CDN থেকে সার্ভার-সাইড রেন্ডারিং পর্যন্ত সবকিছু পরিচালনা করার জন্য একটি ঐক্যবদ্ধ সমাধান থাকবে।

আপনি শুরু করার আগে

Firebase-এ আপনার অ্যাপ স্থাপন শুরু করার আগে, নিম্নলিখিত প্রয়োজনীয়তা এবং বিকল্পগুলি পর্যালোচনা করুন:

• Firebase CLI সংস্করণ 12.1.0 বা তার পরে। আপনার পছন্দের পদ্ধতি ব্যবহার করে সিএলআই ইনস্টল করা নিশ্চিত করুন।

• ঐচ্ছিক: আপনার ফায়ারবেস প্রজেক্টে বিলিং সক্ষম করা হয়েছে (আপনি যদি SSR ব্যবহার করার পরিকল্পনা করেন তাহলে প্রয়োজন)

• ঐচ্ছিক: এর Firebase-বান্ধব বৈশিষ্ট্যগুলি থেকে উপকৃত হতে পরীক্ষামূলক ReactFire লাইব্রেরি ব্যবহার করুন

ফায়ারবেস শুরু করুন

শুরু করতে, আপনার ফ্রেমওয়ার্ক প্রকল্পের জন্য Firebase শুরু করুন। একটি নতুন প্রকল্পের জন্য Firebase CLI ব্যবহার করুন, অথবা একটি বিদ্যমান প্রকল্পের জন্য firebase.json পরিবর্তন করুন৷

একটি নতুন প্রকল্প শুরু করুন

1. Firebase CLI-তে, ওয়েব ফ্রেমওয়ার্ক প্রিভিউ সক্ষম করুন:

   firebase experiments:enable webframeworks

2. CLI থেকে শুরু করার কমান্ডটি চালান এবং তারপরে প্রম্পটগুলি অনুসরণ করুন:

   firebase init hosting

3. হ্যাঁ উত্তর দিন "আপনি কি একটি ওয়েব ফ্রেমওয়ার্ক ব্যবহার করতে চান? (পরীক্ষামূলক)"

4. আপনার হোস্টিং উৎস ডিরেক্টরি নির্বাচন করুন. যদি এটি একটি বিদ্যমান Next.js অ্যাপ হয়, তাহলে CLI প্রক্রিয়া সম্পূর্ণ হয় এবং আপনি পরবর্তী বিভাগে যেতে পারেন।

5. অনুরোধ করা হলে, Next.js নির্বাচন করুন।

স্ট্যাটিক কন্টেন্ট পরিবেশন

ফায়ারবেস শুরু করার পরে, আপনি স্ট্যান্ডার্ড ডিপ্লয়মেন্ট কমান্ডের সাথে স্ট্যাটিক সামগ্রী পরিবেশন করতে পারেন:

firebase deploy

আপনি আপনার স্থাপন করা অ্যাপটি এর লাইভ সাইটে দেখতে পারেন।

প্রি-রেন্ডার ডাইনামিক কন্টেন্ট

Firebase CLI getStaticProps এবং getStaticPaths- এর ব্যবহার শনাক্ত করবে।

ঐচ্ছিক: Firebase JS SDK-এর সাথে একীভূত করুন

সার্ভার এবং ক্লায়েন্ট বান্ডেল উভয়েই Firebase JS SDK পদ্ধতিগুলি অন্তর্ভুক্ত করার সময়, পণ্যটি ব্যবহার করার আগে isSupported() চেক করে রানটাইম ত্রুটি থেকে রক্ষা করুন। সমস্ত পণ্য সমস্ত পরিবেশে সমর্থিত নয়।

টিপ: ReactFire ব্যবহার করার কথা বিবেচনা করুন, যা আপনার জন্য স্বয়ংক্রিয়ভাবে এটি করে।

ঐচ্ছিক: Firebase অ্যাডমিন SDK-এর সাথে একীভূত করুন

আপনার ব্রাউজার বিল্ডে অন্তর্ভুক্ত করা হলে অ্যাডমিন SDK বান্ডেল ব্যর্থ হবে; শুধুমাত্র getStaticProps এবং getStaticPaths এর মধ্যেই তাদের উল্লেখ করুন।

সম্পূর্ণ গতিশীল সামগ্রী (SSR) পরিবেশন করুন

Firebase CLI getServerSideProps- এর ব্যবহার শনাক্ত করবে। এই ধরনের ক্ষেত্রে, CLI ডাইনামিক সার্ভার কোড চালানোর জন্য Cloud Functions for Firebase ফাংশন স্থাপন করবে। আপনি Firebase কনসোলে এই ফাংশনগুলি সম্পর্কে তথ্য দেখতে পারেন, যেমন তাদের ডোমেন এবং রানটাইম কনফিগারেশন।

next.config.js এর সাথে Hosting আচরণ কনফিগার করুন

ইমেজ অপ্টিমাইজেশান

Next.js ইমেজ অপ্টিমাইজেশান ব্যবহার করা সমর্থিত, তবে এটি একটি ফাংশন তৈরি করতে ট্রিগার করবে ( Cloud Functions for Firebase ), এমনকি আপনি SSR ব্যবহার না করলেও।

দ্রষ্টব্য: এই কারণে, ইমেজ অপ্টিমাইজেশান এবং Hosting প্রিভিউ চ্যানেলগুলি একসাথে ভালভাবে কাজ করে না।

পুনঃনির্দেশ, পুনর্লিখন, এবং শিরোনাম

Firebase CLI next.config.js এ পুনঃনির্দেশ , পুনঃলিখন এবং শিরোনামগুলিকে সম্মান করে, ডিপ্লোয় টাইমে তাদের নিজ নিজ সমতুল্য Firebase Hosting কনফিগারেশনে রূপান্তর করে। যদি একটি Next.js রিডাইরেক্ট, রিরাইট বা হেডারকে সমতুল্য Firebase Hosting হেডারে রূপান্তর করা না যায়, তাহলে এটি পিছিয়ে পড়ে এবং একটি ফাংশন তৈরি করে—এমনকি আপনি ইমেজ অপ্টিমাইজেশান বা SSR ব্যবহার না করলেও।

ঐচ্ছিক: Firebase প্রমাণীকরণের সাথে একীভূত করুন

ওয়েব ফ্রেমওয়ার্ক-সচেতন ফায়ারবেস ডিপ্লয়মেন্ট টুলিং স্বয়ংক্রিয়ভাবে কুকি ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের অবস্থা সিঙ্কে রাখবে। এসএসআর-এ প্রমাণীকরণ প্রসঙ্গে অ্যাক্সেস করার জন্য কিছু পদ্ধতি দেওয়া আছে:

• Express res.locals অবজেক্টে ঐচ্ছিকভাবে একটি প্রমাণীকৃত Firebase অ্যাপ ইনস্ট্যান্স ( firebaseApp ) এবং বর্তমানে সাইন-ইন করা ব্যবহারকারী ( currentUser ) থাকবে। এটি getServerSideProps এ অ্যাক্সেস করা যেতে পারে।
• প্রমাণীকৃত ফায়ারবেস অ্যাপ নামটি রুট কোয়েরিতে প্রদান করা হয়েছে ( __firebaseAppName )। এটি প্রসঙ্গে থাকাকালীন ম্যানুয়াল ইন্টিগ্রেশনের জন্য অনুমতি দেয়:

// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);