Zenn
😃

Firebase と Next.js の統合手順

2024/11/12に公開
Firebase
Next.js
React
Vercel
tech

Firebase Hosting を利用して Next.js アプリケーションをデプロイし、Firebase CLIのフレームワークアウェアネス 機能を活用して SSR（サーバーサイドレンダリング） や ISR（インクリメンタルスタティックリジェネレーション） を実現します。

以下に、詳細な手順を提供します。このガイドでは、Firebase Hosting と Cloud Functions を連携させて Next.js アプリケーションをデプロイする方法を説明します。

前提条件

  1. Node.js がインストールされていること（推奨バージョン: 14.x 以上）
  2. Firebase CLI がインストールされていること
  3. Google Cloud Platform（GCP） プロジェクトが設定されていること

ステップ 0: Firebaseプロジェクトの作成

1. Firebaseプロジェクトのセットアップ

  1. Firebaseコンソールにアクセス:
    • Firebaseコンソールにアクセスして、新しいプロジェクトを作成します。
    • プロジェクト名を入力し、その他の設定（Googleアナリティクスの設定など）を完了します。
  2. **Blazeプランにアップグレード
    支払方法の設定を行います。念の為予算額の上限を設定しておくと安心です。

ステップ 1: Firebase CLI のインストール

まだインストールしていない場合は、Firebase CLI をグローバルにインストールします。

npm install -g firebase-tools

ステップ 2: Firebase にログイン

Firebase CLI を使用して Firebase にログインします。

firebase login

ブラウザが開き、Google アカウントでログインするように求められます。

ステップ 3: Next.js プロジェクトの作成

Next.js プロジェクトをまだ作成していない場合は、以下のコマンドで新規作成します。

 npx create-next-app@latest my-next-firebase-app
	cd my-next-firebase-app

既にプロジェクトは存在している場合は、飛ばしても構いません。

ステップ 4: Firebase プロジェクトの初期化

プロジェクトのルートディレクトリで Firebase プロジェクトを初期化します。

firebase init

初期化プロセスの選択

  1. 選択する機能の選択:

    • Hosting を選択します。
    • Functions も選択します（SSR を実現するために必要）。
    • スペースキーを押して選択し、Enter キーで進めます。
      この２つが必要になります。

  2. プロジェクトの選択:

    • 既存の Firebase プロジェクトを選択するか、新しく作成します。
  1. Functions の設定:
    • JavaScript または TypeScript を選択します（ここでは JavaScript を例にします）。
    • ESLint の設定や依存関係のインストールはプロジェクトに応じて選択してください。

ステップ 5: 必要なパッケージのインストール

Next.js と Firebase フレームワークアウェアネスのために必要なパッケージをインストールします。

npm install --save-dev firebase-tools firebase-frameworks

ステップ 6: フレームワークアウェアネスの有効化

Firebase CLI のフレームワークアウェアネス機能を有効にします。

firebase experiments:enable webframeworks

これにより、フレームワークアウェアネスのプレビュー機能が有効化されます。

ステップ 7: next.config.js の設定

プロジェクトのルートに next.config.js を作成または編集し、Firebase フレームワークアウェアネスがフレームワークを検知できるようにします。

 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
 }
 
 module.exports = nextConfig

ステップ 8: Firebase Frameworks のビルド

Firebase Frameworks を使用してプロジェクトをビルドします。以下のコマンドを実行すると、firebase-frameworks がプロジェクト構造を解析し、必要な設定を行います。

	npx firebase emulators:exec "exit 0"

このコマンドはビルドフックを実行し、.firebase/ ディレクトリにビルド成果物を出力します。

ステップ 9: ローカルでの動作確認

ローカル環境でアプリケーションを起動し、正しく動作することを確認します。

	npx firebase serve

出力例：

i  hosting[my-next-firebase-app]: Serving hosting files from: .firebase/my-next-firebase-app/hosting
✔  hosting[my-next-firebase-app]: Local server: http://localhost:5000
✔  functions: Loaded functions definitions from source: functions.
✔  functions[us-central1-mynextfirebaseapp]: http function initialized (http://localhost:5001/myproject/us-central1/mynextfirebaseapp).

ブラウザで http://localhost:5000 にアクセスして、アプリケーションが正しく表示されることを確認します。

ステップ 10: デプロイ

ローカルでの動作確認が完了したら、Firebase にデプロイします。

	npx firebase deploy

デプロイが成功すると、ホスティング URL が表示されます。

ビルドのキャッシュを消す

rm -rf .next

参考
https://zenn.dev/nerikosans/articles/b44a96b5141291

Discussion