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

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

তুমি শুরু করার আগে

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() চেক করে রানটাইম ত্রুটি থেকে রক্ষা করুন। সমস্ত পণ্য সমস্ত পরিবেশে সমর্থিত নয়।

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

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

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

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

next.config.js এর সাথে হোস্টিং আচরণ কনফিগার করুন

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

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

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

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

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

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

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