Next.js को इंटिग्रेट करना

Firebase CLI का इस्तेमाल करके, Next.js वेब ऐप्लिकेशन को Firebase पर डिप्लॉय किया जा सकता है. साथ ही, उन्हें Firebase Hosting की मदद से सर्व किया जा सकता है.

स्थिर कॉन्टेंट सर्व करना

Firebase को शुरू करने के बाद, डिप्लॉयमेंट के स्टैंडर्ड कमांड का इस्तेमाल करके, स्थिर कॉन्टेंट सर्व किया जा सकता है:

firebase deploy

अगर आपके ऐप्लिकेशन में, सर्वर-साइड लॉजिक शामिल है, तो सीएलआई उस लॉजिक को Cloud Functions for Firebase पर डिप्लॉय करता है. डिप्लॉय किए गए ऐप्लिकेशन को उसकी लाइव साइट पर देखा जा सकता है.

डाइनैमिक कॉन्टेंट को पहले से रेंडर करना

Firebase CLI, getStaticProps और getStaticPaths के इस्तेमाल का पता लगाएगा.

ज़रूरी नहीं: Firebase JS SDK के साथ इंटिग्रेट करना

सर्वर और क्लाइंट, दोनों के बंडल में Firebase JS SDK के तरीके शामिल करते समय, प्रॉडक्ट का इस्तेमाल करने से पहले isSupported() की जांच करके, रनटाइम में होने वाली गड़बड़ियों से बचें. सभी एनवायरमेंट में, सभी प्रॉडक्ट काम नहीं करते.

ज़रूरी नहीं: Firebase Admin SDK के साथ इंटिग्रेट करना

अगर Admin SDK बंडल को ब्राउज़र बिल्ड में शामिल किया जाता है, तो वे काम नहीं करेंगे. इसलिए, इन्हें सिर्फ़ getStaticProps और getStaticPaths में शामिल करें.

पूरी तरह से डाइनैमिक कॉन्टेंट (एसएसआर) सर्व करना

Firebase CLI, getServerSideProps के इस्तेमाल का पता लगाएगा. ऐसे मामलों में, सीएलआई, डाइनैमिक सर्वर कोड चलाने के लिए, Cloud Functions for Firebase पर फ़ंक्शन डिप्लॉय करेगा. Firebase कंसोल में, इन फ़ंक्शन के बारे में जानकारी देखी जा सकती है. जैसे, उनका डोमेन और रनटाइम कॉन्फ़िगरेशन.

Hosting की मदद से, next.config.js के व्यवहार को कॉन्फ़िगर करना

इमेज ऑप्टिमाइज़ेशन

Next.js इमेज ऑप्टिमाइज़ेशन का इस्तेमाल किया जा सकता है. हालांकि, इससे एक फ़ंक्शन बनेगा (Cloud Functions for Firebase में). भले ही, एसएसआर का इस्तेमाल न किया जा रहा हो.

रीडायरेक्ट, रीराइट, और हेडर

Firebase CLI, रीडायरेक्ट, रीराइट, और हेडर को ध्यान में रखता है. साथ ही, डिप्लॉयमेंट के समय, उन्हें respective equivalent Firebase Hosting के कॉन्फ़िगरेशन में बदल देता है.next.config.js अगर Next.js के रीडायरेक्ट, रीराइट या हेडर को किसी ऐसे Firebase Hosting हेडर में नहीं बदला जा सकता, तो यह फ़ंक्शन बनाता है. भले ही, इमेज ऑप्टिमाइज़ेशन या एसएसआर का इस्तेमाल न किया जा रहा हो.

ज़रूरी नहीं: Firebase Authentication के साथ इंटिग्रेट करना

वेब फ़्रेमवर्क-अवेयर Firebase डिप्लॉयमेंट टूल, कुकी का इस्तेमाल करके क्लाइंट और सर्वर की स्थिति को अपने-आप सिंक में रखेगा. एसएसआर में, पुष्टि करने के कॉन्टेक्स्ट को ऐक्सेस करने के लिए कुछ तरीके दिए गए हैं:

  • Express res.locals ऑब्जेक्ट में, पुष्टि किया गया Firebase ऐप्लिकेशन इंस्टेंस (firebaseApp) और फ़िलहाल साइन इन किया हुआ उपयोगकर्ता (currentUser) शामिल हो सकता है. इसे getServerSideProps में ऐक्सेस किया जा सकता है.
  • पुष्टि किए गए Firebase ऐप्लिकेशन का नाम, रूट क्वेरी (__firebaseAppName) पर दिया जाता है. इससे, कॉन्टेक्स्ट में रहते हुए मैन्युअल तरीके से इंटिग्रेट किया जा सकता है:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);