こんにちは。
今回は、
Next.js 13で.envファイルを記述したら、
なかなか上手くいかなかったので、備忘録として残します。
状況と問題点：
Next.js を使っています。(これが解決キーでした。)
.envファイルには、
REACT_APP_FIREBASE_API_KEY=xxxxxxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxxxxxx
REACT_APP_FIREBASE_DATABASE_URL=xxxxxxx
REACT_APP_FIREBASE_PROJECT_ID=xxxxxxx
REACT_APP_FIREBASE_STORAGE_BUCKET=xxxxxxx
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=xxxxxxx
REACT_APP_FIREBASE_APP_ID=xxxxxxx
のように書いたが、
apiKey: xxxxxx,と書いたらうまく行くにも関わらず、
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,と書くとうまく行かない。
解決策：
Next.js のプロジェクト中のプレフィックスは、
“REACT_APP_”ではなく”NEXT_PUBLIC_”なので、
NEXT_PUBLIC_FIREBASE_API_KEY=xxxxxxx
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxxxxxx
NEXT_PUBLIC_FIREBASE_DATABASE_URL=xxxxxxx
NEXT_PUBLIC_FIREBASE_PROJECT_ID=xxxxxxx
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=xxxxxxx
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=xxxxxxx
NEXT_PUBLIC_FIREBASE_APP_ID=xxxxxxxのように書き直す。
まとめ：
reactのフレームワークなのに、
ちがうんかーい。
コメント