Next.jsとFirebaseの連携方法

ツイート
2021年07月12日
2021年07月13日

プロジェクトの作成

.envの設定

.env.local
NEXT_PUBLIC_FIREBASE_API_KEY= NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN= NEXT_PUBLIC_FIREBASE_DATABASE_URL= NEXT_PUBLIC_FIREBASE_PROJECT_ID= NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET= NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID= NEXT_PUBLIC_FIREBASE_APP_ID= NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=

起動時のログ

log
... app_1 | info - Loaded env from /usr/src/app/.env.local ...

NOTE: FIREBASE_API_KEYでは読み込んでくれないので注意。下記のエラーが発生した。

error.log
"auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly."

データベースの作成

ClouFireStoreから作成します。

asia-northeast1を選択します。

データベースの設定値は、[databaseName].[region].firebasedatabase.appとなります。

JavaScript でのインストールと設定

コンテクスト - React

  • props を通したトップダウン(親から子)で渡すケースが面倒なケースで使用する。(ex) ログイン状態、テーマ etc)

コンポジション vs 継承 - React