שילוב Next.js

באמצעות ה-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 לפרויקט קיים.

איך מפעילים פרויקט חדש

1. מפעילים את התצוגה המקדימה של מסגרות האינטרנט ב-CLI של Firebase:

   firebase experiments:enable webframeworks

2. מריצים את פקודת האיפוס מה-CLI ופועלים לפי ההנחיות:

   firebase init hosting

3. עונים 'כן' לשאלה 'האם ברצונך להשתמש במסגרת אינטרנט? (גרסה ניסיונית)'

4. בוחרים את ספריית המקור לאירוח. אם מדובר באפליקציית Next.js קיימת, תהליך ה-CLI יושלם ותוכלו להמשיך לקטע הבא.

5. אם מוצגת בקשה, בוחרים ב-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, שמכירים את מסגרת האתר, יאבטחו את הסנכרון של מצב הלקוח והשרת באמצעות קובצי cookie. יש כמה שיטות לגישה להקשר האימות ב-SSR:

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

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