● すでに作成ずみの Next.js アプリを Firebase Hosting へデプロイする

( SSR は Firebase Functionsへ。)

1. アプリの作成

npx create-next-app@latest --use-npm <アプリ名>

2. firebase コンソールからプロジェクトを作成する

https://console.firebase.google.com/ からプロジェクトを作成します。プロジェクト名はアプリ名と同じとしておくと良いでしょう。

3. package.json を変更する

以下をそれぞれの場所に追記します。

{
  "main": "firebaseFunctions.js",
  "scripts": {
    "serve": "npm run build && firebase emulators:start --only functions,hosting",
    "shell": "npm run build && firebase functions:shell",
    "deploy": "firebase deploy --only functions,hosting",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "firebase-admin": "^9.4.2",
    "firebase-functions": "^3.13.1",
  },
  "devDependencies": {
    "firebase-functions-test": "^0.2.3",
    "firebase-tools": "^9.3.0"
  }
}

その後にパッケージをインストールします

npm install

4. .firebaserc を追加する

vi .firebaserc

{
  "projects": {
    "default": "<アプリ名>"
  }
}

5. firebaseFunctions.js を追加する

vi firebaseFunctions.js

const { https } = require('firebase-functions')
const { default: next } = require('next')

const nextjsDistDir = './.next/';

const nextjsServer = next({
  dev: false,
  conf: {
    distDir: nextjsDistDir,
  },
})
const nextjsHandle = nextjsServer.getRequestHandler()

exports.nextjsFunc = https.onRequest((req, res) => {
  return nextjsServer.prepare().then(() => nextjsHandle(req, res))
})

5. firebase.json を追加する

vi firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextjsFunc"
      }
    ]
  },
  "functions": {
    "source": ".",
    "predeploy": [
      "npm --prefix \"$PROJECT_DIR\" install",
      "npm --prefix \"$PROJECT_DIR\" run build"
    ],
    "runtime": "nodejs16"
  },
  "emulators": {
    "functions": {
      "port": 5001
    },
    "hosting": {
      "port": 5002
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

6. ローカル（エミュレーター）で起動する

npm run serve

http://localhost:5002/

7. firebase console から設定を変更する

・プランを Blaze にアップグレードする
・Firebase Hosting を開始する

8. firebase へ デプロイする

npm run deploy

9. HTTP Error: 403, Project '<プロジェクト名>' not found or permission denied. エラーとなる場合の対処法

Project ID が 正しくない可能性があります。以下のコマンドからプロジェクトIDを確認します。

firebase projects:list

プロジェクトIDが間違っている場合は、次のファイル内のプロジェクトIDを正しいものに書き変えます。 .firebaserc