[Next] Next.js에 Firebase 연동하기

1. Firebase란?

구글 클라우드 기반의 serverless 서비스 플랫폼으로 서버를 직접 만들지 않아도 데이터베이스, 인증 서비스, 클라우드, 호스팅 등의 기능과 서비스를 제공한다.

여러가지 백엔드 서비스 플랫폼이 있지만, 간단한 미니 프로젝트를 할 땐 Firebase로 빠르게 프로젝트를 세팅할 수 있다.

 

2. Firebase 연결하기

프로젝트 생성 후 firebase 추가하기

 

apple, android, 웹 중 웹 클릭

 

앱 닉네임 입력 후 앱 등록 버튼을 클릭하면 firebase 설치 후 SDK 복사하기

npm install firebase

 

app폴더에 firebase.ts 파일 생성 후 SDK 코드 붙여넣으면 연결 완료인데 api키가 그대로 노출되어있으니

NEXT_PUBLIC 규칙을 붙여서 환경변수 설정 꼭 해주기

 

3. Firestore 연결하기

다시 콘솔로 돌아가서 빌드 - Firestore Database로 들어가서 데이터베이스 만들기 클릭

배포할거면 프로덕션 모드로 해야하지만 우선 테스트 모드에서 시작 (추후 변경 가능)

 

컬렉션을 추가해주고 

다시 프로젝트로 돌아가서 데이터가 잘 가져와지는지 확인하기 위해서 아래 코드를 넣었다.

'use client'
import { getFirestore, collection, getDocs } from "firebase/firestore";
import app from './firebase'

export default function Home() {
  const db = getFirestore(app);

  const getPost = async () => {
    const querySnapshot = await getDocs(collection(db, "컬렉션이름"))
    querySnapshot.forEach((doc) => {
      console.log(doc.data())
    })
  }

 

 

잘 가져와지는 거 확인!

 

3. Firestore에 데이터 저장하기

공식문서

 

1) setDoc으로 추가하기

import app from './firebase'
import { doc, setDoc } from "firebase/firestore";

const db = getFirestore(app);

const handleSubmit = async (e) => {
        e.preventDefault();

        await setDoc(doc(db, "컬렉션 이름", "문서 ID"),
            // 추가하려는 데이터 객체 형태로 전달
        );
    }

firestore 모듈에서 doc, setDoc 불러와서 위 처럼 데이터 추가해주면 되는데 문서 ID는 직접 정해주면 된다.

 

2) addDoc으로 추가하기

import app from './firebase'
import { collection, addDoc } from "firebase/firestore"; 

const db = getFirestore(app);

const handleSubmit = async (e) => {
        e.preventDefault();

        await addDoc(collection(db, "컬렉션 이름"),
            // 추가하려는 데이터 객체 형태로 전달
        );
    }

setDoc과 다르게 문서 ID는 자동 생성되기 때문에 따로 지정 안 해도 된다.

 

 

 

잘 들어간 거 확인!