NextJS에 Firebase 연동하기

정길웅·2023년 9월 19일

Firebase란?

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

파이어베이스는 클라우드기반의 데이터베이스(cloud firestore), 인증(Auth), 대규모로 확장 가능한 파일 스토리지(cloud storage) 등 다양한 서비스를 제공한다. 백엔드 지식이 부족한 나에게 있어서 파이어베이스는 최적의 환경을 가져다 주는 셈이다.

1. 설치

npm install firebase

2. 프로젝트 추가하기

파이어베이스 메인홈페이지에 들어가고 로그인을 마친 후 시작하기를 누르면 프로젝트를 추가할 수 있다.
이후, 앱 이름을 등록하면 파이어베이스 SDK가 나오는데 이 값을 복사해야한다.

3. Next.js에 firebase파일 만들기

이제 복사한 SDK 코드를 firebasedb.ts 파일을 만들어 저장해보자. 나의 경우 app폴더 안에 firebase라는 폴더를 생성하고 그 안에 firebasedb.ts 파일을 만들어 저장했다.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// 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: "비밀키1",
authDomain: "비밀키2",
projectId: "비밀키3",
storageBucket: "비밀키4",
messagingSenderId: "비밀키5",
appId: "비밀키6",
measurementId: "비밀키7"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

하지만 이 키를 그대로 깃헙에 올릴 경우 api키가 그대로 노출되어 위험할 수 있다. 그러므로 .env 파일을 작성하여 api키를 보호하였다.

4. .env파일 만들기

.env란?

.env는 환경변수를 저장하는 파일로 process.env로 로드하는 의존성 모듈이다. 이것을 사용하는 이유는 개발과정에서 사용하는 고유한 api key값 등 민감한 정보의 보안을 위해서이다. 참고로 react환경에서는 REACT_APP_을 붙여야 하고 next환경에서는 NEXT_PUBLIC_을 붙여야 인식이 가능하다고 한다.
(이때 , 를 찍어서는 안된다.... 자꾸 오류 나서 이틀동안 고생했는데ㅜㅜ)

.env 세팅하기

이런식으로 .env 파일에 값을 넣어놨다면 이제 firebasedb.ts 파일에 적용시킬 차례다.

5. Firestore 연결하기

Firebase 콘솔 페이지에서 Cloud Firestore에 접속한다.

이후 규칙이 생성되는데 이 규칙을 allow read, write: if false; 에서 allow read, write: if true;로 변경해준다.

6. Firestore 연결되었는지 확인해보기

연결을 확인하는 차원으로 Firebase에 있는 예제를 그대로 옮겨왔다

'use client'

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

export default function Home() {

  const onClickUpLoadButton = async () => {
    await addDoc(collection(firestore, "users"),
      {
        first: "Ada",
        last: "Lovelace",
        born: 1815
      })
  }

  return (
    <div>
      <button onClick={onClickUpLoadButton}>Ada Lovelace 등록</button>
    </div>
  )
}