NextJS에서 Firebase 사용하기

NextJS 프로젝트를 하면서 기존 React에서 하던 방식 대로 사용해도 괜찮지만 NextJS는 React와 다르게 동작하기 때문에 앱을 초기화하는 기존 코드를 약간 커스텀해서 작성해줘야 한다. 

앱 초기화 단계

기존 리액트에서 사용하는 코드는 아래와 같다. 

만약 리액트 혹은 순수 자바스크립트로 이루어진 프로젝트에서 firebase를 사용한다면 아래와 같이 작성해도 무관하다. 

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

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


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

 

 

하지만 NextJS로 firebase를 사용하고자 한다면 위처럼 작성하는 것은 권장되지 않는다. 

그 이유에 대해서는 좀더 공부를 하고 난 후에 이 글을 수정하고자 한다. 

 

그래서 위의 코드를 아래처럼 바꿔서 작성하는 것이 NextJS에서 권장되는 방법이다. 

import { initializeApp,getApp,getApps } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = getApps().length ? getApp():initializeApp(firebaseConfig);

// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

getApps(),getApp()은 firebase 공식문서에 검색하면 정확하게 나오기 때문에 이 글에서는 이 코드가 어떻게 동작하는지 설명하고자 한다.

동작 원리

getApps는 이미 firebase가 초기화가 된 후 사용중이라면 getApps에 사용중인 앱들이 들어가있다.

getApp은 firebase와 연결이 된 인스턴스를 반환하는 함수이다.

 

그래서 이를 활용하여 firebase로 구동한 앱이 없다면 아직 초기화가되지 않은 상태기 때문에 배열에 길이는 0이 된다.

그럼 이때는 initializeApp을 통해 초기화를 진행을 하고,

배열속의 길이가 0이 아니라면 이미 초기화가 되어져 있기 때문에 getApp을 사용하여 firebase와 연결이 된 인스턴스의 정보를 그대로 불러오기만 하면 된다.