Zenn
🧰

Next.js + Firebase 環境のテンプレート

2023/01/18に公開
Firebase
Next.js
個人開発
競技プログラミング
DX
tech

内容

この記事では、Next.jsとFirebaseを使ったアプリケーションを作る際のセットアップ方法を記載してます。
本来、WEB画面からプロジェクト作成、API Keyの取得、アプリの登録等を行うのが一般ですが、
私の場合はFirebase CLIを使ってターミナルから全て設定しています。

使うもの

  • Firebase CLI
  • Firebase SDK
  • Next.js

まずは,グローバルにFirebase CLIをインストール

ターミナル
npm install -g firebase-tools

インストールが完了すると、firebaseコマンドが使用可能になります。

プロジェクト作成のためにFirebaseにログインする

ターミナル
firebase login

※ログイン用のWEBページが開きます

firebase projects:list

こちらでログインしたアカウントのプロジェクトが確認できます。

自分のアプリケーションでFirebaseを使えるようにする

ここからは、自分のアプリケーションにFirebaseを入れていきます。

npx create-next-app アプリケーション名 --typescript
cd アプリケーション名
firebase init

上記を実行すると、各種設定を求められます。
※後でいつでもfirebase initコマンドで更新可能です。

① 使用するFirebase機能

  • Firestore
  • Realtime Datebase
  • Storage
  • そのほか

② 使用するプロジェクトの選択

  • 既存プロジェクトを使用
  • 新規プロジェクト作成
  • その他

③ Firestoreのルールを設定するファイル名(①でFirestoreを選択した場合)

  • デフォルトはfirestore.rules

④ Firestoreで複合クエリを実行するための設定ファイル?

  • デフォルトはfirestore.indexes.json

④ Storageのルールを設定するファイル名(①でStorageを選択した場合)

  • デフォルトはstorage.rules

Firebase initialization complete!
と言われたら設定完了です。
これで、自分のアプリケーションでFirebaseを使用できるようになりました。

Firebase SDKのインストール

npm install firebase

Firebase SDKの初期化

firebase apps:sdkconfig

こちらでSDKを初期するためのConfigデータがダウンロードできます。

firebase.initializeApp({
  "projectId": "プロジェクト名",
  "appId": "**＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊",
  "storageBucket": "プロジェクト名.appspot.com",
  "locationId": "asia-northeast1",
  "apiKey": "**＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊",
  "authDomain": "プロジェクト名.firebaseapp.com",
  "messagingSenderId": "**＊＊＊＊＊＊＊＊＊",
  "measurementId": "**＊＊＊＊＊＊＊＊＊＊＊"
});

単なるテキストで出力されるので、コピペしてください。

Discussion