FirebaseのAPI Keyはどこ?(Next.js)

Firebaseの覚書です。Next.jsで使っています。

FirebaseのAPI Keyはどこ?(Next.js)

しばらく使っていなかったのでうる覚えですけど、仕様が変わったのですかね。少し迷いました。

プロジェクト概要の歯車アイコン をクリックすると、次のようになっています。

ウェブ API キー このプロジェクトにはウェブ API キーがありません

プロジェクトにはアプリがありません 開始するにはプラットフォームを選択してください

firebaseの管理画面

ios,andeoid,</>(Webアプリのアイコン),unity,Flutterのアイコンが並んでいます。

next.jsなので、</>を選びます。

• アプリ名
• Firebase Hosting も設定します。のチェックボックス

今回、GCPのCloud Runを利用する予定で、ホスティング先はFirebaseではないためチェックをいれませんでした。Firebaseにホスティングする人はチェックをいれましょう。

[アプリの登録]のボタンをおすと、 APIに表示されます。

const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx.firebaseapp.com",
  projectId: "xxx",
  storageBucket: "xxx.appspot.com",
  messagingSenderId: "(省略)",
  appId: "(省略)",
  measurementId: "G-(省略)"
};

measurementIdはGoogle Analysticの設定のようです。

[コンソールに進む]をおせば完了です。