[React] 초간단 Next.js에 firebase 연결하기

Next.js로 작게 프로젝트를 만드는 중이다. firebase를 활용해보고 싶어서 이 참에 Next.js + firebase로 기술 스택을 정했다.

 

nextjs에 firebase 연결하기

https://firebase.google.com/docs/web/setup 여기를 참조하면 설명이 자세하게 나와있다.

 

1. firebase 프로젝트와 Next.js 프로젝트를 생성하자

 

* Next.js 프로젝트 생성

npx create-next-app nextjs-blog

 

* firebase 생성

아래 링크에서 프로젝트 추가를 클릭하고 프로젝트명을 입력한다.

구글 애널리틱스를 설정하는 것은 선택 여부

 

https://console.firebase.google.com/u/0/

로그인 - Google 계정

 

2. 생성한 프로젝트 내에서 플랫폼 선택 (웹)

 

3.앱 닉네임 입력

 

4. Next.js 프로젝트에서 firebase 설치

npm install --save firebase

 

5. Next.js > _app.js 에 firebase SDK 코드 추가

 

앱 닉네임을 입력하고 나면 Firebase SDK가 나온다. 거기에 표시된 config를 복사한다.

 

import firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/auth';
import 'firebase/firestore';

function MyApp({ Component, pageProps }) {

  // firebase sdk의 firebaseConfig 붙여넣기
  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ":",
    measurementId: "K"
  };
  
  
  if (!firebase.apps.length) { // 에러 방지
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  }
  
  
  return <>
   ...
  </>
}

export default MyApp

 

 

22.07.26 수정.

위의 코드에서 에러가 발생하여 아래 코드와 같이 수정.

그리고 config 속성들은 고유 key값이 있으므로 .env 파일에 넣어 관리한다.

 

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAnalytics } from 'firebase/analytics';

function MyApp({ Component, pageProps }) {

  console.log(Component, pageProps)

  const firebaseConfig = JSON.parse(
    process?.env?.FIREBASE_CONFIG ?? '{}',
  );

  let analytics; let firestore;
  if (firebaseConfig?.projectId) {
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

    if (app.name && typeof window !== 'undefined') {
      analytics = getAnalytics(app);
    }

    firestore = getFirestore();
  }

  return <>
    ...
  </>
}

export default MyApp

 

이렇게 하면 끝!