שלב את Next.js

באמצעות Firebase CLI, אתה יכול לפרוס את יישומי האינטרנט של 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 עבור פרויקט המסגרת שלך. השתמש ב-Firebase CLI עבור פרויקט חדש, או שנה את firebase.json עבור פרויקט קיים.

אתחול פרויקט חדש

  1. ב-Firebase CLI, אפשר את התצוגה המקדימה של מסגרות האינטרנט:
    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() לפני השימוש במוצר. לא כל המוצרים נתמכים בכל הסביבות .

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

חבילות SDK של Admin ייכשלו אם ייכללו במבנה הדפדפן שלך; עיין בהם רק בתוך getStaticProps ו- getStaticPaths .

הגשת תוכן דינמי מלא (SSR)

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

הגדר את התנהגות האירוח באמצעות 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 Authentication

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

  • האובייקט Express res.locals יכיל באופן אופציונלי מופע של Firebase App מאומת ( firebaseApp ) ואת המשתמש המחובר כעת ( currentUser ). ניתן לגשת לזה ב- getServerSideProps .
  • שם אפליקציית Firebase המאומת מסופק בשאילתת המסלול ( __firebaseAppName ). זה מאפשר אינטגרציה ידנית בהקשר:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);