הנה מדריך צעד-אחר-צעד להתקנה והגדרה של Firebase בפרויקט Next.js 16.
פיתוח

הנה מדריך צעד-אחר-צעד להתקנה והגדרה של Firebase בפרויקט Next.js 16.

אביוט
31.12.2025
5 דקות קריאה

מדריך צעד-אחר-צעד להתקנה והגדרה של Firebase בפרויקט Next.js 16.

בשמחה! שילוב Firebase ב-Next.js 16 הוא תהליך יחסית פשוט, אך חשוב לבצע אותו בצורה מסודרת כדי להתמודד נכון עם ה-App Router וניהול משתני סביבה.

הנה מדריך צעד-אחר-צעד להתקנה והגדרה של Firebase בפרויקט Next.js 16.

שלב 1: יצירת פרויקט ב-Firebase Console

לפני שניגשים לקוד, עלינו להכין את התשתית בענן.

  1. היכנס ל-Firebase Console.
  2. לחץ על Create a project ועקוב אחר ההוראות (תן שם לפרויקט, בחר אם להפעיל Google Analytics וכו').
  3. לאחר שהפרויקט מוכן, לחץ על האייקון של Web (</>) כדי להוסיף אפליקציה חדשה.
  4. תן כינוי לאפליקציה ולחץ על Register app.
  5. כעת תוצג לך קוביית קוד עם ה-firebaseConfig. אל תעתיק אותה עדיין לקוד, אלא שמור את הנתונים בצד. אנחנו נשתמש בהם במשתני סביבה.

שלב 2: התקנת החבילה

בטרמינל של הפרויקט שלך ב-Next.js, הרץ את הפקודה הבאה להתקנת ה-SDK של Firebase:

npm install firebase
# או
yarn add firebase
# או
pnpm add firebase

שלב 3: הגדרת משתני סביבה (Environment Variables)

כדי לשמור על אבטחה וסדר, לא נדביק את המפתחות ישירות בקוד. צור קובץ בשם .env.local בשורש הפרויקט שלך (באותה תיקייה כמו package.json).

הדבק שם את הנתונים משלב 1, אך הוסף להם את הקידומת NEXT_PUBLIC_ כדי שהם יהיו זמינים לצד הלקוח (Client Side), שכן Firebase Client SDK רץ בדפדפן.

# .env.local

NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyD...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.firebasestorage.app
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456:web:abcdef

שלב 4: אתחול Firebase (יצירת קובץ Config)

ב-Next.js 16 מומלץ לשמור קבצי עזר בתיקיית lib או utils. צור קובץ בשם lib/firebase.js (או firebase.ts אם אתה משתמש ב-TypeScript).

קובץ זה יבטיח שאנחנו מאתחלים את האפליקציה רק פעם אחת (חשוב מאוד ב-Next.js כדי למנוע שגיאות בזמן פיתוח בגלל Hot Reloading).

// lib/firebase.ts
import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// import { getStorage } from "firebase/storage"; // אם צריך אחסון קבצים

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Singleton Pattern: בדיקה האם האפליקציה כבר אותחלה
const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);

// ייצוא השירותים לשימוש בשאר האפליקציה
const auth = getAuth(app);
const db = getFirestore(app);
// const storage = getStorage(app);

export { app, auth, db };

שלב 5: דוגמה לשימוש (Read Data)

ב-Next.js 16 עובדים עם Server Components כברירת מחדל, אך ה-SDK הרגיל של Firebase (firebase/firestore) מותאם בעיקר ל-Client. עם זאת, ניתן להשתמש בו בתוך קומפוננטות Client או להשתמש ב-Firebase Admin SDK לריצה בצד השרת (נושא מתקדם יותר).

הנה דוגמה בסיסית לשליפת מידע ב-Client Component (למשל, רשימת מוצרים):

// app/components/ProductList.tsx
'use client'; // חובה כי אנחנו משתמשים ב-Hooks

import { useEffect, useState } from 'react';
import { db } from '@/lib/firebase'; // הייבוא מהקובץ שיצרנו
import { collection, getDocs } from 'firebase/firestore';

export default function ProductList() {
  const [products, setProducts] = useState<any[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, "products"));
        const productsData = querySnapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setProducts(productsData);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>רשימת מוצרים מ-Firestore:</h2>
      <ul>
        {products.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

טיפים חשובים ל-Next.js 16

  • 'use client': כל קומפוננטה שמשתמשת ב-useEffect, useState או פונקציות Auth של Firebase (כמו onAuthStateChanged), חייבת להתחיל בהוראה 'use client' בראש הקובץ.
  • Firebase Admin SDK: אם אתה רוצה לשלוף מידע בתוך Server Component (ללא useEffect ועם ביצועים טובים יותר ל-SEO), תצטרך להשתמש בחבילה firebase-admin. זה דורש סט אפ נפרד עם מפתחות Service Account.
  • אבטחה: וודא שב-Firebase Console בלשונית Firestore Database -> Rules הכללים שלך מאובטחים ולא פתוחים לכולם (allow read, write: if true; זה מסוכן לייצור).

תגיות:

nextjs,firebase
חזרה לבלוג