Zenn
🎃

Next.jsをFirebase(Functions+Hosting)へデプロイする2022秋

2022/10/13に公開
Firebase
Google Cloud
Next.js
TypeScript
Cloud Functions
tech

これは出来る100%TypeScript 作って学ぶNext.js + GraphQL + Prisma改訂のための下書きです

firebase-tools(Firebase CLI)の10.9.1以降にfirebase-framework-toolsを利用してNext.jsを検出して自動でよろしくやってくれる機能が追加されたのでそれを利用する手順。今回は新規プロジェクトで利用しているので既存プロジェクトでやる場合はまた変わってくるかもしれない。

npx firebase experiments:enable webframeworks

実験的機能という位置付けみたいで、まず最初に機能を有効化する必要がある。

npx firebase init hosting

initした時点でNextが検出されている。続けてデプロイする。

npx firebase deploy

手元で試したNext.jsアプリは

  • pages/[bigCategoryName]
  • pages/[bigCategoryName]/[smallCategoryName]

というルートを持っていたがどちらも検出されているようだ。またgetServerSideProps(SSR)の利用も検出されてよしなにバンドルされてよしなにされてそう。

functions側にはssrhogehogeという名前で関数が作成される。またfunctions versionはv2となるので先日発表された起動時cpuブーストも有効になっていそう。

ただしこのままだとFirebase Hosting経由でfunctionsのSSRエントリーポイントにアクセスできなかったので

firebase.json
{
  "hosting": {
    "source": ".",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "functionsのエンドポイント名"
      }
    ]
  }
}

手動でrewrites設定を追加した。

.gitignore
out/_next

Discussion