Next.js14 と SSG と Firebase

Next.js 14 で静的サイトを作成し、Firebase にデプロイするまで

下準備

• Firebase でプロジェクトを追加（プロジェクト名決める）
• firebase login コマンドでログイン
• npx create-next-app@latest コマンドで Next.js のプロジェクトを作成
• （GitHub 連携）
  …or push an existing repository from the command line 以下のコマンドを入力

Next.js の設定

next.config.js の場合↓

next.config.js

 module.exports = {
   /* 下記を追加 */
   "output": 'export',
 };

next.config.mjs の場合↓

next.config.mjs

 const nextConfig = {
   /* 下記を追加 */
   "output": 'export',
 }

• npm run build コマンドを実行→ outディレクトリが追加される
• package-lock.json がない場合→ npm install コマンドを実行

Firebase を連携する

firebase init コマンドで設定
※ここではspaceキーで選択（複数選択可）してからenterキーを押す

• Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys を選択
• Use an existing project を選択
• What do you want to use as your public directory では、"out" と入力
  （追加されたoutディレクトリのこと）

...他いくつか好きなように選択

• Firebase のサイトで「アプリを追加」をクリック
  　↓
  「ウェブ」を選択
  　↓
  「このアプリのFirebase Hostingも設定します」にチェック
  　↓
  「アプリを登録」をクリック
  　↓
  Firebese の指示に沿って SDK等追加

完成！

ここまで来たらappディレクトリを編集して自分の好きなようにする。

今回初めてFirebaseを触ってみたけど、デプロイ以外にもいろいろ機能があって便利そう。チラチラ見てみます。