【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もつい最近アプデされたばっかりなので、新機能を追っていきたい限りです。