next.js + firebase연동하기

백엔드 서버와 호스팅을 간편하고 빠르게 하기 위해서 firebase를 선택하였다. 

전에 혼자 만들 때 firebase를 잠깐 사용한 적은 있지만

next js 에 연결하는 건 또 처음이고... 두고두고 유용할 것 같아서 포스팅한다.

1. firebase 등록하기

🫤 이 부분에서 살짝 애를 먹었다. 

구글링해서 보면 그냥 바로 storage를 누르면 db 만들 수 있다고 되어있는데 개편이 된건지..??

firestore database가 있고 realtime database가 있었다. 

 

다른 사람들이 하는 것처럼 따라하기 위해서는 그냥 firestore database 를 선택하면 된다. 

그리고 기존과 똑같은 방식으로 collection 을 눌러주면 된다. 

위의 add database 를 누르면 이런게 뜬다. 이것 때문에 자꾸 애를 먹었다. 그냥 무시하도록 하자.

2. 로컬에 설치하기

npm install firebase

 

3. firebase.ts, firestore.ts

project -> project settings 에 들어가면 config 정보가 나와있다. 

이 모든 정보들을 firebase.ts 파일에 옮겨둔다. 

매우 중요한 정보이기 때문에 이걸 firestore 에 복붙하되 중요한 정보들만 env 파일로 빼두어야 한다. 

 

//firebase.ts
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

const firebase = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebase);
const firestore = getFirestore(firebase);

export default firebase;
export { analytics, firestore };

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

const fireStore = getFirestore(firebase);
export default fireStore

5. .env 파일로 빼두기

그리고 지저분한 저 모자이크들은 env 파일로 빼둘 귀중한 정보이다. 

.env.local 파일을 만들어서 나만 볼 수 있도록 하자

 

 

6. firestore 에 연결 되었는지 확인하기

(1) firestore 데이터 가져오기 -getDoc

getDoc 를 활용해서 데이터 불러올 수 있다. 

import { doc, getDoc } from 'firebase/firestore';
 
const readDoc = await getDoc(doc(db, 'test', '9BoMipzbqzBFehGn8ND5'));
const readaData = readDoc.data();
 
console.log(readData);

 

-> firebase 있는 그대로 콘솔에서 출력이 가능함

 

 

(2) firestore db에  데이터 넣기- addDoc

addDoc 활용해서 데이터 넣어버리기

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

export default function Home() {

  const [value, setValue] = useState();

  const onClickUpLoadButton = async () => {
   	//    addDoc(collection(db       , "컬렉션이름") , { 추가할 데이터 }
    await addDoc(collection(firestore, `temp`),
      {
        value,
      })
  }

  return (
    <div>
      <form onSubmit={(event) => event.preventDefault()}>
        <input onChange={(event) => setValue(event.target.value)} />
        <button onClick={onClickUpLoadButton}>전송</button>
      </form>
    </div>
  )
}

 

잘 작동되는 걸 확인할 수 있음