באמצעות ה-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:
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() לפני שמשתמשים במוצר כדי למנוע שגיאות זמן ריצה.
לא כל המוצרים נתמכים בכל הסביבות.
אופציונלי: שילוב עם 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 משאיר את ההפניות האוטומטיות, הכתובות מחדש והכותרות ב-next.config.js כפי שהן, וממיר אותן להגדרות המקבילות ב-Firebase Hosting בזמן הפריסה. אם אי אפשר להמיר הפניה אוטומטית, כותרת או כתיבה מחדש ב-Next.js לכותרת Firebase Hosting מקבילה, המערכת תשתמש בחלופה ותבנה פונקציה – גם אם אתם לא משתמשים באופטימיזציה של תמונות או ב-SSR.
אופציונלי: שילוב עם אימות ב-Firebase
כלי הפריסה של Firebase, שמכירים את מסגרת האתר, יאבטחו את הסנכרון של מצב הלקוח והשרת באמצעות קובצי cookie. יש כמה שיטות לגישה להקשר האימות ב-SSR:
- אובייקט
res.localsשל Express יכיל, אם רוצים, מופע מאומת של אפליקציית Firebase (firebaseApp) ואת המשתמש שמחובר כרגע (currentUser). אפשר לגשת אליו דרךgetServerSideProps. - שם האפליקציה המאומתת ב-Firebase מופיע בשאילתת המסלול (
__firebaseAppName). כך אפשר לבצע שילוב ידני בהקשר:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);