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