Next.js(静的サイト)をFirebaseにホスティングする + ブラウザリロード時の対応

こんにちはかみむらです。先日Designfindというサービスを作りました。このサービスはNext.js(静的サイト) + 外部のAPIで構成されていて、Jamstackアーキテクチャーを採用しています。そして、ホスティング先にFirebaseを利用しています。

Firebaseのホスティングは非常に優秀で、CLIコマンドで簡単にデプロイすることができます。なので静的サイトをホストする際は、Firebaseを使うのも選択肢の一つです。

今回はNext.js(静的サイト)をFirebaseにホスティングしていきます。また、ホスティングした静的サイトの個別ページでブラウザをリロードすると、リライト(URLは変わってないのに、404のページが表示されてしまう)する問題もありました。こちらの解決策の知見も共有していきます。

Jamstackアーキテクチャーについて詳しく知りたい方は、こちらの記事も一読ください。

code-log.hatenablog.com

前提

create-next-appで作成したプロジェクトを前提としています。

Firebase CLIのインストールとログインを事前に済ませてください。
こちらのドキュメントが参考になります。
firebase.google.com

セットアップ

まずは、Next.jsを静的サイトとして構成するための設定をしていきます。next exportを使用します。

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    //追加
    "export": "yarn run build && next export"
  },

試しに、pagesフォルダabout.js_error.jsを作成してみましょう。_error.jsはステータスコードが404もしくは500のエラーがでた場合表示させることができます。

nextjs-docs-ja.netlify.com

pages/about.js

const About = () => (
  <div>About</div>
);

export default About;

pages/_error.js

const Error = () => (
  <div>404</div>
);

export default Error;

これで準備は完了です。一旦exportしてみましょう

$ yarn run export

outフォルダが作成されましたので、中身をみてみましょう。pagesフォルダの3つのhtmlが生成されています。

f:id:kamimura-dev:20200222193954p:plain

これで、静的サイトとして構成することができました。

Firebaseのセットアップ

次にFirebaseにホスティングする設定をしていきます。CLI上で、下記のコマンドを実行してください。

$ firebase init

いくつか質問されるので、選択していきます。まずは、Hostingを選択します。

f:id:kamimura-dev:20200222193131p:plain

そして、ホスティング先のプロジェクトを選択します。

f:id:kamimura-dev:20200222193143p:plain

そして、デプロイするフォルダをoutにします。

CLIでの設定が終了すると、firebase.json.firebasercが作成されています。

Firebaseのリライト設定

このままでもFirebaseにデプロイできるのですが、例えばaboutページにいってブラウザをリロードする、もしくはaboutとURLを直打ちすると、404ページがリライトされてしまいます。これを回避するために、個別ページ毎にリライト設定します。

firebase.google.com

今回のケースだとaboutページの設定を追加します。これで、aboutページでブラウザリロードしても、404ページがリライトされません。
firebase.json

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/about",
        "destination": "/about.html"
      }
    ]
  }
}

最後にFirebaseにデプロイしましょう。下記のコマンドでデプロイすることができます。

$ firebase deploy

URLが発行されるので、アクセスすると無事デプロイできてることが確認できます。

f:id:kamimura-dev:20200222194939p:plain

最後に

Next.js(静的サイト)をFirebaseにホスティングしてみました。これを気にぜひNext.jsを使ってみてください。