Next.js 와 파이어베이스(Firebase) 연동하기

서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자.

파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하게 서버를 구성하고 싶을 때 이용하기 좋다.

---

🔥 파이어베이스 시작하기

1.1 파이어베이스 프로젝트 시작하기

파이어베이스 콘솔 로 들어가 프로젝트를 만들어줍시다.

 

1.2 앱 만들기

앱을 만들면 파이어베이스 SDK 가 나오는데 그 값을 저장해둡시다.

---

🌩 Next.js 프로젝트에 파이어베이스 세팅

1. firebasedb.ts 파일 생성

파일 키들은 노출되면 안되므로, 환경변수로 보호해줍니다.

Next.js 에서의 환경변수는 프로젝트 root에 .env.local 이름으로 파일을 생성하고,
NEXT_PUBLIC_키이름 = value

로 관리하면 됩니다 😀

 

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app'
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_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_MEASUREMENT_ID,
}

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

2. firestore.ts 생성

import firebasedb from './firebasedb'
import { getFirestore } from 'firebase/firestore'

const fireStore = getFirestore(firebasedb)
export default fireStore

 

---

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

파이어베이스 콘솔에서 FireStore 생성합니다.

리전은.. 전 서울로 했어요. 과금할 것도 아니고. 그냥 (?) ㅎㅎ

 

처음에 FireStore를 셋팅하면, 규칙이 읽기과 쓰기가 모두 금지되어 있을텐데 true로 바꿔줍시다 !

	allow read, write: if false   // -> allow read, write: if true

 

---

연동 !

테스트용으로 firestore에 문서를 추가해놓자.

`getDoc` 함수로 저 문서 데이터를 읽어보자.

import { doc, getDoc } from '@firebase/firestore'
import fireStore from '@/firebase/firestore'

  const onClickUpLoadButton = async () => {
    const query = await getDoc(doc(fireStore, '사용자', 'fDilP6RhwRBQnMosqrCe'))
    console.log(query.data())
  }

 

성공!