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 CLI، می‌توانید برنامه‌های وب Next.js خود را در Firebase مستقر کنید و آنها را با Firebase Hosting ارائه دهید. CLI به تنظیمات Next.js شما احترام می گذارد و آنها را به تنظیمات Firebase با صفر یا حداقل پیکربندی اضافی از طرف شما ترجمه می کند. اگر برنامه شما دارای منطق پویا سمت سرور باشد، CLI آن منطق را در Cloud Functions for Firebase به کار می‌برد.
قبل از شروع
قبل از اینکه شروع به استقرار برنامه خود در Firebase کنید، شرایط و گزینه های زیر را بررسی کنید:
اختیاری: صورت‌حساب در پروژه Firebase شما فعال است (اگر قصد استفاده از SSR را دارید، لازم است)
اختیاری: از کتابخانه آزمایشی ReactFire برای بهره مندی از ویژگی های Firebase-friendly آن استفاده کنید
Firebase را راه اندازی کنید
برای شروع، Firebase را برای پروژه چارچوب خود مقداردهی کنید. از Firebase CLI برای یک پروژه جدید استفاده کنید، یا firebase.json برای یک پروژه موجود تغییر دهید.
یک پروژه جدید را راه اندازی کنید
در Firebase CLI، پیش‌نمایش چارچوب‌های وب را فعال کنید:
firebase experiments:enable webframeworks
دستور اولیه سازی را از CLI اجرا کنید و سپس دستورات را دنبال کنید:
firebase init hosting
به "آیا می خواهید از چارچوب وب استفاده کنید؟ (تجربی)" بله پاسخ دهید.
دایرکتوری منبع میزبانی خود را انتخاب کنید. اگر این یک برنامه Next.js موجود است، فرآیند CLI کامل می‌شود و می‌توانید به بخش بعدی بروید.
اگر از شما خواسته شد، Next.js را انتخاب کنید.
محتوای ثابت را ارائه دهید
پس از مقداردهی اولیه Firebase، می توانید محتوای استاتیک را با دستور استقرار استاندارد ارائه دهید:
هنگامی که متدهای Firebase JS SDK را در بسته‌های سرور و کلاینت اضافه می‌کنید، قبل از استفاده از محصول، با بررسی isSupported() از خطاهای زمان اجرا محافظت کنید. همه محصولات در همه محیط ها پشتیبانی نمی شوند.
اختیاری: ادغام با Firebase Admin SDK
بسته‌های SDK Admin اگر در ساخت مرورگر شما گنجانده شوند، شکست خواهند خورد. فقط در داخل getStaticProps و getStaticPaths به آنها مراجعه کنید.
ارائه محتوای کاملا پویا (SSR)
Firebase CLI استفاده از getServerSideProps را تشخیص خواهد داد. در چنین مواردی، CLI توابع را در Cloud Functions for Firebase برای اجرای کد سرور پویا مستقر می کند. می‌توانید اطلاعات مربوط به این توابع، مانند دامنه و پیکربندی زمان اجرا، را در کنسول Firebase مشاهده کنید.
Firebase CLI به تغییر مسیرها ، بازنویسی‌ها و هدرها در next.config.js احترام می‌گذارد و آنها را در زمان استقرار به پیکربندی Firebase Hosting معادل مربوطه تبدیل می‌کند. اگر یک ریدایرکت، بازنویسی یا هدر Next.js را نتوان به یک هدر Firebase Hosting معادل تبدیل کرد، به عقب می افتد و یک تابع ایجاد می کند - حتی اگر از بهینه سازی تصویر یا SSR استفاده نمی کنید.
اختیاری: ادغام با Firebase Authentication
ابزار استقرار Firebase آگاه از چارچوب وب به طور خودکار وضعیت سرویس گیرنده و سرور را با استفاده از کوکی ها همگام نگه می دارد. چند روش برای دسترسی به زمینه احراز هویت در SSR ارائه شده است:
شی Express res.locals به صورت اختیاری شامل یک نمونه برنامه Firebase احراز هویت شده ( firebaseApp ) و کاربر وارد شده فعلی ( currentUser ) خواهد بود. این را می توان در getServerSideProps دسترسی داشت.
نام برنامه Firebase تأیید شده در جستار مسیر ( __firebaseAppName ) ارائه شده است. این اجازه می دهد تا یکپارچه سازی دستی در حالی که در زمینه:
// get the authenticated Firebase AppconstfirebaseApp=getApp(useRouter().query.__firebaseAppName);
تاریخ آخرین بهروزرسانی 2025-08-30 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-08-30 بهوقت ساعت هماهنگ جهانی."],[],[],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);"]]
