با استفاده از Firebase CLI، می‌توانید برنامه‌های وب Next.js خود را در Firebase مستقر کنید و آنها را با Firebase Hosting به کار بگیرید. CLI به تنظیمات Next.js شما احترام می‌گذارد و آنها را با صفر یا حداقل پیکربندی اضافی از طرف شما به تنظیمات Firebase ترجمه می‌کند. اگر برنامه شما شامل منطق پویای سمت سرور باشد، CLI آن منطق را به Cloud Functions for Firebase مستقر می‌کند.
قبل از اینکه شروع کنی
قبل از شروع به استقرار برنامه خود در Firebase، الزامات و گزینه‌های زیر را بررسی کنید:
- نسخه ۱۲.۱.۰ یا بالاتر از رابط خط فرمان Firebase . حتماً رابط خط فرمان را با استفاده از روش دلخواه خود نصب کنید .
اختیاری: فعال بودن قابلیت پرداخت در پروژه Firebase شما (در صورت استفاده از SSR الزامی است)
اختیاری: از کتابخانه آزمایشی ReactFire برای بهره‌مندی از ویژگی‌های سازگار با Firebase آن استفاده کنید
مقداردهی اولیه فایربیس
برای شروع، Firebase را برای پروژه فریم‌ورک خود راه‌اندازی کنید. برای یک پروژه جدید از Firebase CLI استفاده کنید، یا firebase.json برای یک پروژه موجود تغییر دهید.
یک پروژه جدید را مقداردهی اولیه کنید
- در رابط خط فرمان Firebase ، پیش‌نمایش چارچوب‌های وب را فعال کنید:
firebase experiments:enable webframeworks
دستور مقداردهی اولیه را از CLI اجرا کنید و سپس دستورالعمل‌ها را دنبال کنید:
firebase init hosting
به سوال «آیا می‌خواهید از یک چارچوب وب استفاده کنید؟» (آزمایشی) پاسخ مثبت دهید.
دایرکتوری منبع میزبانی خود را انتخاب کنید. اگر این یک برنامه Next.js موجود است، فرآیند CLI کامل می‌شود و می‌توانید به بخش بعدی بروید.
در صورت درخواست، Next.js را انتخاب کنید.
ارائه محتوای استاتیک
پس از مقداردهی اولیه Firebase، می‌توانید محتوای استاتیک را با دستور استاندارد Deployment ارائه دهید:
firebase deploy
می‌توانید برنامه‌ی مستقر شده‌ی خود را در سایت زنده‌ی آن مشاهده کنید .
پیش‌رندر محتوای پویا
رابط خط فرمان Firebase CLI) استفاده از getStaticProps و getStaticPaths را تشخیص می‌دهد.
اختیاری: ادغام با Firebase JS SDK
هنگام گنجاندن متدهای Firebase JS SDK در بسته‌های سرور و کلاینت، قبل از استفاده از محصول، با بررسی isSupported() از خطاهای زمان اجرا جلوگیری کنید. همه محصولات در همه محیط‌ها پشتیبانی نمی‌شوند.
اختیاری: با Firebase Admin SDK ادغام شود
بسته‌های SDK مدیریت در صورت قرار گرفتن در ساختار مرورگر شما با شکست مواجه می‌شوند؛ فقط درون getStaticProps و getStaticPaths به آنها ارجاع دهید.
ارائه محتوای کاملاً پویا (SSR)
رابط خط Firebase CLI) استفاده از getServerSideProps را تشخیص می‌دهد. در چنین مواردی، رابط خط فرمان توابع را در Cloud Functions for 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 که از چارچوب وب آگاه است، به طور خودکار وضعیت کلاینت و سرور را با استفاده از کوکی‌ها همگام نگه می‌دارد. روش‌هایی برای دسترسی به زمینه احراز هویت در SSR ارائه شده است:
- شیء Express
res.localsبه صورت اختیاری شامل یک نمونه احراز هویت شده از برنامه Firebase (firebaseApp) و کاربر فعلی وارد شده (currentUser) خواهد بود. این مورد را می‌توان درgetServerSidePropsمشاهده کرد. - نام احراز هویت شده‌ی برنامه‌ی Firebase در کوئری مسیر (
__firebaseAppName) ارائه شده است. این امر امکان ادغام دستی را در حین انجام موارد زیر فراهم می‌کند:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);