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

Firebase CLI ব্যবহার করে, আপনি আপনার Next.js ওয়েব অ্যাপগুলি Firebase-এ স্থাপন করতে পারেন এবং Firebase Hosting এর সাথে সেগুলি পরিবেশন করতে পারেন। The CLI respects your Next.js settings and translates them to Firebase settings with zero or minimal extra configuration on your part. If your app includes dynamic server-side logic, the CLI deploys that logic to Cloud Functions for Firebase . সর্বশেষ সমর্থিত Next.js সংস্করণ হল 13.4.7।

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

Before you get started deploying your app to Firebase, review the following requirements and options:

  • 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. Choose your hosting source directory. If this is an existing Next.js app, the CLI process completes, and you can proceed to the next section.

  5. If prompted, choose Next.js.

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

After initializing Firebase, you can serve static content with the standard deployment command:

firebase deploy

You can view your deployed app on its live site.

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

The Firebase CLI will detect usage of getStaticProps and getStaticPaths .

Optional: integrate with the Firebase JS SDK

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

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

Admin SDK bundles will fail if included in your browser build; refer to them only inside getStaticProps and getStaticPaths .

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

Firebase CLI getServerSideProps- এর ব্যবহার শনাক্ত করবে। In such cases, the CLI will deploy functions to Cloud Functions for Firebase to run dynamic server code. আপনি Firebase কনসোলে এই ফাংশনগুলি সম্পর্কে তথ্য দেখতে পারেন, যেমন তাদের ডোমেন এবং রানটাইম কনফিগারেশন।

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

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

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

Redirects, Rewrites, and Headers

The Firebase CLI respects redirects , rewrites , and headers in next.config.js , converting them to their respective equivalent Firebase Hosting configuration at deploy time. If a Next.js redirect, rewrite, or header cannot be converted to an equivalent Firebase Hosting header, it falls back and builds a function—even if you aren't using image optimization or SSR.

Optional: integrate with Firebase Authentication

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

  • The Express res.locals object will optionally contain an authenticated Firebase App instance ( firebaseApp ) and the currently signed-in user ( currentUser ). এটি getServerSideProps এ অ্যাক্সেস করা যেতে পারে।
  • The authenticated Firebase App name is provided on the route query ( __firebaseAppName ). এটি প্রসঙ্গে থাকাকালীন ম্যানুয়াল ইন্টিগ্রেশনের জন্য অনুমতি দেয়: 
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);