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