باستخدام Firebase CLI، يمكنك نشر تطبيقات الويب التي تستخدم Next.js على Firebase و عرضها باستخدام Firebase Hosting. تلتزم أداة CLI بإعدادات Next.js وتعدِّلها لتصبح إعدادات Firebase بدون أي إعدادات إضافية أو بأقل قدر ممكن من الإعدادات من جانبك. إذا كان تطبيقك يتضمّن منطقًا ديناميكيًا من جهة الخادم، تعرِض أداة CLI هذا المنطق على Cloud Functions for Firebase. أحدث إصدار متوافق من Next.js هو 13.4.7.
قبل البدء
قبل بدء نشر تطبيقك على Firebase، راجِع المتطلبات والخيارات التالية:
- Firebase الإصدار 12.1.0 من واجهة برمجة التطبيقات أو الإصدارات الأحدث احرص على تثبيت واجهة سطر الأوامر باستخدام الطريقة المفضّلة لديك.
اختياري: تفعيل الفوترة في مشروعك على Firebase (مطلوب إذا كنت تخطّط لاستخدام ميزة "الاستجابة السريعة للطلبات")
اختياري: استخدام مكتبة ReactFire التجريبية للاستفادة من ميزاتها المتوافقة مع Firebase
إعداد Firebase
للبدء، عليك إعداد Firebase لمشروع الإطار الأساسي.
استخدِم واجهة سطر أوامر Firebase لمشروع جديد، أو عدِّل firebase.json لمشروع
حالي.
بدء مشروع جديد
- في Firebase CLI، فعِّل معاينة إطارات عمل الويب:
firebase experiments:enable webframeworks
شغِّل أمر الإعداد من وحدة التحكّم في سطر الأوامر، ثم اتّبِع التعليمات:
firebase init hosting
يجب الإجابة بـ "نعم" على السؤال "هل تريد استخدام إطار عمل ويب؟ (تجريبي)"
اختَر دليل مصدر الاستضافة. إذا كان هذا تطبيقًا حاليًا من Next.js، تنتهي عملية سطر الأوامر، ويمكنك المتابعة إلى القسم التالي.
اختَر Next.js إذا طُلب منك ذلك.
عرض محتوى ثابت
بعد إعداد Firebase، يمكنك عرض محتوى ثابت باستخدام الأمر العادي deployment:
firebase deploy
يمكنك الاطّلاع على تطبيقك المنشور على موقعه الإلكتروني المنشور.
معالجة المحتوى الديناميكي مسبقًا
سترصد Firebase CLI استخدام getStaticProps وgetStaticPaths.
اختياري: دمج حزمة تطوير البرامج (SDK) لبرنامج Firebase باستخدام JavaScript
عند تضمين طرق حزمة تطوير البرامج (SDK) لـ Firebase JS في حِزم الخادم والعميل، احرِص على تجنُّب أخطاء وقت التشغيل من خلال التحقّق من isSupported() قبل استخدام المنتج.
لا تتوفّر بعض المنتجات
في جميع البيئات.
اختياري: الدمج مع حزمة "مدير SDK في Firebase"
لن تعمل حِزم "حزمة تطوير البرامج (SDK) للمشرف" إذا تم تضمينها في إصدار المتصفّح، لذا يجب الإشارة إليها فقط داخل getStaticProps وgetStaticPaths.
عرض محتوى ديناميكي بالكامل (SSR)
سترصد واجهة Firebase CLI استخدام getServerSideProps. في هذه الحالات، ستنشر وحدة تحكم سطر الأوامر الدوال إلى Cloud Functions for Firebase لتشغيل رمز برمجي ديناميكي في الخادم. يمكنك الاطّلاع على معلومات عن هذه الدوال، مثل نطاقها وإعدادات وقت التشغيل ، في وحدة تحكّم Firebase.
ضبط سلوك Hosting باستخدام next.config.js
تحسين الصور
إنّ استخدام ميزة تحسين الصور في Next.js مسموح به، ولكنّه سيؤدي إلى إنشاء دالة (في Cloud Functions for Firebase)، حتى إذا لم تكن تستخدِم ميزة SSR.
عمليات إعادة التوجيه وإعادة الكتابة والعناوين
تلتزم واجهة Firebase CLI بعمليات
إعادة التوجيه و
إعادة الكتابة و
الرؤوس في
next.config.js، وتحول هذه العمليات إلى
إعدادات Firebase Hosting المقابلة لها في وقت النشر. إذا تعذّر تحويل إعادة توجيه أو إعادة كتابة أو عنوان في Next.js إلى عنوان Firebase Hosting مماثل، يتم الرجوع إلى علامة html وإنشاء دالة، حتى إذا لم تكن تستخدم ميزة تحسين الصور أو ميزة "الاستجابة السريعة للطلبات".
اختياري: الدمج مع Firebase Authentication
ستحافظ أدوات نشر Firebase المتوافقة مع إطار عمل الويب تلقائيًا على مزامنة حالة العميل والخادم باستخدام ملفات تعريف الارتباط. هناك بعض الطرق المقدَّمة للوصول إلى سياق المصادقة في ميزة SSR:
- سيحتوي عنصر Express
res.localsاختياريًا على مثيل مُعتمَد لتطبيق Firebase (firebaseApp) والمستخدم الذي سجّل الدخول حاليًا (currentUser). ويمكن الوصول إلى ذلك فيgetServerSideProps. - يتم تقديم اسم تطبيق Firebase الذي تمّت المصادقة عليه في طلب المسار
(
__firebaseAppName). يتيح ذلك الدمج اليدوي أثناء استخدام السياق:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);