Next.js와 firebase 연동하기

매우 소규모의 백엔드 기능이 필요해서 firebase를 사용해보기로 했다. 서버를 직접 만들 필요 없이 여러 서비스를 이용할 수 있다. (데이터베이스, 인증, 스토리지, 함수 및 호스팅 등)

1. firebase 시작하기

1.1 firebase 프로젝트 시작하기


1.2 앱 추가하기

웹 개발을 선택하였다. 앱을 등록하면 Firebase의 SDK가 제공된다. 이를 저장해두고 콘솔로 이동한다.

---

2. Next.js 프로젝트에 firebase 세팅하기

2.1 firesbase.ts 파일 생성

firebase.ts와 firestore.ts 파일을 생성한다. (firebase.ts의 파일명은 firebasedb.ts로도 많이 쓰이는 듯 하다.)
이 때, 파일 키들은 노출되면 안되므로, 환경변수로 보호해준다.

2.1.1 환경변수로 지정하기
최상단에 .env.local 파일을 생성한 뒤 NEXT_PUBLIC_key = vlaue 로 SDK의 정보를 저장한다. 사용할 때는 process.env.NEXT_PUBLIC_key 로 부르면 된다.

// firebase.ts
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECTID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGEBUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APPID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASURMENTID
};

// Initialize Firebase
const firebasedb = initializeApp(firebaseConfig)
export default firebasedb

2.2 firestore.ts 파일 생성

// firestore.ts
import firebase from './firebase';
import {  getFirestore  } from 'firebase/firestore';

const fireStore = getFirestore(firebase);
export default fireStore

---

3. Firestore 콘솔에서 Cloud Firestore를 생성

3.1 데이터베이스 만들기

프로덕션 모드에서 시작한다.

데이터베이스가 만들어진 것을 확인할 수 있다. 데이터를 직접 수정하고 읽으려면 규칙을 수정해야 한다.

3.2 규칙 수정하기

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true; -> false를 true로
    }
  }
}

---

4. Firestore 연동하기

4.1 데이터 읽기

데이터를 직접 추가해준다. getDoc으로 데이터를 읽어보자!

 setLogLevel("debug")
// bug 내용을 더 자세하게 알 수 있다.

  const db = getFirestore(firebasedb)
  const test = async () => {
    const query = await getDoc(
      doc(fireStore, "auth", "QhK2EkBMjzmIpSNbrwKZ")
    );
    console.log('이것 뭐에요~~?', query.data())
  }

메인화면에 버튼으로 작동시켰다.

console 창에서 데이터 값을 확인할 수 있다.

4.2 데이터 넣기
addDoc을 사용하여 데이터를 추가할 수 있다.

const testPost = async (e) => {
    e.preventDefault();
    await addDoc(collection(fireStore, "information"), {
      age: 17,
      name: 'kk'
    });
  }

연동에 성공했다. 👻