Next.js - Firebase tutorial

Create Firebase Project

1. login to firebase console website

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

2. create firebase project

2-1) 프로젝트 추가 버튼 클릭

2-2) 프로젝트 이름 입력

2-3) Google 애널리틱스

나라 설정 및 약관 동의 후 프로젝트 만들기 클릭

2-4) 프로젝트 생성

3. firebase project created

Add Next.js project to Firebase Project

1. register web app

1-1) click (web button)

1-2) 웹앱 프로젝트 이름 입력

1-3) 콘솔로 이동

• 모듈 sdk를 이용할 것이기 때문에 네모칸 안의 firebaseConfig 부분만 따로 복사해두면 된다

2. webapp registered

Start Firebase Authentication

1. init authentication

• api key를 발급하기 위해 authentication을 시작한다

• 프로젝트 설정에 들어가면 웹 api 키를 확인할 수 있다

Start Firebase Hosting

1. init firebase hosting

1-1) hosting 시작

1-2) firebase hosting 설정

1-3) firebase-tools 다운로드

npm install -g firebase-tools

1-4) 프로젝트 초기화

• move to your project directory

cd {project_directory}

1-5) firebase login

• to login

firebase login

• to logout

firebase logout

1-6) firebase init

firebase init

• 화살표로 Hosting으로 이동해서 spacebar로 선택하고 enter를 누른다

• 파이어베이스 프로젝트를 이미 생성했으므로 "Use an existing project"를 선택한다. 새로 생성하기를 원하는 경우에는 "Create a new project"를 선택하면 된다

• 이 호스팅에 사용할 파이어베이스 프로젝트를 선택한다

• 퍼블릭으로 사용할 폴더 이름을 지정한다

• 페이지가 하나인 앱인지 여러개인 앱인지 설정한다 (y/N)

• 깃과 자동으로 연동할 것인지 설정한다 (y/N)

1-7) firebase sdk 추가

• next js 프로젝트 이름을 입력한다

• sdk 추가의 경우 모듈형 sdk를 설치할 것이므로 넘어가면 된다

1-8) 배포 시에 해당 명령어를 사용하면 된다

firebase deploy

• 배포된 프로젝트는 네모 칸 안의 링크를 통해 확인할 수 있다

• 아무런 작업 없이 배포하면 해당 화면을 확인할 수 있다

2. firebase hosting setting done

Create Firebase Realtime Database

1. create realtime database

1-1) realtime database 시작

1-2) 보안 규칙

• 상세설명

2. realtime database created

3. set security rules

• 잠금 모드로 시작시 read, write가 모두 금지되어 있으므로 권한을 수정해줘야 한다

참고링크: https://css-tricks.com/intro-firebase-react/

Add Realtime Database to Next.js Project

1. init realtime database

1-1) realtime database setup

• 화살표로 Realtime Database로 이동해서 spacebar로 선택하고 enter를 누른다

• 데이터베이스 보안 규칙을 저장할 파일 이름 설정

1-2) firebase sdk 설치

npm install --save firebase

2. firebase usage

• firebase 모듈을 import 해서 사용합니다

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";

• 다음 config 코드를 작성해 앱에서 firebase를 초기화합니다 (config 내용을 까먹었으면 여기를 참고하세요)

  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

• firebase database 사용

// Get a reference to the database service
var database = firebase.database();

// Read
async function read(collection) {
    let result = null;
    await firebase.database().ref().child(collection).get().then((snapshot) => {
        if (snapshot.exists()) result = snapshot.val();
        else console.log("No data available");
    }).catch(error => console.error(error));

    return result;
}

// Write
function write(collection, data) {
  firebase.database().ref(collection).set(data);
}

example code

write("sample/", {
  test: true
});

read("sample/");

참고링크: https://firebase.google.com/docs/database/web/read-and-write?hl=ko

참고자료: https://blog.jarrodwatts.com/the-ultimate-guide-to-firebase-with-nextjs

Create Firebase Storage

1. create cloud storage

1-1) cloud storage 시작

1-2) cloud storage setting

• storage 지역을 설정한다 (지역은 서비스 지역과 가까울수록 좋다)

2. cloud storage created