Next.jsをSSRやAPI Routeに対応させてFirebaseにデプロイする

レッドインパルスのたかけんです。
REDIMPULZ Advent Calendar 2020 の9日目のエントリーです。

TypeScript導入済のNext.jsのテンプレート

以前の記事でTypeScript導入済のNext.jsのテンプレートを紹介しました。
今回は、こちらのテンプレートで作ったアプリをFirebaseにデプロイする方法を紹介します。

Firebaseの設定を導入済のテンプレートも作成したので、Firebaseにデプロイ前提の場合は、こちらからプロジェクトを作成してください。
https://github.com/redimpulz/nextjs-typescript-starter-with-firebase

Next.jsのFirebaseのデプロイについて

上記の記事で詳しく解説されていますが、 SSRやAPI Routeなどのサーバーサイドの処理 を行うプロジェクトの場合は、

• Firebase Hosting : 静的コンテンツの配信
• Cloud Functions : サーバーサイドでの処理

の2つのサービスを使うことで、サーバーレスでデプロイすることができます。

nextjs-typescript-starter-with-firebase

nextjs-typescript-starter をベースに、Firebaseにデプロイする設定を追加したテンプレートです。

使い方

yarn deploy

npm scriptにdeployコマンドを記載しているので、npm run deploy でデプロイできるようになっています。

説明

.firebaserc

{
  "projects": {
    "default": "<project-name-here>"
  }
}

• プロジェクト名は自分のものに書き換えてください

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextApp"
      }
    ]
  },
  "functions": {
    "source": ".",
    "predeploy": [
      "npm install",
      "npm run build"
    ],
    "runtime": "nodejs10"
  }
}

• Firebase Hostingには、publicディレクトリの内容を反映させます
• Firebase HostingのリクエストをCloud Funtionsに渡すようにしています
• Next.jsはNode.jsのバージョンが10.13以降に対応なので、 runtime":"nodejs10" を指定します

functions/index.js

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

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, conf: { distDir: '.next' } });
const handle = app.getRequestHandler();

exports.nextApp = https.onRequest((req, res) => {
  console.log('File: ' + req.originalUrl);
  return app.prepare().then(() => handle(req, res));
});

• Cloud Funtionsのエントリーポイントとなるファンクションで、リクエストをNext.jsアプリに渡すようにしています

その他、注意点

Cloud FunctionsでNode.jsのバージョンが10以降を使うには従量課金のBlazeプランである必要があります

まとめ

Next.jsをSSR・API Routeに対応させて、Firebaseにデプロイする方法を紹介しました。
Next.jsの場合、Vercelにデプロイさせるのが一番手軽かと思いますが、Firebaseにデプロイさせたい人もいると思うので、良かった参考にしてみてください！