שילוב Next.js

באמצעות Firebase CLI, אפשר לפרוס את אפליקציות האינטרנט של Next.js ב-Firebase ולהציג אותן באמצעות Firebase Hosting.

הצגת תוכן סטטי

אחרי שמאתחלים את Firebase, אפשר להציג תוכן סטטי באמצעות פקודת הפריסה הרגילה:

firebase deploy

אם האפליקציה כוללת לוגיקה דינמית בצד השרת, ה-CLI פורס את הלוגיקה הזו אל Cloud Functions for Firebase. אתם יכולים לראות את האפליקציה שפרסתם באתר הפעיל שלה.

טרום-רינדור של תוכן דינמי

ממשק Firebase CLI יזהה שימוש ב-getStaticProps וב-getStaticPaths.

אופציונלי: שילוב עם Firebase JS SDK

כשכוללים שיטות של Firebase JS SDK בחבילות של שרת ושל לקוח, צריך לבדוק את isSupported() לפני שמשתמשים במוצר כדי למנוע שגיאות בזמן הריצה. לא כל המוצרים נתמכים בכל הסביבות.

אופציונלי: שילוב עם SDK של Firebase לאדמינים

חבילות של Admin SDK ייכשלו אם הן ייכללו בגרסת הדפדפן שלכם. צריך להפנות אליהן רק בתוך 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.

הפניות אוטומטיות, שינוי כתובות וכותרות

ה-CLI של Firebase משאיר את ערכי ההפניות האוטומטיות, השינויים והכותרות ב-next.config.js כפי שהם, וממיר אותם להגדרות המקבילות ב-Firebase Hosting בזמן הפריסה. אם אי אפשר להמיר הפניה אוטומטית, כתיבה מחדש או כותרת של Next.js לכותרת Firebase Hosting מקבילה, המערכת חוזרת אחורה ויוצרת פונקציה – גם אם אתם לא משתמשים באופטימיזציה של תמונות או ב-SSR.

אופציונלי: שילוב עם אימות ב-Firebase

כלי הפריסה של Firebase שמודעים למסגרת האינטרנט ישמרו באופן אוטומטי על סנכרון בין מצב הלקוח ומצב השרת באמצעות קובצי Cookie. יש כמה שיטות לגישה להקשר האימות ב-SSR:

• אובייקט Express‏ res.locals יכול להכיל אופציונלית מופע מאומת של אפליקציית Firebase‏ (firebaseApp) ואת המשתמש שמחובר כרגע (currentUser). אפשר לגשת לנתונים האלה ב-getServerSideProps.
• שם האפליקציה המאומתת ב-Firebase מופיע בשאילתת המסלול (__firebaseAppName). כך אפשר לבצע שילוב ידני בהקשר:

// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);