با استفاده از Firebase CLI، می‌توانید برنامه‌های وب Next.js خود را در Firebase مستقر کنید و آنها را با Firebase Hosting ارائه دهید. CLI به تنظیمات Next.js شما احترام می گذارد و آنها را به تنظیمات Firebase با صفر یا حداقل پیکربندی اضافی از طرف شما ترجمه می کند. اگر برنامه شما دارای منطق پویا سمت سرور باشد، CLI آن منطق را در Cloud Functions for Firebase به کار می‌برد. آخرین نسخه پشتیبانی شده Next.js 13.4.7 است.
قبل از شروع
قبل از اینکه شروع به استقرار برنامه خود در Firebase کنید، شرایط و گزینه های زیر را بررسی کنید:
- Firebase CLI نسخه 12.1.0 یا بالاتر. مطمئن شوید که CLI را با استفاده از روش دلخواه خود نصب کنید .
اختیاری: صورت‌حساب در پروژه 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 deploy
می توانید برنامه مستقر شده خود را در سایت زنده آن مشاهده کنید .
محتوای پویا را از قبل رندر کنید
Firebase CLI استفاده از getStaticProps و getStaticPaths را تشخیص خواهد داد.
اختیاری: ادغام با Firebase JS SDK
هنگامی که متدهای Firebase JS SDK را در بسته‌های سرور و کلاینت اضافه می‌کنید، قبل از استفاده از محصول، با بررسی isSupported() از خطاهای زمان اجرا محافظت کنید. همه محصولات در همه محیط ها پشتیبانی نمی شوند.
اختیاری: ادغام با Firebase Admin SDK
بسته‌های SDK Admin اگر در ساخت مرورگر شما گنجانده شوند، شکست خواهند خورد. فقط در داخل getStaticProps و getStaticPaths به آنها مراجعه کنید.
ارائه محتوای کاملا پویا (SSR)
Firebase CLI استفاده از getServerSideProps را تشخیص خواهد داد. در چنین مواردی، CLI توابع را در 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 ارائه شده است:
- شی Express
res.localsبه صورت اختیاری شامل یک نمونه برنامه Firebase احراز هویت شده (firebaseApp) و کاربر وارد شده فعلی (currentUser) خواهد بود. این را می توان درgetServerSidePropsدسترسی داشت. - نام برنامه Firebase تأیید شده در جستار مسیر (
__firebaseAppName) ارائه شده است. این اجازه می دهد تا یکپارچه سازی دستی در حالی که در زمینه:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);