באמצעות ה-CLI של Firebase, ניתן לפרוס את אפליקציות האינטרנט של 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
מפעילים את Firebase
כדי להתחיל, צריך להפעיל את Firebase בפרויקט framework שלכם.
משתמשים ב-CLI של Firebase לפרויקט חדש, או משנים את firebase.json לפרויקט קיים.
הפעלת פרויקט חדש
- ב-CLI של Firebase, מפעילים את התצוגה המקדימה של frameworks:
firebase experiments:enable webframeworks
מריצים את פקודת האתחול מה-CLI ולאחר מכן פועלים לפי ההנחיות:
firebase init hosting
התשובה 'כן' היא "Do you want to use a web framework? " (גרסה ניסיונית)'
בוחרים את ספריית קובצי המקור של האירוח. אם זו אפליקציית Next.js קיימת, התהליך ב-CLI יושלם, ותוכלו להמשיך לשלב הבא.
אם תתבקשו לעשות זאת, בוחרים באפשרות Next.js.
הצגת תוכן סטטי
אחרי הפעלה של Firebase, אפשר להציג תוכן סטטי באמצעות פקודת פריסה:
firebase deploy
אפשר להציג את האפליקציה שנפרסה באתר הפעיל שלה.
עיבוד מראש של תוכן דינמי
ה-CLI של Firebase יזהה את השימוש getStaticProps ו-getStaticPaths.
אופציונלי: שילוב עם Firebase JS SDK
כאשר כוללים שיטות Firebase JS SDK גם בחבילות שרתים וגם בחבילות לקוח,
מול שגיאות זמן ריצה, על ידי בדיקה של isSupported() לפני השימוש במוצר.
לא כל המוצרים
נתמך בכל הסביבות.
אופציונלי: שילוב עם Firebase Admin SDK
חבילות SDK של Admin ייכשלו אם הן ייכללו ב-build של הדפדפן. להתייחס אליהם רק בתוך getStaticProps ו-getStaticPaths.
הצגה של תוכן דינמי מלא (SSR)
ה-CLI של Firebase יזהה את השימוש getServerSideProps. במקרים כאלה, ה-CLI פורס פונקציות ב-Cloud Functions for Firebase כדי להריץ קוד דינמי בשרת. אפשר לראות מידע על הפונקציות האלה, כמו הדומיין וזמן הריצה שלהן במסוף Firebase.
הגדרת ההתנהגות של Hosting באמצעות next.config.js
אופטימיזציה של תמונות
שימוש באופטימיזציה של תמונות Next.js אבל היא תגרום ליצירת פונקציה (ב-Cloud Functions for Firebase), גם אם אתם לא משתמשים ב-SSR.
כתובות אתר להפניה מחדש, שכתובים וכותרות
ה-CLI של Firebase מכבד
redirects,
שכתובים,
כותרות ב-
next.config.js, ממירים אותם ל
למערך ההגדרות האישיות המקביל Firebase Hosting בזמן הפריסה. אם
אי אפשר להמיר כתובת אתר להפניה מחדש, שכתוב או כותרת של Next.js ל בשירותים שווי ערך
Firebase Hosting, היא עוברת חזרה ויוצרת פונקציה – אפילו אם
לא משתמשים באופטימיזציה של תמונות או ב-SSR.
אופציונלי: שילוב עם אימות ב-Firebase
הכלים לפריסה של Firebase שמבוססים על מסגרת אינטרנט ישמרו באופן אוטומטי על מצב הלקוח והשרת בסנכרון באמצעות קובצי Cookie. יש כמה שיטות לצורך גישה להקשר האימות ב-SSR:
- אובייקט Express
res.localsיכול להכיל באופן אופציונלי מאפיין מאומת מופע של אפליקציית Firebase (firebaseApp) והמשתמש שמחובר כרגע (currentUser). ניתן לגשת לשירות הזה ב-getServerSideProps. - השם המאומת של אפליקציית Firebase ב-Firebase מופיע בשאילתת המסלול
(
__firebaseAppName). כך אפשר לבצע שילוב ידני בתוך ההקשר:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);