باستخدام واجهة سطر الأوامر Firebase، يمكنك نشر تطبيقات الويب Next.js على Firebase وعرضها باستخدام Firebase Hosting.
عرض المحتوى الثابت
بعد إعداد Firebase، يمكنك عرض محتوى ثابت باستخدام أمر النشر العادي:
firebase deploy
إذا كان تطبيقك يتضمّن منطقًا ديناميكيًا من جهة الخادم، تنشر واجهة سطر الأوامر هذا المنطق إلى Cloud Functions for Firebase. يمكنك عرض تطبيقك الذي تم نشره على موقعه الإلكتروني المباشر.
العرض المُسبَق للمحتوى الديناميكي
ستكتشف واجهة سطر الأوامر Firebase استخدام getStaticProps وgetStaticPaths.
اختياري: الدمج مع حزمة تطوير البرامج (SDK) من Firebase لنظام التشغيل JavaScript
عند تضمين طرق حزمة تطوير البرامج (SDK) في JavaScript من Firebase في حِزم الخادم والعميل، احرص على تجنُّب أخطاء وقت التشغيل من خلال التحقّق من isSupported() قبل استخدام المنتج.
لا تتوافق كل المنتجات مع بعض البيئات.
اختياري: الدمج مع مدير SDK في Firebase
ستتعذّر حِزم Admin SDK إذا تم تضمينها في إصدار المتصفّح، لذا يُرجى الرجوع إليها فقط داخل getStaticProps وgetStaticPaths.
عرض محتوى ديناميكي بالكامل (العرض من جهة الخادم)
سيرصد Firebase واجهة سطر الأوامر استخدام 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);