[Next.js] Next.js + 파이어베이스(FireBase) + React 활용한 CRUD 완벽 정리 (Next.js와 FireBase 연동하는 방법) 1탄

 

 

Next.j에서 FireBase를 연동하고 사용하는 방법을 아주 친절하게 설명해보겠다.

 

 

---

 

 

*참고) 필자의 개발 환경
- 프레임 워크: Next.js (15.0.3)
- 라이브러리: React (18.3.1)
- 언어: TypeScript
- 파이어베이스 ver. 11.0.2

 

 

 1. 파이어베이스 웹사이트에 들어간다. 

https://firebase.google.com/?hl=ko

Firebase | Google's Mobile and Web App Development Platform

 

 

 

 2. 하단에 "시작하기"를 누른다. 

(회원가입이나 로그인은 된 상태라고 가정한다.)

 

 

 

 

 3. "+ 프로젝트 만들기"를 누른다. 

 

 

 

 

 

 4.  프로젝트 이름을 입력한다. 

 

 

 

 

 5. 애널리틱스 원하는 사람은 설정하고, 계속하고 "프로젝트 만들기" 버튼을 누른다. 

 

 

 

 

 6. 로딩중이면 프로젝트가 생성될 때까지 기다리면 "계속" 버튼이 뜬다. 

 

 

 

 7.  생성이 끝나면, 생성된 프로젝트로 이동하게 되는데, 여기서 (필자는 웹사이트를 만들고있기에) "WEB" 버튼을 클릭한다. (화살표 참고) 

 

 

 

 

 8. "앱 닉네임"을 입력한다 

 

 

 

 

 9. Firebase SDK를 추가하라고 뜨는데, 필자는 npm을 사용할 것이다. 

 

아래 코드들은 이따 프로젝트 설정에서도 확인할 수 있기때문에 일단 넘어가고 "콘솔로 이동 버튼"을 누른다.

 

 

 

 10. 완료되면 아래와 같은 페이지로 이동된다. 

 

 

 

 

 11. 여기서 왼쪽 맨위에 "프로젝트 개요" 오른쪽에 톱니바퀴 설정을 클릭한다. 

 

 

 

 

 12. 여기서 아래로 스크롤을 내리면 아까 본 SDK 설정 및 구성이 뜬다. 

 

 

 

 

 13. 이제 설정을 마쳤으니까 코드창으로 넘어가서, 터미널에 "npm install firebase"을 입력한다. 

 

npm install firebase

 

 

 

 14. 설치가 완료되면, package-lock.json과 package.json 폴더가 생성된다. 

 

 

 

 

 15. 프로젝트 최상단에 "firebase" 폴더를 생성하고, 그 안에 파일 2개를 만든다. (파일 이름은 자유!) 

 

 

 

 

 16. 그리고 프로젝트의 루트 디렉토리에 ".env.local" 파일도 만든다. 

 

 

 

 

 17. firestore.ts에 아래와 같이 코드를 작성한다. 

 

// firebase/firestore.ts

import firebasedb from "./firebasedb";
import { getFirestore } from "firebase/firestore";

const fireStore = getFirestore(firebasedb)
export default fireStore;

 

 

 

 18. firebasedb.ts에 아까 설정 창에서 본 "SDK"를  복붙 한다. 

 

 

 

 

 19. 여기서 키들은 노출되면 안되므로, 환경변수로 보호해야한다. 

 아까 만든 .env.local 안에 Firebase 설정 값을 넣어야한다. *참고: 따옴표 없이 (문자열x) 적기!

 

 

 

 

 20. 이제 firebasedb.ts에서 환경변수를 사용하면 된다. 

 

 

 

 

 20. .env.local 파일에 민감한 정보를 저장할 경우, 해당 파일을 Git에 포함시키지 않도록 .gitignore 파일에 추가해야 한다. 

 

gitignore 파일에 다음을 추가한다.

.env.local

 

 

 

 21. 이제 모든 준비는 끝났다. 데이터를 불러오고 싶은 곳에 데이터를 불러와보자! 

 

2탄 보러가기

https://dev-ini.tistory.com/279