LoginSignup
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-09

レッドインパルスのたかけんです。
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にデプロイさせたい人もいると思うので、良かった参考にしてみてください!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0