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