概要

皆さんこんにちは。

Next.jsのプロジェクトをFirebaseのFunctionsとHostingへデプロイしてSSR(サーバーサイドレンダリング)を実現したいと思います。

【前提】
・Firebaseのプロジェクトは用意されている。
・npmコマンドを使えるようにインストールしておく。

環境

・macOS Catalina
・Next: 9.3.4
・Firebase: 8.2.0

参考

Next公式Github
https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting
(ここのREADME.md通りに進めればできます。)

方法

①Nextプロジェクトの初期化(準備)

ローカル環境において、プロジェクトを置きたいディレクトリで下記のコマンドを実行。
[作成されるディレクトリ名]には好きな名前を入れてください。

npm init next-app --example with-firebase-hosting [作成されるディレクトリ名]
# or
yarn create next-app --example with-firebase-hosting [作成されるディレクトリ名]

②Firebaseプロジェクトの設定

作成されたディレクトリに「.firebaserc」ファイルがあるのでそれを開き、デプロイするFirebaseのプロジェクト名を記述しましょう。

{
  "projects": {
    "default": "juno-project"
  }
}

③各種パッケージのインストール

ターミナルで、プロジェクトルートへ移動(cd)して下記のコマンドでパッケージをインストールしましょう。
(package.jsonに記載されたパッケージがインストールされます。)

npm install
# or
yarn

これでプロジェクト自体の導入は完了です。

④作成されたNextプロジェクトをローカルで確認

導入したサイトをローカルでみてみましょう。
下記のコマンドを入力し、[ ready ]になったら、localhost:3000へ。

npm run dev
# or
yarn dev

⑤Firebaseへデプロイ

あとはこれをFirebaseへデプロイするのみです。

npm run deploy

これで自動的に設定したFirebaseのプロジェクトのFunctionsとHostingへデプロイしてくれます。

Deploy complete!が表示されたらサイトを確認してみましょう。
先ほどローカルで確認したサイトと同じものが確認できます。

Nextプロジェクトはpublicやsrcディレクトリ以下をいじって制作してください。
以上になります。

あとがき

最近、過去に制作したWebサイトをレンタルサーバーからFirebase Hostingに移行させました。
レンタルサーバーだと毎月サーバー料金もかかるため無料で運用する方法を考えていました。
そこで、訪問数も少ないためFirebaseの無料枠を使って運用することにしました。移行してからかかる料金は元々設定していたドメイン料くらいです(Firebaseはカスタムドメインも無料で設定できます)。
(移行するにあたって、サイトは動的(PHP)から静的(JS)にしました)
そこから今回はさらに、そのサイトをNext.jsプロジェクトにしてみました。

Next.js慣れないな(*´-`)