If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
باستخدام واجهة سطر الأوامر Firebase، يمكنك نشر تطبيقات الويب Next.js على Firebase وعرضها باستخدام Firebase Hosting. تلتزم واجهة سطر الأوامر بإعدادات Next.js وتحوّلها إلى إعدادات Firebase بدون الحاجة إلى أي إعدادات إضافية أو بأقل قدر ممكن من الإعدادات الإضافية من جانبك. إذا كان تطبيقك يتضمّن منطقًا ديناميكيًا من جهة الخادم، تنشر واجهة سطر الأوامر هذا المنطق إلى Cloud Functions for Firebase.
قبل البدء
قبل البدء في نشر تطبيقك على Firebase، راجِع المتطلبات والخيارات التالية:
الإصدار 12.1.0 أو إصدار أحدث من Firebase CLI احرص على
تثبيت واجهة سطر الأوامر
باستخدام الطريقة المفضّلة لديك.
اختياري: تفعيل الفوترة في مشروعك على Firebase
(مطلوب إذا كنت تخطّط لاستخدام SSR)
اختياري: استخدِم مكتبة ReactFire التجريبية للاستفادة من ميزاتها المتوافقة مع Firebase
إعداد Firebase
للبدء، عليك إعداد Firebase لمشروع إطار العمل.
استخدِم واجهة سطر الأوامر Firebase لمشروع جديد، أو عدِّل firebase.json لمشروع حالي.
بدء مشروع جديد
في واجهة سطر الأوامر Firebase، فعِّل معاينة أُطر الويب:
firebase experiments:enable webframeworks
نفِّذ أمر التهيئة من واجهة سطر الأوامر ثم اتّبِع التعليمات:
firebase init hosting
أجب بنعم على السؤال "هل تريد استخدام إطار عمل على الويب؟" (تجريبي)"
اختَر دليل مصدر الاستضافة. إذا كان هذا تطبيق Next.js حاليًا،
تكتمل عملية واجهة سطر الأوامر، ويمكنك الانتقال إلى القسم التالي.
إذا طُلب منك ذلك، اختَر Next.js.
عرض المحتوى الثابت
بعد إعداد Firebase، يمكنك عرض محتوى ثابت باستخدام أمر النشر العادي:
اختياري: الدمج مع حزمة تطوير البرامج (SDK) لمنصة Firebase بلغة JavaScript
عند تضمين طرق Firebase JS SDK في حِزم الخادم والعميل، احرص على تجنُّب أخطاء وقت التشغيل من خلال التحقّق من isSupported() قبل استخدام المنتج.
لا تتوافق بعض المنتجات مع
بعض البيئات.
اختياري: الدمج مع حزمة تطوير البرامج (SDK) الإدارية في Firebase
ستتعذّر حِزم Admin SDK إذا تم تضمينها في إصدار المتصفّح، لذا يُرجى الرجوع إليها فقط داخل getStaticProps وgetStaticPaths.
عرض محتوى ديناميكي بالكامل (العرض من جهة الخادم)
سيرصد Firebase CLI استخدام
getServerSideProps.
في مثل هذه الحالات، ستنشر واجهة سطر الأوامر الدوال إلى Cloud Functions for Firebase لتشغيل رمز الخادم الديناميكي. يمكنك الاطّلاع على معلومات حول هذه الدوال، مثل نطاقها وإعدادات وقت التشغيل، في وحدة تحكّم 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 AppconstfirebaseApp=getApp(useRouter().query.__firebaseAppName);
تاريخ التعديل الأخير: 2025-09-06 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-09-06 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["\u003cbr /\u003e\n\nUsing the Firebase CLI, you can deploy your Next.js Web apps to Firebase and\nserve them with Firebase Hosting. The CLI respects your Next.js settings and\ntranslates them to Firebase settings with zero or minimal extra configuration on\nyour part. If your app includes dynamic server-side logic, the CLI deploys that\nlogic to Cloud Functions for Firebase.\n| **Note:** Framework-aware Hosting is an early public preview. This means that the functionality might change in backward-incompatible ways. A preview release is not subject to any SLA or deprecation policy and may receive limited or no support.\n| **Caution:** For developers creating a full-stack Next.js app, we strongly recommend [Firebase App Hosting](/docs/app-hosting). If you're already using the frameworks experiment in the Firebase CLI, we recommend \"graduating\" to App Hosting. With App Hosting, you'll have a unified solution to manage everything from CDN to server-side rendering, along with improved GitHub integration.\n\nBefore you begin\n\nBefore you get started deploying your app to Firebase,\nreview the following requirements and options:\n\n- Firebase CLI version 12.1.0 or later. Make sure to [install the CLI](/docs/cli#install_the_firebase_cli) using your preferred method.\n- Optional: Billing enabled on your Firebase project\n (required if you plan to use SSR)\n\n- Optional: use the experimental ReactFire library to benefit from its\n Firebase-friendly features\n\nInitialize Firebase\n\nTo get started, initialize Firebase for your framework project.\nUse the Firebase CLI for a new project, or modify `firebase.json` for an\nexisting project.\n\nInitialize a new project\n\n1. In the Firebase CLI, enable the web frameworks preview: \n\n ```\n firebase experiments:enable webframeworks\n ```\n2. Run the initialization command from the CLI and then follow the prompts:\n\n ```\n firebase init hosting\n ```\n\n \u003cbr /\u003e\n\n3. Answer yes to \"Do you want to use a web framework? (experimental)\"\n\n4. Choose your hosting source directory. If this is an existing Next.js app,\n the CLI process completes, and you can proceed to the next section.\n\n5. If prompted, choose Next.js.\n\nServe static content\n\nAfter initializing Firebase, you can serve static content with the standard\ndeployment command: \n\n firebase deploy\n\nYou can [view your deployed app](/docs/hosting/test-preview-deploy#view-changes)\non its live site.\n\nPre-render dynamic content\n\nThe Firebase CLI will detect usage of\n[getStaticProps](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props)\nand [getStaticPaths](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths).\n\nOptional: integrate with the Firebase JS SDK\n\nWhen including Firebase JS SDK methods in both server and client bundles, guard\nagainst runtime errors by checking `isSupported()` before using the product.\nNot all products are\n[supported in all environments](/docs/web/environments-js-sdk#other_environments).\n| **Tip:** consider using [ReactFire](https://github.com/FirebaseExtended/reactfire#reactfire), which does this for you automatically.\n\nOptional: integrate with the Firebase Admin SDK\n\nAdmin SDK bundles will fail if included in your browser build; refer to them\nonly inside [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)\nand [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching/get-static-paths).\n\nServe fully dynamic content (SSR)\n\nThe Firebase CLI will detect usage of\n[getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props).\nIn such cases, the CLI will deploy functions to Cloud Functions for Firebase to run dynamic\nserver code. You can view information about these functions, such as their domain and runtime\nconfiguration, in the [Firebase console](https://console.firebase.google.com/project/_/functions).\n\nConfigure Hosting behavior with `next.config.js`\n\nImage Optimization\n\nUsing [Next.js Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)\nis supported, but it will trigger creation of a function\n(in [Cloud Functions for Firebase](/docs/functions)), even if you're not using SSR.\n| **Note:** Because of this, image optimization and Hosting preview channels don't interoperate well together.\n\nRedirects, Rewrites, and Headers\n\nThe Firebase CLI respects\n[redirects](https://nextjs.org/docs/api-reference/next.config.js/redirects),\n[rewrites](https://nextjs.org/docs/api-reference/next.config.js/rewrites), and\n[headers](https://nextjs.org/docs/api-reference/next.config.js/headers) in\n`next.config.js`, converting them to their\nrespective equivalent Firebase Hosting configuration at deploy time. If a\nNext.js redirect, rewrite, or header cannot be converted to an equivalent\nFirebase Hosting header, it falls back and builds a function---even if you\naren't using image optimization or SSR.\n\nOptional: integrate with Firebase Authentication\n\nThe web framework-aware Firebase deployment tooling will automatically keep\nclient and server state in sync using cookies. There are some methods provided\nfor accessing the authentication context in SSR:\n\n- The Express `res.locals` object will optionally contain an authenticated Firebase App instance (`firebaseApp`) and the currently signed-in user (`currentUser`). This can be accessed in `getServerSideProps`.\n- The authenticated Firebase App name is provided on the route query (`__firebaseAppName`). This allows for manual integration while in context:\n\n // get the authenticated Firebase App\n const firebaseApp = getApp(useRouter().query.__firebaseAppName);"]]
