Firebase hostingとfunctionsでNext.jsとangularを動かす

setup

npx create-nx-workspace
# next.js app setting

npm install -D @nrwl/angular
npx nx g @nrwl/angular:application angular-app

npm install firebase firebase-admin firebase-functions
npm install -D firebase-tools

# login等しておく
npx firebase init
# hosting and functions stting

firebase hosting の設定

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "nextjsFunc"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$PROJECT_DIR\" install",
      "npm --prefix \"$PROJECT_DIR\" run build",
      "rm -rf functions/app",
      "cp -r dist/apps/next-app/ functions/app",
      "rm -rf public/ng",
      "cp -r dist/apps/angular-app public/ng"
    ],
    "runtime": "nodejs14"
  }
}

firebase functions の設定

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

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

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

file tree

src
...
├── public
│   ├── ng
│   └── ...
├── functions
│   ├── .next
│   └── index.js
...

終わりに

こんな感じ で動いてる。