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 प्रोजेक्ट के लिए बिलिंग की सुविधा चालू है (अगर आपको एसएसआर का इस्तेमाल करना है, तो यह ज़रूरी है)
यह ज़रूरी नहीं है: एक्सपेरिमेंट के तौर पर शुरू की गई ReactFire लाइब्रेरी का इस्तेमाल करके, Firebase में काम आने वाली सुविधाएं

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' में फ़ंक्शन डिप्लॉय करेगा, ताकि डाइनैमिक तरीके से चलाया जा सके सर्वर कोड. इन फ़ंक्शन के बारे में जानकारी देखी जा सकती है, जैसे कि इनका डोमेन और रनटाइम कॉन्फ़िगरेशन में जोड़ा गया है.

`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 में ऐक्सेस किया जा सकता है.
रूट क्वेरी में पुष्टि किए गए Firebase ऐप्लिकेशन का नाम दिया गया है (__firebaseAppName). इससे कॉन्टेक्स्ट के हिसाब से मैन्युअल तरीके से इंटिग्रेशन किया जा सकता है:

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