Next.js Firebase(Firestore)연동하기

Firebase를 활용할 일이 종종 있어 Next.js와 연동하는 방법에 대해 정리했다.

Firebase

파이어베이스는 구글(Google)이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로 백엔드의 요소들을 쉽게 구현할 수 있도록 도와주는 일종의 툴이다.

 

파이어베이스에서 프로젝트 추가

Firebase | Google's Mobile and Web App Development Platform

 

이 주소에 들어가서 로그인 후 프로젝트를 만들면 되며 앱 생성시 나오는 SDK 값을 저장하면된다.

 

프로젝트에 firebase 설치

"firebase": "^10.8.0” 기준

npm install firebase

 

 

firebasedb 파일 생성

프로젝트 루트에 firebase 폴더 생성 후 firebasedb.js 파일을 생성한다.

 

firebasedb.js

파일 키들은 환경변수로 보호해준다.

storage 를 활용 할 경우 getStorage 로 불러오면 된다.

import { initializeApp } from "firebase/app";
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_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASURMENT_ID,
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const fireStore = getFirestore(firebaseApp);
const fireStorage = getStorage(firebaseApp);

export { fireStore, fireStorage };

 

 

파이어베이스 콘솔에서 FireStore 생성

FireStore 생성 후 아래 이미지와 같이 규칙을 수정한다.

 

테스트 하기 위해 데이터를 추가한다.

 

 

CRUD 구현 방법

Read

• getDoc : firestore의 데이터 한개만 가져올 때 / getDoc(collection(db,"컬렉션이름","문서이름"))
• getDocs : 여러개의 데이터를 한번에 가져올 때 / getDocs(collection(db,"컬렉션이름"))
• onSnapShot : 데이터가 변경되었을 때 (create 되거나, update 되거나, delete되거나) 실시간으로 데이터를 렌더링

하위 코드는 getDocs 를 활용해 데이터를 가져와 연동 테스트를 했다.

import { collection, getDocs } from "firebase/firestore";
import { fireStore } from "../../firebase/firebasedb";
import { useEffect } from "react";

export default function Test() {

  const fetchData = async () => {
    const querySnapshot = await getDocs(collection(fireStore, "테스트"));
    const data = querySnapshot.docs.map((doc) => doc.data());
    console.log(data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div></div>
  );
}

 

 

Create

• addDoc(collection(database, "컬렉션이름"))

Create기능은 firestore의 addDoc 메소드를 사용한다.

import { collection, getDocs, addDoc } from "firebase/firestore";
import { fireStore } from "../../firebase/firebasedb";
import { useEffect } from "react";
import Image from "next/image";


export default function Test() {

  const onClickUpLoadButton = async () => {
    await addDoc(collection(fireStore, "테스트"), {
      name: "Jin",
    });
  };

  return (
    <div>
      <button onClick={onClickUpLoadButton}>추가</button>
    </div>
  );
}

 

 

 

Update

• updateDoc(doc(firestore, "컬렉션이름", "문서 이름")

import { collection, getDocs, updateDoc, doc } from "firebase/firestore";
import { fireStore } from "../../firebase/firebasedb";
import { useEffect } from "react";

export default function Test() {

  const onClickUpdateButton = async () => {
    await updateDoc(doc(fireStore, "테스트", "13R1IDY108gO6XIMyC93"), {
      name: "sora",
    });
  };

  return (
    <div>
      <button onClick={onClickUpdateButton}>업데이트</button>
    </div>
  );
}

 

 

Delete

• deleteDoc(doc(db,"컬렉션이름","문서이름"))

import { collection, getDocs, deleteDoc, doc } from "firebase/firestore";
import { fireStore } from "../../firebase/firebasedb";
import { useEffect } from "react";

export default function Test() {

  const onClickDeleteButton = async () => {
    await deleteDoc(doc(fireStore, "테스트", "13R1IDY108gO6XIMyC93"));
  };

  return (
    <div>
      <button onClick={onClickDeleteButton}>삭제</button>
    </div>
  );
}