【Next.js@9.4↑】Next.jsにおける環境変数(.env)の取り扱いについて

はじめに

こんにちは、がんがんです。
最近はNext.jsアプリを作っております。
Next.jsのアプリ実験でFirebaseのAuthenticationを試してみると、後述するようなエラーが起きました。
原因を調べた際に、Next.jsにおける環境変数(.env)についても調査したので備忘録としてまとめておこうと思います。

今回起きたエラーメッセージ

FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

調べてみた感じ、こちらの記事でも書かれているように、
「リダイレクト時に何度も初期化している」っぽいことが分かりました。configをfirebaseConfingにしましたがあまり変化はなかったです。

Next.jsにおける環境変数について

今回の実験では環境変数.envで設定しています。どうやらこれが原因のようでした。

こちらの解決方法としては以下の2つがあるようです。
1. 【Next.js@9.4↑】.envファイルを.env.developmentに変更する
2. 【Next.js@9.4↓】next.config.jsでenvの設定を行う

1. .envファイルを.env.developmentに変更する

Next.js9.4からは環境変数の設定の仕方が新しくなったみたいです。
nextjs.org

今回はnext devで使用する予定です。そのため、ドキュメントを参照する限り.envファイルを.env.developmentに変更するだけで解決するようです。
GitHubのissuesで多くの議論が行われていた部分なので、こんなに簡単になって公式様様です。

自分の忘却のために下記を参考までに置いておきます。

.env.development
FIREBASE_API_KEY=xxx
FIREBASE_AUTH_DOMAIN=xxx.firebaseapp.com
FIREBASE_DATABASE_URL=xxx
FIREBASE_PROJECT_ID=xxx
FIREBASE_STORAGE_BUCKET=xxx
FIREBASE_MESSAGING_SENDER_ID=xxx
FIREBASE_APP_ID=xxx

2. next.config.jsでenvの設定を行う

よくある解決方法であるnext.config.jsに記載するパターンです。Next.js9.4以前のバージョンではこの方法でのみ解決可能のようです。
公式ドキュメントはこちらです。
nextjs.org

今回の場合は下記のような実装で問題なく動くことが出来ました。

//  next.config.js
module.exports = {
  env: {
    FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
    FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
    FIREBASE_DATABASE_URL: process.env.FIREBASE_DATABASE_URL,
    FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
    FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
    FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
    FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
  },
}

そもそも論ですが、、、

そもそも論ですが、何度も初期化が行われるのであれば、それを防ぐようにすればいいだけではあります。。。

//  initFIrebase.js

//
if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

おわりに

今回はNext.jsにおける環境変数についての調査を行いました。Next.js@9.5もつい最近アプデされたばっかりなので、新機能を追っていきたい限りです。