دمج Next.js

باستخدام Firebase CLI، يمكنك نشر تطبيقات الويب Next.js الخاصة بك على Firebase وخدمتها من خلال استضافة Firebase. تحترم واجهة سطر الأوامر (CLI) إعدادات Next.js الخاصة بك وتترجمها إلى إعدادات Firebase مع صفر أو الحد الأدنى من التكوين الإضافي من جانبك. إذا كان تطبيقك يتضمن منطقًا ديناميكيًا من جانب الخادم، فإن واجهة سطر الأوامر (CLI) تنشر هذا المنطق في Cloud Functions for Firebase. أحدث إصدار مدعوم من Next.js هو 13.4.7.

قبل ان تبدأ

قبل البدء في نشر تطبيقك على Firebase، راجع المتطلبات والخيارات التالية:

  • الإصدار 12.1.0 من Firebase CLI أو الإصدارات الأحدث. تأكد من تثبيت واجهة سطر الأوامر (CLI) باستخدام الطريقة المفضلة لديك.

  • اختياري: تم تمكين الفوترة في مشروع Firebase الخاص بك (مطلوب إذا كنت تخطط لاستخدام SSR)

  • اختياري: استخدم مكتبة ReactFire التجريبية للاستفادة من ميزاتها الملائمة لـ Firebase

تهيئة Firebase

للبدء، قم بتهيئة Firebase لمشروع إطار العمل الخاص بك. استخدم Firebase CLI لمشروع جديد، أو قم بتعديل firebase.json لمشروع موجود.

تهيئة مشروع جديد

  1. في Firebase CLI، قم بتمكين معاينة أطر عمل الويب:
    firebase experiments:enable webframeworks

  2. قم بتشغيل أمر التهيئة من واجهة سطر الأوامر ثم اتبع المطالبات:

    firebase init hosting

  3. أجب بنعم على السؤال "هل تريد استخدام إطار عمل ويب؟ (تجريبي)"

  4. اختر دليل مصدر الاستضافة الخاص بك. إذا كان هذا تطبيق Next.js موجودًا، فستكتمل عملية واجهة سطر الأوامر (CLI)، ويمكنك المتابعة إلى القسم التالي.

  5. إذا طُلب منك، اختر Next.js.

خدمة محتوى ثابت

بعد تهيئة Firebase، يمكنك تقديم محتوى ثابت باستخدام أمر النشر القياسي:

firebase deploy

يمكنك عرض تطبيقك المنشور على موقعه المباشر.

العرض المسبق للمحتوى الديناميكي

سوف تكتشف واجهة سطر أوامر Firebase استخدام getStaticProps و getStaticPaths .

اختياري: التكامل مع Firebase JS SDK

عند تضمين أساليب Firebase JS SDK في كل من حزم الخادم والعميل، يمكنك الحماية من أخطاء وقت التشغيل عن طريق التحقق من isSupported() قبل استخدام المنتج. لا يتم دعم كافة المنتجات في كافة البيئات .

اختياري: التكامل مع Firebase Admin SDK

ستفشل حزم SDK الخاصة بالمشرف إذا تم تضمينها في إصدار المتصفح الخاص بك؛ قم بالرجوع إليها فقط داخل getStaticProps و getStaticPaths .

تقديم محتوى ديناميكي بالكامل (SSR)

سوف تكتشف واجهة سطر أوامر Firebase استخدام getServerSideProps . في مثل هذه الحالات، ستقوم واجهة سطر الأوامر (CLI) بنشر الوظائف إلى Cloud Functions لـ Firebase لتشغيل كود الخادم الديناميكي. يمكنك عرض معلومات حول هذه الوظائف، مثل المجال الخاص بها وتكوين وقت التشغيل، في وحدة تحكم Firebase .

قم بتكوين سلوك الاستضافة باستخدام next.config.js

تحسين الصورة

يتم دعم استخدام Next.js Image Optimization ، ولكنه سيؤدي إلى إنشاء وظيفة (في Cloud Functions for Firebase )، حتى إذا كنت لا تستخدم SSR.

عمليات إعادة التوجيه وإعادة الكتابة والرؤوس

تحترم واجهة سطر أوامر Firebase عمليات إعادة التوجيه وإعادة الكتابة والرؤوس في next.config.js ، وتحولها إلى تكوين استضافة Firebase المكافئ الخاص بها في وقت النشر. إذا تعذر تحويل إعادة التوجيه أو إعادة الكتابة أو الرأس الخاص بـ Next.js إلى رأس Firebase Hosting مكافئ، فإنه يتراجع وينشئ وظيفة - حتى إذا كنت لا تستخدم تحسين الصورة أو SSR.

اختياري: التكامل مع مصادقة Firebase

ستعمل أدوات نشر Firebase المدركة لإطار عمل الويب على الحفاظ تلقائيًا على مزامنة حالة العميل والخادم باستخدام ملفات تعريف الارتباط. هناك بعض الطرق المتوفرة للوصول إلى سياق المصادقة في SSR:

  • سيحتوي كائن Express res.locals اختياريًا على مثيل تطبيق Firebase المصادق عليه ( firebaseApp ) والمستخدم الذي سجل الدخول حاليًا ( currentUser ). يمكن الوصول إلى هذا في getServerSideProps .
  • يتم توفير اسم تطبيق Firebase المصادق عليه في استعلام المسار ( __firebaseAppName ). وهذا يسمح بالتكامل اليدوي أثناء وجوده في السياق:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);