If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

דף זה תורגם על ידי Cloud Translation API.

שילוב Next.js

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

לפני שמתחילים

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

‫Firebase CLI בגרסה 12.1.0 ואילך. חשוב להתקין את ה-CLI בשיטה המועדפת.
אופציונלי: חיוב מופעל בפרויקט Firebase (נדרש אם מתכננים להשתמש ב-SSR)
אופציונלי: אפשר להשתמש בספריית ReactFire הניסיונית כדי ליהנות מהתכונות שלה שמתאימות ל-Firebase

הפעלת Firebase

כדי להתחיל, מאתחלים את Firebase עבור פרויקט המסגרת. משתמשים ב-Firebase CLI לפרויקט חדש, או משנים את firebase.json לפרויקט קיים.

הפעלת פרויקט חדש

ב-CLI‏ Firebase, מפעילים את גרסת הטרום-השקה של מסגרות האינטרנט:
```
firebase experiments:enable webframeworks
```
מריצים את פקודת האתחול מה-CLI ופועלים לפי ההנחיות:
```
firebase init hosting
```
עונים 'כן' לשאלה 'האם ברצונך להשתמש במסגרת אינטרנט?' (ניסיוני)"
בוחרים את ספריית המקור של האחסון. אם זו אפליקציית Next.js קיימת, תהליך ה-CLI יסתיים ותוכלו להמשיך לקטע הבא.
אם מוצגת בקשה לעשות זאת, בוחרים באפשרות Next.js.

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

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

firebase deploy

אתם יכולים לצפות באפליקציה שפרסתם באתר הפעיל שלה.

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

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

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

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

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

חבילות 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 Authentication

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

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

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