💨

Firebase利用時の.env.local記載内容

2022/11/16に公開

Next.jsとFireBaseを利用したアプリを作り始めた。
教材を見ながら作っているのだが、
.env.localファイルの内容をそのままコピペしnpm run devを叩いたらエラーが大量に出た。

そりゃそうでした

Firebaseの管理画面で作った自分のアプリの情報に書き換えないとダメです。
何も考えずにコピペするの怖い。
戒めとして記事作成します。

手順

  1. ルートに.env.localファイルを作成し、下記内容を記載
NEXT_PUBLIC_FIREBASE_API_KEY=apiKey
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=authDomain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=projectId
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=storageBucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=messagingSenderId
NEXT_PUBLIC_FIREBASE_APP_ID=appId
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=measurementId
  1. firebase管理画面 > プロジェクト設定 > 全般 を開く
    1で記載した内容の = の右側の値を、下図と対応させる

Discussion