If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Firebase सीएलआई का इस्तेमाल करके, अपने Next.js वेब ऐप्लिकेशन को Firebase में डिप्लॉय किया जा सकता है. साथ ही, उन्हें Firebase होस्टिंग की मदद से दिखाया जा सकता है. सीएलआई आपकी Next.js सेटिंग के हिसाब से उन्हें Firebase सेटिंग में बदलता है. इसके लिए आपकी तरफ़ से शून्य या बहुत कम अतिरिक्त कॉन्फ़िगरेशन का इस्तेमाल किया जाता है. अगर आपके ऐप्लिकेशन में डाइनैमिक सर्वर-साइड लॉजिक शामिल है, तो सीएलआई उस लॉजिक को 'Firebase के लिए Cloud Functions' में डिप्लॉय करता है. Next.js का नया वर्शन 13.4.7 है.

ध्यान दें: फ़्रेमवर्क-अवेयर होस्टिंग की सुविधा, सभी के लिए उपलब्ध शुरुआती वर्शन है. इसका मतलब है कि इस सुविधा में, पुराने सिस्टम के साथ काम न करने वाले तरीकों से बदलाव हो सकता है. झलक वाली रिलीज़ पर, सेवा स्तर समझौता (एसएलए) या इस्तेमाल बंद करने की कोई नीति लागू नहीं होती. ऐसा हो सकता है कि यह सीमित तौर पर उपलब्ध हो या किसी तरह की सहायता उपलब्ध न हो.

चेतावनी: फ़ुल स्टैक Next.js ऐप्लिकेशन बनाने वाले डेवलपर के लिए, हमारा सुझाव है कि Firebase ऐप्लिकेशन होस्टिंग. अगर Firebase सीएलआई में पहले से ही फ़्रेमवर्क एक्सपेरिमेंट का इस्तेमाल किया जा रहा है, तो हमारा सुझाव है कि ऐप्लिकेशन होस्टिंग में "ग्रेजुएशन" का इस्तेमाल करें. ऐप्लिकेशन होस्टिंग की मदद से, आपको सीडीएन से सर्वर साइड रेंडरिंग तक, सब कुछ मैनेज करने का एक ही तरीका मिलेगा. साथ ही, आपको GitHub को बेहतर तरीके से इंटिग्रेट करने की सुविधा भी मिलेगी.

वेब कंटेनर इंस्टॉल करने से पहले

अपने ऐप्लिकेशन को Firebase पर डिप्लॉय करने से पहले, इन ज़रूरी शर्तों और विकल्पों को देखें:

Firebase सीएलआई का 12.1.0 या इसके बाद का वर्शन. अपने पसंदीदा तरीके का इस्तेमाल करके सीएलआई इंस्टॉल करना न भूलें.
ज़रूरी नहीं: आपके Firebase प्रोजेक्ट के लिए बिलिंग की सुविधा चालू है (अगर आपको एसएसआर का इस्तेमाल करना है, तो यह ज़रूरी है)
ज़रूरी नहीं: Firebase को सपोर्ट करने वाली सुविधाओं का फ़ायदा पाने के लिए, एक्सपेरिमेंट के तौर पर शुरू की गई ReactFire लाइब्रेरी का इस्तेमाल करना

Firebase शुरू करें

शुरू करने के लिए, अपने फ़्रेमवर्क प्रोजेक्ट के लिए Firebase शुरू करें. नए प्रोजेक्ट के लिए Firebase सीएलआई का इस्तेमाल करें या किसी मौजूदा प्रोजेक्ट के लिए firebase.json में बदलाव करें.

नया प्रोजेक्ट शुरू करना

Firebase सीएलआई में, वेब फ़्रेमवर्क की झलक देखने की सुविधा चालू करें:
```
firebase experiments:enable webframeworks
```
सीएलआई से शुरू करने वाला कमांड चलाएं. इसके बाद, दिए गए निर्देशों का पालन करें:
```
firebase init hosting
```
'हां' में जवाब दें और जानें कि "क्या आपको वेब फ़्रेमवर्क का इस्तेमाल करना है? (प्रयोग के तौर पर उपलब्ध)"
अपनी होस्टिंग सोर्स डायरेक्ट्री चुनें. अगर यह पहले से मौजूद Next.js ऐप्लिकेशन है, तो सीएलआई प्रोसेस पूरी हो जाती है और अगले सेक्शन पर जाया जा सकता है.
अगर कहा जाए, तो Next.js चुनें.

स्टैटिक कॉन्टेंट दिखाएं

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

firebase deploy

डिप्लॉय किए गए ऐप्लिकेशन को उसकी लाइव साइट पर देखा जा सकता है.

डाइनैमिक कॉन्टेंट को प्री-रेंडर करना

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

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

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

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

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

लगातार अपडेट होने वाला कॉन्टेंट (एसएसआर) दिखाना

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

`next.config.js` के साथ होस्टिंग व्यवहार को कॉन्फ़िगर करें

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

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

रीडायरेक्ट, दोबारा लिखने, और हेडर

Firebase सीएलआई, next.config.js में रीडायरेक्ट, दोबारा लिखने,, और हेडर का पालन करता है. इससे, डिप्लॉय के समय उन्हें Firebase होस्टिंग के मिलते-जुलते कॉन्फ़िगरेशन में बदल दिया जाता है. अगर Next.js रीडायरेक्ट, रीराइट या हेडर को किसी मिलते-जुलते Firebase होस्टिंग हेडर में नहीं बदला जा सकता, तो वह वापस चला जाता है और एक फ़ंक्शन बनाता है. भले ही, इमेज ऑप्टिमाइज़ेशन या एसएसआर का इस्तेमाल न किया जा रहा हो.

ज़रूरी नहीं: Firebase से पुष्टि करने की सुविधा के साथ इंटिग्रेट करना

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

Express res.locals ऑब्जेक्ट में, वैकल्पिक रूप से एक पुष्टि किया गया Firebase ऐप्लिकेशन इंस्टेंस (firebaseApp) और फ़िलहाल साइन-इन किया हुआ उपयोगकर्ता (currentUser) शामिल होगा. इसे getServerSideProps में ऐक्सेस किया जा सकता है.
रूट क्वेरी (__firebaseAppName) में, पुष्टि किया गया Firebase ऐप्लिकेशन का नाम दिया जाता है. इससे कॉन्टेक्स्ट के साथ मैन्युअल इंटिग्रेशन की सुविधा मिलती है:

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