دمج Next.js

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

قبل البدء

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

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

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

• اختياري: يمكنك استخدام مكتبة ReactFire التجريبية للاستفادة من الميزات المتوافقة مع Firebase.

إعداد Firebase

للبدء، عليك إعداد Firebase لمشروع إطار العمل. استخدِم واجهة سطر أوامر Firebase لمشروع جديد، أو عدِّل firebase.json لمشروع حالي.

بدء مشروع جديد

1. في Firebase CLI، فعِّل معاينة إطارات عمل الويب:

   firebase experiments:enable webframeworks

2. شغِّل أمر الإعداد من وحدة التحكّم في سطر الأوامر، ثم اتّبِع التعليمات:

   firebase init hosting

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

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

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

عرض المحتوى الثابت

بعد إعداد Firebase، يمكنك عرض محتوى ثابت باستخدام الأمر العادي deployment:

firebase deploy

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

معالجة المحتوى الديناميكي مسبقًا

سترصد Firebase CLI استخدام getStaticProps وgetStaticPaths.

اختياري: دمج حزمة تطوير البرامج (SDK) لبرنامج Firebase باستخدام JavaScript

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

اختياري: الدمج مع حزمة "مدير SDK في Firebase"

لن تعمل حِزم "حزمة تطوير البرامج (SDK) للمشرف" إذا تم تضمينها في إصدار المتصفّح، لذا يُرجى الإشارة إليها فقط داخل getStaticProps وgetStaticPaths.

عرض محتوى ديناميكي بالكامل (SSR)

سيرصد واجهة سطر الأوامر Firebase استخدام getServerSideProps. في هذه الحالات، ستنشر وحدة تحكم سطر الأوامر الدوال إلى Cloud Functions for Firebase لتشغيل رمز برمجي ديناميكي في الخادم. يمكنك الاطّلاع على معلومات عن هذه الدوال، مثل نطاقها وإعدادات وقت التشغيل ، في وحدة تحكّم Firebase.

ضبط سلوك Hosting باستخدام next.config.js

تحسين الصور

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

عمليات إعادة التوجيه وإعادة الكتابة والعناوين

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

اختياري: الدمج مع Firebase Authentication

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

• سيحتوي عنصر res.locals Express اختياريًا على مثيل تطبيق Firebase (firebaseApp) الذي تمت مصادقته والمستخدم المُسجّل الدخول إليه حاليًا (currentUser). ويمكن الوصول إلى ذلك من خلال getServerSideProps.
• يتم تقديم اسم تطبيق Firebase الذي تمّت المصادقة عليه في طلب المسار (__firebaseAppName). يتيح ذلك الدمج اليدوي أثناء استخدام السياق:

// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);