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