Next.jsでfirebaseのinitializeAppを実行する方法

必要なモジュールをインストールする

firebaseとdotenvをインストールします。
dotenv関連の設定方法はこちら

npm i firebase dotenv-webpack

.envファイルを作成し、firebaseの認証情報を入力

以下のような感じになります。

.env

  FIREBASE_API_KEY=************************************
  FIREBASE_AUTH_DOMAIN=**********************
  FIREBASE_DATABASE_URL=*********************************
  FIREBASE_PROJECT_ID=*****************
  FIREBASE_STORAGE_BUCKET=*************************
  FIREBASE_MESSAGEING_SENDER_ID=***********
  FIREBASE_APP_ID=***********************************************

initializeApp実行処理を書く

libフォルダを作成し、その中にfirebaseInit.js（処理用ファイル）を作成すれば良いと思います。

firebaseInit.js

import firebase from "firebase";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGEING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}

export default firebase;

使いたいファイルでインポートする

あとは、firebaseInit.jsをインポートしてくるだけです。
これでfirestoreなどの機能が使えます。

index.js

import firebase from "../lib/firebaseInit";

firebase
  .firestore()
  .collection("hogehoge")
  .get();

export default () => (
  <div>
    <div>Hello World</div>
  </div>
);