Next.js + Firebase 프로젝트를 처음 시작할 때

 

 

1. 프로젝트 설정

✅ Next.js 프로젝트 생성

터미널에서 다음 명령어 실행:

 

npx create-next-app@latest my-app

 

cd my-app

✅ Firebase 프로젝트 생성

1. Firebase Console에 접속
2. 새 프로젝트 생성
3. 필요한 Firebase 서비스(인증, Firestore, Cloud Functions 등) 활성화

---

2. Firebase SDK 설정

✅ Firebase 설치

프로젝트 폴더에서 다음 명령어 실행:

sh

복사편집

npm install firebase

✅ Firebase 설정 파일 추가 (firebase.ts)

lib/firebase.ts 파일을 만들고 Firebase 설정 추가:

 

 

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

---

3. Firebase 인증 설정

✅ Firebase에서 인증 활성화

Firebase 콘솔 → Authentication → Sign-in method에서 Google, Email/Password, Phone 등을 활성화

✅ Next.js에서 Firebase Auth 사용

app/auth/page.tsx (또는 필요한 위치)에서 로그인 구현:

 

"use client";
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "@/lib/firebase";

export default function LoginPage() {
  const handleGoogleLogin = async () => {
    const provider = new GoogleAuthProvider();
    await signInWithPopup(auth, provider);
  };

  return <button onClick={handleGoogleLogin}>Google 로그인</button>;
}

---

4. Firestore 설정 (데이터베이스)

✅ Firestore 활성화

Firebase 콘솔 → Firestore Database → 데이터베이스 생성

✅ Firestore 데이터 읽기/쓰기

예제: 주문 목록 가져오기 (app/orders/page.tsx)

tsx 

 

"use client";
import { collection, getDocs } from "firebase/firestore";
import { db } from "@/lib/firebase";
import { useEffect, useState } from "react";

export default function OrdersPage() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const fetchOrders = async () => {
      const querySnapshot = await getDocs(collection(db, "orders"));
      setOrders(querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));
    };
    fetchOrders();
  }, []);

  return (
    <div>
      <h1>주문 목록</h1>
      {orders.map((order) => (
        <div key={order.id}>{order.name}</div>
      ))}
    </div>
  );
}

5. Firebase Hosting (배포)

✅ Firebase CLI 설치

sh

복사편집 

npm install -g firebase-tools

✅ Firebase 로그인

sh

복사편집

firebase login

✅ Firebase 프로젝트 연결

sh

복사편집

firebase init

• Hosting 선택
• 프로젝트 연결 후 out 폴더 사용하도록 설정

✅ Next.js 빌드 후 배포

sh

복사편집

npm run build

firebase deploy

---

✅ 정리

1. Next.js 프로젝트 생성
2. Firebase 프로젝트 설정 & Firebase SDK 설치
3. Firebase Authentication 적용
4. Firestore 데이터베이스 사용
5. Firebase Hosting 배포