وباستخدام واجهة سطر الأوامر في Firebase، يمكنك نشر تطبيقات الويب Next.js في Firebase اعرضها من خلال استضافة Firebase. يراعي واجهة سطر الأوامر إعدادات Next.js يترجمها إلى إعدادات Firebase باستخدام صفر أو أقل من الإعدادات الإضافية على من جانبك. إذا كان تطبيقك يتضمّن منطقًا ديناميكيًا من جهة الخادم، ينشر واجهة سطر الأوامر إلى وظائف السحابة الإلكترونية لبرنامج Firebase. أحدث إصدار متوافق من Next.js هو 13.4.7.
قبل البدء
قبل البدء في نشر تطبيقك على Firebase، راجِع المتطلبات والخيارات التالية:
- الإصدار 12.1.0 من واجهة سطر الأوامر في Firebase أو إصدار أحدث احرص على ما يلي: تثبيت واجهة سطر الأوامر باستخدام طريقتك المفضلة.
اختياري: تفعيل الفوترة في مشروعك على Firebase (مطلوبة إذا كنت تخطط لاستخدام SSR)
اختياري: يمكنك استخدام مكتبة 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.
اختياري: الدمج مع حزمة تطوير البرامج (SDK) لـ Firebase JS
عند تضمين طرق Firebase JS SDK في حِزم الخادم والعميل، يجب حماية
مقارنةً بأخطاء وقت التشغيل من خلال التحقّق من isSupported() قبل استخدام المنتج.
بعض المنتجات لا
متوافقة في جميع البيئات.
اختياري: الدمج مع حزمة تطوير البرامج (SDK) لمشرف Firebase
ستتعذّر حِزم SDK للمشرف إذا تم تضمينها في إصدار المتصفّح. من الرجوع إليها داخل getStaticProps فقط وgetStaticPaths.
عرض محتوى ديناميكي بالكامل (SSR)
سيكتشف واجهة سطر الأوامر في Firebase استخدام getServerSideProps في هذه الحالات، سينشر واجهة سطر الأوامر دوال في Cloud Functions لبرنامج Firebase من أجل تنفيذ الإجراءات الديناميكية. رمز الخادم. يمكنك الاطّلاع على معلومات حول هذه الدوال، مثل النطاق ووقت التشغيل. في وحدة تحكُّم Firebase.
إعداد سلوك الاستضافة باستخدام next.config.js
تحسين الصور
استخدام تحسين الصور في Next.js متاحة، ولكنها ستؤدي إلى إنشاء دالة (في الوظائف السحابية لبرنامج Firebase)، حتى في حال عدم استخدام SSR.
عمليات إعادة التوجيه وإعادة الكتابة والعناوين
يحترم واجهة سطر الأوامر في Firebase
عمليات إعادة التوجيه،
إعادة الكتابة
الرؤوس في
next.config.js، جارٍ تحويلها إلى
إعدادات استضافة Firebase المكافئة ذات الصلة في وقت النشر. إذا
لا يمكن تحويل إعادة التوجيه أو إعادة الكتابة أو العنوان Next.js إلى عنوان مكافئ.
في ما يخص عنوان "استضافة Firebase"، فإنها تتراجع وتنشئ دالة - حتى إذا
لا تستخدم تحسين الصور أو SSR.
اختياري: الدمج مع مصادقة Firebase
وستعمل أداة نشر Firebase المستنِدة إلى إطار عمل الويب على البرنامج وحالة الخادم متزامنتين باستخدام ملفات تعريف الارتباط. تم توفير بعض الطرق للوصول إلى سياق المصادقة في SSR:
- يحتوي كائن Express
res.localsاختياريًا على عنصر تمت مصادقته مثيل تطبيق Firebase (firebaseApp) والمستخدم المُسجِّل الدخول حاليًا (currentUser). يمكن الوصول إليه من خلالgetServerSideProps. - يتم توفير اسم تطبيق Firebase الذي تمت مصادقته في طلب بحث المسار.
(
__firebaseAppName). يسمح ذلك بالدمج اليدوي ضمن السياق:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);